FarroService Frontend is a Next.js (App Router) application that serves two audiences:
- Clients — browse the service catalog and book an appointment with a master, no account required.
- Admins & Masters — log in to a dashboard to manage services, schedules, bookings, and (for admins) user accounts.
The app communicates with the FarroService Backend over a JWT-authenticated REST API.
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI library | React 19 |
| Language | TypeScript |
| Styling | Tailwind CSS 4 |
| State / Auth | React Context API (AuthContext) |
frontend/
├── app/
│ ├── page.tsx # Public page — service catalog + booking form
│ ├── layout.tsx # Root layout with AuthContext provider
│ └── dashboard/
│ ├── layout.tsx # Dashboard layout with nav + auth guard
│ ├── page.tsx # Dashboard overview
│ ├── bookings/ # Booking management
│ ├── schedule/ # Schedule editor
│ ├── services/ # Service management
│ └── users/ # User management (Admin+)
├── components/
│ ├── ui/ # Badge, Card, Modal, ConfirmModal, Select, Toast
│ ├── guest/ # ServiceCard, ServiceCatalog, BookingWizard
│ ├── dashboard/ # Tables, filters, editors, managers
│ └── layout/ # AppShell, Navbar
├── context/
│ └── AuthContext.tsx # JWT auth state (login / logout / profile update)
├── services/
│ └── authService.ts # HTTP client for auth endpoints
└── types/
└── index.ts # Shared TypeScript types, aligned with the backend
- Browse the service catalog (filterable by specialization)
- Multi-step booking wizard: choose a service → pick a master → pick an available time slot → enter contact details
- Bookings — view, filter, edit, and update the status of bookings
- Schedule — set weekly working hours per master
- Services — create, update, and deactivate services (Admin+)
- Users — manage admin and master accounts (Admin+)
Access to the dashboard is protected by an authentication guard tied to JWT-based roles (MainAdmin, Admin, Master).
- Node.js 18+
- The FarroService Backend running locally or accessible remotely
# Install dependencies
npm install
# Configure the API base URL
echo "NEXT_PUBLIC_API_URL=https://localhost:<port>/api" > .env.local
# Run the development server
npm run devThe app will be available at http://localhost:3000.
Core types in types/index.ts are kept in sync with the backend's DTOs, including:
Service,Master,SpecializationBookingandBookingStatus("Pending" | "Confirmed" | "Completed" | "Cancelled")AuthUser/AdminUserfor authenticated session data
Auth state is managed through AuthContext, which:
- Persists the JWT and authenticated user in
localStorage - Exposes
login,logout, and profile update actions - Drives the dashboard's role-based route guard
Part of the FarroService diploma project — see the backend repository for the API.