Barber Appointment System.
A production salon-management platform that delivers dedicated experiences for customers, barbers, and salon owners while bringing appointments, staff, services, scheduling, and notifications into one system.
Live · Google Play
- 01 · Role
- Frontend & mobile development · API integration · Backend collaboration
- 02 · Platform
- Responsive Web · Android
- 03 · Period
- In production
- 04 · Status
- Live · Google Play
Project context
Barber Appointment System is a web and Android application built to manage customer bookings and the daily operations of a barber shop from a single platform. The system provides dedicated interfaces and permissions for customers, barbers, and salon owners, with an additional Admin role for system-level management. Customers can select services and staff, book available time slots, manage their appointments, and browse services, employees, announcements, and the salon gallery. Barber and Owner experiences provide operational tools for appointment calendars, customers, employees, services, blocked times, scheduling, announcements, gallery content, and salon information. The project was developed by a two-person team: I owned the frontend and mobile application while my teammate focused primarily on the backend, with me also contributing to selected backend tasks when required.
Core challenge
The main frontend challenge was designing one product around several fundamentally different user journeys without making the experience inconsistent or overly complex. Customers needed a simple, guided booking flow, while barbers required efficient access to appointments and customers and salon owners needed a much broader management workspace covering staff, services, scheduling, and salon content. At the same time, the same Next.js codebase had to work as a responsive web application and as an Android application with native mobile behavior.
What I built
- 01
Developed the Next.js and TypeScript frontend end to end and built its responsive user experience.
- 02
Implemented role-specific page structures, navigation systems, and access flows for Customer, Barber, and Owner users.
- 03
Built the complete customer booking experience, including service selection, available staff and date/time selection, appointment notes, reservation submission, success states, appointment history, and cancellation flows.
- 04
Developed the Barber and Owner interfaces for appointment calendars, appointment details, customer management, staff management, services, blocked time ranges, salon schedules, and salon information.
- 05
Implemented announcement creation and editing, rich-text content flows, gallery management, and their integration into the role-based application experience.
- 06
Built the frontend integration layer for the ASP.NET Core REST API across authentication, users, services, staff, scheduling, reservations, gallery, and announcements.
- 07
Implemented the frontend flows for SMS-based phone verification during authentication and account-related operations.
- 08
Integrated Firebase Cloud Messaging through Capacitor Push Notifications, including device token handling, in-app notification presentation, and navigation to the relevant screen when a notification is opened.
- 09
Converted the Next.js web application into an Android application with Capacitor and adapted splash screen, status bar, Android back-button handling, native navigation, and device-specific behavior.
- 10
Collaborated with the backend developer on API contracts and application flows and contributed to selected backend implementation and integration work where needed.
Technical approach
The frontend is built with Next.js App Router, React, TypeScript, and Tailwind CSS. User roles are enforced both through middleware-level routing and server-side route guards, separating Customer, Barber, Owner, and Admin areas. The customer experience uses a mobile-first bottom navigation, while Barber and Owner interfaces adapt between desktop sidebar navigation and mobile bottom navigation. The booking flow starts with service selection, then retrieves eligible staff, salon closed days, and available time information from the API before guiding the customer through the reservation process. The ASP.NET Core backend follows a layered Domain, Application, Infrastructure, and API architecture backed by PostgreSQL and Entity Framework Core. JWT handles authentication, while SMS verification, Firebase push notifications, and Hangfire background jobs support communication and scheduled processes. The same Next.js frontend is delivered to Android through Capacitor, where native push notifications, device information, splash-screen behavior, and mobile navigation are integrated into the product.
System structure
- 01
Frontend
Next.js · React · TypeScript · Tailwind CSS - 02
Roles
Customer · Barber · Owner · Admin - 03
Mobile
Capacitor · Android - 04
Backend
ASP.NET Core · Layered Architecture - 05
Data
PostgreSQL · Entity Framework Core - 06
Messaging
SMS · Firebase Cloud Messaging - 07
Background Jobs
Hangfire
Current state
The platform is running in production and its Android application is distributed through Google Play. Customer booking and appointment-management flows operate alongside Barber and Owner workflows for appointments, staff, services, customers, scheduling, announcements, and gallery content. Important reservation events are connected to SMS and push-notification flows, while appointment time changes can automatically notify the affected customer. Hangfire supports scheduled background work, and the same Next.js frontend powers both the responsive web application and the Capacitor-based Android experience.