Table Tennis Booking System

A modern, full-stack table tennis court booking system built with Next.js, shadcn/ui, and SQLite.

Features

User Features

• Secure Authentication: User registration and login with JWT tokens
• Court Booking: Interactive booking calendar with real-time availability
• Email Notifications: Automatic confirmation and cancellation emails
• Mobile-First Design: Responsive UI that works on all devices
• Booking Management: View and manage your bookings

Admin Features

• Court Management: Add/remove courts and configure availability
• Time Slot Configuration: Set operating hours for different days
• User Management: View and manage user accounts
• Booking Override: Admin can edit or cancel any booking
• Announcements: Create and manage system announcements
• Activity Logs: Comprehensive logging of all system activities
• Analytics Dashboard: Booking statistics and usage metrics

System Features

• 7-Day Booking Window: Users can only book up to 1 week in advance
• Real-time Validation: Both client and server-side booking validation
• Secure Backend: SQLite database with Drizzle ORM
• Docker Support: Easy deployment with Docker and reverse proxy
• Email Integration: Gmail SMTP integration for notifications

Technology Stack

• Frontend: Next.js 14, React, TypeScript
• UI Components: shadcn/ui, Tailwind CSS, Radix UI
• Backend: Next.js API routes, Drizzle ORM
• Database: SQLite
• Authentication: JWT tokens with httpOnly cookies
• Email: Nodemailer with Gmail
• Deployment: Docker, Nginx reverse proxy

Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Gmail account for email notifications

Installation

1. Clone the repository

   git clone <repository-url>
   cd tt-booking
   

2. Install dependencies

   npm install
   

3. Set up environment variables

   cp .env.example .env.local
   

   Edit .env.local with your configuration:

   NEXTAUTH_SECRET="your-secret-key-here-make-this-very-long-and-random"
   EMAIL_USER="your-email@gmail.com"
   EMAIL_PASSWORD="your-gmail-app-password"
   ADMIN_EMAIL="admin@example.com"
   ADMIN_PASSWORD="admin123"
   

4. Set up the database

   npm run db:push
   

5. Run the development server

   npm run dev
   

6. Access the application

   • User interface: http://localhost:3000
   • Admin panel: http://localhost:3000/admin

Configuration

Gmail Setup

1. Enable 2-factor authentication on your Gmail account
2. Generate an App Password: Google Account > Security > App passwords
3. Use the App Password as EMAIL_PASSWORD in your environment variables

Default Settings

• Courts: 2 courts (configurable via admin panel)
• Monday/Tuesday: 19:00-23:00 (configurable)
• Sunday: 12:00-17:00 (configurable)
• Booking window: 7 days from current date

Docker Deployment

Development

docker-compose up -d

Production

1. Update environment variables in docker-compose.yml
2. Configure SSL certificates in the ssl directory
3. Update domain in nginx.conf
4. Deploy:

   docker-compose -f docker-compose.yml up -d
   

Project Structure

tt-booking/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   ├── dashboard/         # User dashboard
│   ├── admin/            # Admin panel
│   └── layout.tsx        # Root layout
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── auth/             # Authentication forms
│   ├── booking/          # Booking components
│   └── admin/            # Admin components
├── lib/                  # Utility libraries
│   ├── db/               # Database schema and connection
│   ├── auth.ts           # Authentication utilities
│   ├── email.ts          # Email functionality
│   └── utils.ts          # General utilities
├── docker-compose.yml    # Docker configuration
├── Dockerfile           # Container definition
└── nginx.conf          # Reverse proxy configuration

API Endpoints

Authentication

• POST /api/auth/login - User login
• POST /api/auth/register - User registration
• POST /api/auth/logout - User logout

Bookings

• GET /api/bookings - Get user bookings
• POST /api/bookings - Create booking
• PUT /api/bookings/[id] - Update booking
• DELETE /api/bookings/[id] - Cancel booking

Admin

• GET /api/admin/stats - Dashboard statistics
• GET /api/admin/courts - Manage courts
• GET /api/admin/settings - System settings
• GET /api/admin/logs - Activity logs

Security Features

• Rate Limiting: API endpoints are rate-limited via Nginx
• CSRF Protection: Built-in Next.js CSRF protection
• SQL Injection Prevention: Drizzle ORM parameterized queries
• XSS Protection: Content Security Policy headers
• Secure Cookies: httpOnly, secure, sameSite cookies
• Input Validation: Zod schema validation
• Password Hashing: bcrypt with salt rounds

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.

Support

For issues and questions, please create an issue in the repository.