Infomatrix Website β Website, Matrix Studio and Customer Portal
Our own bilingual website with Matrix Studio for the team, a customer portal for requests, appointments, quotations and invoices, an AI assistant, a free AI website check and secure sign-in with passkeys.
Built with
- Next.js
- React
- TypeScript
- Node.js
- Payload CMS
- MongoDB
- Mongoose
- Tailwind CSS
- shadcn/ui
- Radix UI
- Motion
- React Hook Form
- HTML
- CSS
- SCSS
- Python
- Odoo
- Google Gemini
- Google Cloud Vision
- PageSpeed Insights
- Google Analytics
- WebAuthn (Passkeys)
- JWT
- Sharp
- Vitest
- GitHub Actions
- Nginx
- PM2
- Cloudflare

The home page
This website is Infomatrixβs own project: the shop window for our IT support, websites and software, and the place where customers and the team work together. Infomatrix designed and built it with Next.js, Payload CMS and MongoDB, and runs it end to end.

The home page in the dark theme
A bilingual website, editable in the CMS
Every page, text and email is in German and English and can be changed without touching any code. Pages are put together from blocks, blog posts and projects share one layout with a table of contents, and the solutions are grouped so that visitors quickly find what they need. A light and a dark theme, smooth scrolling and fast loading make the website pleasant to use.

The solutions, grouped so that visitors find what they need

A blog post with its table of contents
Matrix, the AI assistant
Matrix answers visitorsβ questions in their language and recommends the solutions that fit, with short answers and links to the matching offers.

Matrix, the AI assistant, below the solutions
Free AI website check
Anyone can have a website checked for free. The check measures speed with Google PageSpeed and looks at search engines, security and accessibility; an AI then writes an easy-to-read report, which arrives as a PDF by email.

The free AI website check
Matrix Studio: one place for the team
Matrix Studio is the websiteβs own back office, built into the website in its design. The team signs in on the website and finds everything there: the content, customer requests, appointments, time tracking and settings. Each team member sees what their role allows, and the overview shows at a glance what is waiting.

Matrix Studio: the teamβs overview
Content
Pages, blog posts, solutions, projects, team members and media are edited in Matrix Studio, in German and English. Texts are written with blocks β headings, pictures, tables, charts, buttons and more β and drafts stay private until they are published. Every published version of the legal pages is kept, so earlier versions can still be read.

Blog posts, pages, solutions and projects are edited right in Matrix Studio
Support tickets
Requests from the support form, the customer portal and emails to the support address become tickets. The team gives each one a status, a priority and team members, answers the customer by email right from the ticket, and adds internal notes only the team sees. Tickets about the same thing can be merged, and the mailbox can be checked for new emails at any time with a click.

Support tickets with status, priority and team members

A ticket: answers to the customer and internal notes for the team
Appointments
Visitors book a free first consultation online, and the team confirms it, offers another time or plans its own appointments with customers: online, by phone or on site. Customers and team members get the matching emails and calendar invitations.

Appointments and free consultations
Time tracking
The team checks in for the working day, times its work with a timer and links each entry to a customer, a ticket or an appointment. Remote support sessions are recorded too. The time report adds up hours and amounts, exports them as CSV and marks the entries once they are invoiced.

The time report, ready for invoicing
Customer portal
Customers have their own account in the same Matrix Studio, with only what is theirs. They see their support requests, appointments, quotations and invoices, and change their details and the language of our emails themselves.

The customer portal: requests and appointments at a glance
Support requests
Customers open requests, attach files and follow the answers in one conversation. Remote support sessions show in the request with their time, so everything about a problem stays together.

A support request as the customer sees it, with the remote support session
Appointments
Upcoming appointments show with the link to the online meeting; customers book new ones, or move and cancel them, in a few clicks.

Appointments with a link to the online meeting
Quotations and invoices
Customers request a quotation for a solution, accept and sign it online, and pay invoices online. Quotations and invoices come from Odoo, the business software Infomatrix works with, and stay in sync with it.
Company accounts
A company has one account for its employees: its administrators invite colleagues, give them roles and decide who may see invoices or open requests.

A company account: employees, invitations and roles
Secure sign-in
Customers and the team sign in with a passkey β Face ID, Touch ID, Windows Hello or their phone β or with their password and a second step: a code by email or from an authenticator app. They set up passkeys and the authenticator app in their profile, see on which devices they are signed in and can sign out of any of them. After too many wrong attempts, an account is locked for a while.

Sign in with a passkey, or with the password and a second step

The second step: a code from the authenticator app or by email

Passkeys and the authenticator app, set up in the profile
Emails in one design
Every email the website sends β confirmations, answers, invoices, sign-in codes β has the same design, comes in the customerβs language and works with screen readers. A copy of each is kept for the team; sign-in codes and private links are removed from those copies.
What we delivered
- Design & development: a fast, bilingual website with Matrix Studio for the team and a customer portal.
- Content management: Payload CMS, with every text editable in German and English.
- Security: passkeys, a second step after the password, locked accounts after wrong attempts and signed-in devices.
- Integrations: Odoo for quotations, invoices and payments, Google Gemini for Matrix and the website check, Google PageSpeed.
- Hosting & maintenance: server, SSL, backups, and automatic tests before every update.

