A full-stack appointment booking application with an admin dashboard, customer portal, and AI-powered chatbot assistant. Built for hackathon with modern technologies and a beautiful UI.
┌─────────────────────────────────────────────────────────────┐
│ FRONTEND │
├──────────────────────────┬──────────────────────────────────┤
│ Admin Dashboard │ Customer Portal │
│ (React + Vite) │ (React + Vite) │
│ Port: 5174 │ Port: 5173 │
└──────────────────────────┴──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ BACKEND (Express.js) │
│ Port: 3000 │
├─────────────────────────────────────────────────────────────┤
│ REST API │ Socket.IO │ AI Chatbot (Gemini) │ Email Service │
└─────────────────────────────────────────────────────────────┘
│
┌───────────────┼───────────────┐
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│PostgreSQL│ │ Redis │ │GoogleGemini│
│ Database │ │ Cache │ │ API │
└──────────┘ └──────────┘ └──────────┘
- 📅 Browse and book appointment slots
- 🏢 View available services and resources (venues, courts, equipment)
- 👤 User authentication & profile management
- 💳 Payment integration (PhonePe)
- 🤖 AI Chatbot - Get help booking appointments, service recommendations
- 📱 Mobile-responsive design
- 🔔 Real-time updates via Socket.IO
- 📊 Dashboard - Analytics & reporting with charts
- 📋 Services - Create/manage services with custom questions, pricing, capacity
- 👨⚕️ Providers - Manage service providers and their schedules
- 🏟️ Resources - Manage venues, courts, equipment with hierarchy support
- 📆 Appointments - View, confirm, or cancel bookings
- 🎫 Discounts - Create promo codes with percentage-based discounts
- 👥 Users - User management with role-based access (Admin, Organiser, Provider)
- ⚙️ Settings - Application configuration
- 🔐 JWT Authentication with role-based access control
- 📧 Email notifications (Nodemailer)
- 💰 Payment processing with PhonePe
- 🤖 AI Chatbot integration with Google Gemini Pro
- 🔄 Real-time WebSocket events
- 📁 File uploads for images
| Layer | Technology |
|---|---|
| Frontend | React 18, Vite, TailwindCSS, Zustand, Recharts |
| Backend | Node.js, Express 5, Socket.IO |
| Database | PostgreSQL + Prisma ORM |
| Cache | Redis |
| AI | Google Gemini API (gemini-2.0-flash) |
| Payments | PhonePe |
| Nodemailer |
Appointment_App_Gear_5/
├── admin/ # Admin dashboard (React + Vite)
│ └── src/
│ ├── components/ # UI components
│ ├── views/ # Page views
│ └── store/ # Zustand state management
│
├── customer/ # Customer portal (React + Vite)
│ └── src/
│ ├── components/ # UI components (auth, booking, chat, home)
│ ├── services/ # API service layer
│ └── context/ # React context
│
├── backend/ # Express.js API server
│ ├── prisma/
│ │ └── schema.prisma # Database schema
│ └── src/
│ ├── controllers/ # Route handlers
│ ├── routes/ # API routes
│ ├── services/ # Business logic
│ ├── middlewares/ # Auth, error handling
│ └── utils/ # Helpers
│
└── README.md
| Model | Description |
|---|---|
| User | Customers, admins, organizers, providers |
| Service | Bookable services with pricing, questions, capacity |
| Provider | Service providers with working hours |
| Resource | Venues, courts, equipment (supports hierarchy) |
| Slot | Available time slots for booking |
| Booking | Customer appointments |
| Transaction | Payment records |
| Discount | Promotional codes |
- Node.js 18+
- PostgreSQL
- Redis (optional, for caching)
- Google Gemini API Key
# Install backend dependencies
cd backend
npm install
# Install admin dependencies
cd ../admin
npm install
# Install customer dependencies
cd ../customer
npm installCreate .env file in backend/:
DATABASE_URL="postgresql://user:password@localhost:5432/appointment_db"
JWT_SECRET="your-super-secret-jwt-key"
PORT=3000
# Email (optional)
SMTP_HOST="smtp.gmail.com"
SMTP_PORT=587
SMTP_USER="your-email@gmail.com"
SMTP_PASS="your-app-password"
# PhonePe Payment (optional)
PHONEPE_MERCHANT_ID="your-merchant-id"
PHONEPE_SALT_KEY="your-salt-key"
PHONEPE_SALT_INDEX=1
# Google Gemini API
GEMINI_API_KEY="your-google-gemini-api-key"Create .env file in admin/ and customer/:
VITE_API_URL="http://localhost:3000/api"cd backend
# Generate Prisma client
npx prisma generate
# Run migrations
npx prisma migrate dev
# Seed sample data (optional)
node prisma/seed.js# Terminal 1 - Backend
cd backend
npm run dev # Runs on http://localhost:3000
# Terminal 2 - Admin
cd admin
npm run dev # Runs on http://localhost:5174
# Terminal 3 - Customer
cd customer
npm run dev # Runs on http://localhost:5173| Route | Description |
|---|---|
POST /api/auth/register |
User registration |
POST /api/auth/login |
User login |
GET /api/services |
List all services |
GET /api/resources |
List all resources |
GET /api/providers |
List all providers |
GET /api/slots |
Get available slots |
POST /api/bookings |
Create a booking |
GET /api/bookings |
List user bookings |
POST /api/payments/initiate |
Start payment |
GET /api/discounts |
List discounts |
POST /api/chatbot/message |
AI chatbot |
GET /api/reports |
Admin analytics |
GET /api/users |
User management |
| Role | Permissions |
|---|---|
| CUSTOMER | Book appointments, view own bookings |
| PROVIDER | View assigned appointments |
| ORGANISER | Manage services, providers, resources |
| ADMIN | Full system access |
The integrated chatbot uses Google Gemini 2.0 Flash to:
- Answer questions about services
- Recommend services based on symptoms/needs
- Guide users through the booking process
- Provide general appointment assistance
Setup Gemini:
- Get an API Key from Google AI Studio.
- Add it to
backend/.envasGEMINI_API_KEY.
npm run dev # Development with nodemon
npm start # Productionnpm run dev # Development server
npm run build # Production build
npm run preview # Preview production build
npm test # Run tests (admin only)The app uses a warm, professional design with:
- Primary Color: Terracotta (#C4653C)
- Background: Paper cream (#FAF6F0)
- Font: Inter / system fonts
- Icons: Lucide React
MIT License - Built for hackathon purposes.
Built with ❤️ by Team Gear 5