Live Demo: Barbershop App
Disclaimer: This is a real-world project developed for a customer.
The Barbershop Management Application is a comprehensive fullstack solution designed to streamline the operations of a modern barbershop. It is a single Next.js App Router application (frontend and backend colocated), ensuring a seamless development and deployment process.
The goal of this project is to create a robust multi-tenant SaaS: barbershop owners self-serve a salon, manage their team, schedule appointments, and take customer bookings on a per-salon public page. A single Next.js codebase keeps the app cohesive and scalable, facilitating easier maintenance and feature expansions.
- Employee Management: Add, edit, and delete barbers with detailed profiles.
- Scheduling: View and manage weekly schedules, including available time slots.
- Appointment Booking: Customers can book appointments online with real-time availability.
- Real-Time Updates: Utilize React Query for efficient data fetching and caching.
- Responsive Design: Ensure a seamless experience across all devices.
- Notifications: Automated booking-confirmation emails (Resend).
- React.js: For building a dynamic and responsive user interface.
- Next.js 16: App Router framework for server-side rendering and routing.
- BetterAuth: Passwordless magic-link authentication (membership-based authz).
- Neon PostgreSQL + Drizzle ORM: Type-safe database access on serverless Postgres.
- MercadoPago: Payment processing for bookings.
- Resend: Transactional email (magic link + booking confirmation).
- Tanstack Query: For efficient data fetching, caching, and state management.
- Zod: Schema validation for robust data handling.
- Date-FNS: Utility library for date manipulation.
- Lucide-React: Icon library for enhancing UI elements.
- Sonner: Notification library for user feedback.
One of the significant challenges was implementing a dynamic employee management system. Ensuring that adding, editing, and deleting employees would reflect seamlessly across the application required meticulous state management and API design. Utilizing Drizzle ORM and React Query facilitated a type-safe and efficient approach to handle these operations.
Creating a flexible scheduling system that accommodates multiple employees and their available time slots was complex. Implementing CRUD operations for time slots and ensuring real-time availability required careful planning and robust backend logic.
Prerequisite: Docker must be running — the local database uses a Dockerized Postgres + Neon WebSocket proxy (see docker-compose.yml).
- Clone the Repository:
git clone https://github.com/facuperezm/barbershop.git cd barbershop - Install Dependencies:
pnpm i
- Set Up Environment Variables:
cp .env.example .env # local defaults are documented inside; fill in the rest - Start the Local Database and Seed It:
pnpm db:setup # docker Postgres + push schema + booking constraint + seed - Run the Development Server:
pnpm dev
Real magic-link login requires a verified Resend domain. For local development, the sign-in page shows a dev sign-in button that logs in as the seeded test owner (owner@test.local). This button is dev-only and never appears in production.
