Beauty Clinic System: Website, Patient Files, Doctor Shares and Financial Reports

Overview

This is a complete system for a beauty clinic that I designed and built from scratch. It has two parts: a public website where visitors see the services, before-and-after work and articles, and get in touch, and a management system that runs patient files, doctors and each doctor's share, expenses and the financial report. So instead of paper files and Excel, the clinic has one place for its daily work and for being found online.

The website (for visitors)

• Home page: an introduction and an invitation to a consultation, a strip of benefits, a sample of services, before-and-after work, the latest articles, and the contact details with working hours.

• Services: a list of services with categories and search. Every service has its own page, with a full description, an image, frequently asked questions and a button to book an appointment that leads to the contact form.

• Gallery of results: before-and-after cases with categories and search. Every case has its own page that shows the before and after pictures side by side.

• Blog: articles with categories, search, a featured article, a table of contents inside each article, suggested reading, frequently asked questions, share buttons and a view counter. An article can be linked to a related service.

• About and contact: a message form that appears in the admin panel, a map, working hours and ways to get in touch.

• Login: after login every role goes to its own page (admin, doctor or patient).

All these pages are rendered on the server and optimized for Google.

Clinic management system

• Patient files: personal and contact details, medical history (such as underlying diseases, allergies, current medicines, pregnancy and breastfeeding and surgery history), the reason for the visit, upload of medical images and documents, and a table of the treatments done. Each treatment has a date, a service, the amount received, the treating doctor and the doctor's share, and the share is calculated automatically.

• Service and price catalog: services are defined with their areas, brands and a price for each, so adding a treatment to a file is faster and has fewer mistakes.

• Doctors: a doctor and his or her commission rule. The share of each doctor can be different for each category or each service, and different for a patient that the clinic brought and a patient that the doctor brought.

• Expenses and purchases: recording a purchase invoice with its items (category, description, brand, seller, quantity and amount), expense categories and an automatic total.

• Financial report: total income, net profit (income minus doctor shares and expenses), running costs and doctor shares for every month. A chart of daily income, a 12-month trend of profit and income, a breakdown of expenses, and a table of doctor performance (number of services, the doctor's income and the clinic's profit). Based on the Persian calendar.

• Patient insights: average age, busiest day of the week, the most loyal patient and the total number of files.

• Website management (CMS): add and edit services, portfolio cases, articles and categories with a rich-text editor that also supports tables and images, and a settings form for the site (phone, address, working hours, social networks and the about text). The inbox of the contact form is here too.

Doctor panel and patient panel

• Doctor panel: a personal dashboard with the month's income and the patients admitted, by the Persian calendar, and management of the doctor's own portfolio with before and after pictures. Each doctor sees only his or her own data.

• Patient panel: every patient logs in with an own account and sees his or her own medical file. The first login forces a password change.

Technical and security

• Three roles: admin, doctor and patient, with access control on every API.

• Secure login: passwords with bcrypt, sessions with JWT in a cookie, rate limiting for login attempts and the contact form, a forced password change for new accounts and security headers. The text of articles is sanitized before it is shown.

• SEO: structured data (schema.org) for articles, services, the gallery and breadcrumbs, a sitemap, instant notice of content changes to search engines (IndexNow) and an llms.txt file to introduce the site to language models.

• Images: upload to S3-compatible cloud storage, with compression in the browser and processing with sharp.

• PWA and analytics: installable on a phone and working offline for parts of the site, with Vercel Analytics and Speed Insights.

• Mobile friendly: responsive design and a Persian font, for the website and the panels.

Tools

• Next.js, React, TypeScript, Tailwind CSS and Radix UI

• MongoDB and Mongoose, JWT, bcrypt, Zod and React Hook Form

• Tiptap (editor), Recharts (charts), the Persian calendar, sharp, Vercel

Result

A single system that brings together the website that attracts patients, the medical file, the calculation of doctor shares, expenses and the financial report of the clinic, with separate roles and access for the admin, the doctor and the patient.