Context
Noqode designs B2B websites and keeps improving them with its clients over time. Webflow website design remains our starting point and our default recommendation. Astro, Sanity or Next.js take over when a project calls for it. Part of our work also goes beyond the website, with AI workflows and automations connected to our clients' tools.
Until September 2026, we tracked these projects the way most agencies do. Approvals went through email while Figma links and invoices each traveled on their own. A client had to piece these exchanges together to know where their site stood, and on our side the team lost time tracking down the right information.
We chose to design and build our own portal instead of stitching together off-the-shelf tools. In this in-house product, our clients follow their project and their Growth Team hours. They also find their invoices and their visibility on Google and in AI engines, while the team runs every account from a custom-built back office.
This case study is for companies considering a client portal or a business application. It follows the project from the design workshop on September 28, 2026 to launch on October 10, along with the three weeks of iteration that came after.
"With the portal, our clients always know where their site stands and which approvals concern them, without having to book a call with us. Internally, everything about a client is finally in one place and the team no longer wastes time looking for it. We are our own beta testers. We design our internal tools and use them every day before offering the same ones to our clients. This portal shows that we can build much more than a website, whether it's a client portal or a business application."
Challenges
A founder who launches a redesign wants to know where the site stands without waiting for a meeting, including the approvals due this week and the invoices still to pay. These answers had to appear as soon as they signed in, on desktop and on mobile, so the project would read clearly without any explanation from us.
The team faced the same scattering on its side. For a single client, the sales history lived in the CRM and the payments in the bank, while production files and Slack conversations filled in the rest. All of it had to come together in one workspace, with an overview of every account and a record for each client.
A client portal also holds sensitive data, from invoices to traffic statistics. Each client must only see their own space, and the team's internal notes must never appear on their side. Security therefore had to sit in the database itself and not only in the interface.
Finally, the tool had to live up to our websites. Clients choose us for the standard of our design, a promise that a rough application would have broken from the very first screen.
Objectives
The portal's four goals came out of the design workshop on September 28 and 29, where Amaury de Luca defined the features theme by theme.
Show clients their next action as soon as they sign in
The home screen adapts to what the client has signed, whether a project, a Growth Team, SEO and GEO support or several of these at once. The actions waiting for them come first, sorted by urgency and paired with the button that lets them handle each one on the spot.
Bring the client relationship into one place
Every exchange is tied to what it concerns. An approval happens on the relevant task and a comment stays attached to the deliverable it refers to. Invoices are paid from the Billing section, while Slack and email only serve to notify the right person.
Replace the team's spreadsheets with a back office
The team finds its tasks and its clients there, along with the requests still waiting on a client's reply. Management follows sales and the agency's finances in a space only it can access.
Design an interface on par with our websites
The portal relies on a complete design system, with contrast checked against WCAG guidelines and a mobile version designed screen by screen. The interface works in French and English, in light mode as well as dark mode. This UX and UI design work meets the same standards as our client websites.
Solutions
The project followed the same method as our client websites, with the design finished before the first line of code.
Finish the design in Figma before development
Interface references were gathered on Mobbin and sorted by screen family. The design system starts from the noqode.fr one and adapts it to an application, with color tokens in light and dark versions alongside documented typography, spacing and components.
The mockups cover 144 screens and states, including 11 emails. Their light, dark and English versions bring the total to 360 mockups in Figma. Across the whole system, black is for actions and color signals a status or a practice area, so each screen reads in a few seconds.
Give the client and the team two separate interfaces
On the client side, the project, the Growth Team and SEO and GEO tracking each have their own section, next to billing and help. The project is laid out in phases and tasks. When a mockup or a staging page needs their input, clients approve it or request a change from the task, where their feedback stays attached to the deliverable.
The team has its own interface, which works as a custom CRM. Its dashboard separates the tasks to handle from the approvals waiting on clients and shows how many days each one has been waiting. Every client has a record where their commitments and users sit next to the team's internal notes and the meetings and conversations pulled from Attio. Before notifying a client, the team opens the "View as client" mode and sees their screen exactly as they do.
Sales proposals are published there as web pages and accepted online. Management also has a dashboard fed by Qonto and Attio, where it tracks cash and expenses alongside invoices and opportunities.
Navigation stays smooth from one screen to the next, with transitions of 120 to 240 milliseconds that are reduced when the user has asked for less motion. On mobile, a floating tab bar gives access to each section and controls grow larger for touch.
Build with Claude Code under Noqode's direction
For a website, Webflow remains our default recommendation. A portal that manages accounts and access rights, on the other hand, calls for an application built in code. The portal was therefore developed with Claude Code, Anthropic's coding agent, under the direction of Amaury de Luca. Because design tokens carry the same names in Figma and in the code, the mockups are rebuilt screen by screen without any improvisation.
Written in TypeScript with Next.js 16 and React 19, the application has 63 pages and 134 server actions, plus 9 scheduled tasks. It is hosted on Vercel in the Paris region and its data lives in Europe in Supabase, a Postgres database, while emails go out through Resend. No change is released before it has gone through Noqode's GitHub repository and the test suite.
Build security into the database
Supabase applies row-level security, so every query checks who is making it before returning a single piece of data. A client can only read the information in their own space and the team's notes stay hidden from them. Two security audits carried out on October 10 and 16 confirmed this isolation and found no critical vulnerability.
Before every release, 1,398 tests and 491 permission checks verify the portal. The permission checks make sure each of the three roles, from client to administrator, only sees the data that belongs to it.
Impact / Results
The portal has been live at app.noqode.fr since October 10, 2026 and went through 95 production releases between October 6 and 27. Tracking in this client portal is now part of our website offers and of the Growth Team.
For our clients, a project they can follow without meetings
Clients know at any moment where their site stands and which actions are waiting for them. They approve their mockups online and pay their invoices in the same place, where they also follow their Growth Team hours and receive a report every month. Our SEO and GEO tracking also shows them whether ChatGPT, Claude and Perplexity cite their brand, next to their Google Search Console data.
For the team, a single source of truth
Because a client's entire history now sits on their record, the team no longer rebuilds a project from emails. Every morning, the dashboard shows the requests that need action from the team and the ones waiting on clients. The team gets back the time it used to spend searching for information across several tools.
The same method applies to our clients' portals and business applications
The portal shows Noqode's work beyond the website, with a complete web application connected to the team's tools and protected by controlled access rights. We apply the same method to client portals and business applications, with the design finished before the code and tests at every release.
The choice of technology follows the project. An editorial website usually stays on Webflow, but we can build it with Astro and Sanity as a headless CMS when it has to connect to business tools. When the need goes beyond the website, as it did for this portal, Next.js and Claude Code take over. Our custom development offer details these formats.
