Leuchttraum Süd - A functional location Site and Booking System

The Leuchttraum Süd website is technically solid and purpose-driven, offering a clear and effective UX for room rental. The calendar booking feature under /booking is well-integrated and provides a good overview of availability.

The UI is minimalistic yet functional, allowing users to submit booking requests without friction. The implementation is lightweight and custom-coded, optimized for fast loading and clarity.

This website was built for my newly renovated office space, which we now offer for rent on a daily basis. The site was created as a quick solution to launch the offer online — from concept to deployment in just a few days.

While simple by design, it fulfills its purpose effectively.

In the future, it could be extended with automated booking workflows or an admin dashboard for better management as demand grows.

Key Features

• Modern, responsive design with intuitive user interface
• Online room booking system with real-time availability
• Google Calendar integration for automated scheduling
• Email notifications for bookings and confirmations
• Interactive maps with Leaflet integration
• Form validation with React Hook Form + Zod
• Toast notifications with Sonner
• Date handling with date-fns and react-day-picker

Tech Stack Overview

This project is built using a modern and powerful technology stack:

• Next.js 15: Utilizing the App Router for optimal performance
• TypeScript 5.7: Ensuring type safety and better developer experience
• Tailwind CSS 3.4: For responsive and maintainable styling
• UI Components: Radix UI and Shadcn for accessible and beautiful interfaces
• Form Handling: React Hook Form 7 + Zod for robust form validation
• Email: Nodemailer for reliable email notifications
• Maps: Leaflet + React Leaflet for interactive location features
• Animations: Framer Motion for smooth user interactions
• Date Handling: date-fns + react-day-picker for comprehensive date management
• Deployment: Vercel for seamless deployment and hosting
• Google Calendar API: For calendar integration

Project Structure

The project follows a well-organized structure:

.
├── public/             # Static assets
│   ├── img/            # Images
│   └── favicon/        # Favicon files
├── src/                # Source code
│   ├── app/            # Next.js app router pages
│   │   ├── api/        # API routes
│   │   ├── (auth)/     # Authentication routes
│   │   └── ...         # Other pages
│   ├── components/     # React components
│   │   ├── ui/         # UI components (Shadcn)
│   │   ├── forms/      # Form components
│   │   ├── layout/     # Layout components
│   │   └── ...         # Feature components
│   ├── hooks/          # Custom React hooks
│   ├── lib/            # Utility functions and configurations
│   │   ├── api/        # API clients
│   │   ├── utils/      # Utility functions
│   │   └── ...         # Other configurations
│   ├── types/          # TypeScript type definitions
│   ├── data/           # Static data/content
│   └── styles/         # Global styles and Tailwind config

Google Calendar Integration

The booking system integrates with Google Calendar to:

1. Display booked dates and time slots in real-time
2. Create new events automatically when bookings are made
3. Prevent double bookings through calendar synchronization
4. Send automated notifications for booking confirmations and updates

This is an API route handler in Next.js that manages booking requests.

Let me break it down:

1. GET Handler:

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const roomId = searchParams.get('roomId');
  
  const filteredBookings = roomId
    ? bookings.filter((booking) => booking.roomId === roomId)
    : bookings;
  
  await new Promise((resolve) => setTimeout(resolve, 500));
  
  return NextResponse.json(filteredBookings);
}

• This handles GET requests to fetch bookings
• It accepts a roomId query parameter to filter bookings for a specific room
• Includes a 500ms artificial delay to simulate network latency
• Returns filtered bookings as JSON

2. POST Handler:

export async function POST(request: NextRequest) {
  try {
    const bookingData = await request.json();
    
    // Validation
    if (!bookingData.customerName || !bookingData.customerEmail) {
      return NextResponse.json(
        { error: 'Missing required fields' },
        { status: 400 }
      );
    }
    
    // Google Calendar Integration Check
    const isGoogleCalendarConfigured =
      process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL &&
      process.env.GOOGLE_PRIVATE_KEY &&
      process.env.GOOGLE_CALENDAR_ID;
    
    if (isGoogleCalendarConfigured) {
      // Time Slot Processing
      if (bookingData.timeSlots && bookingData.timeSlots.length > 0) {
        const timeSlotsByDate = new Map();
        
        bookingData.timeSlots.forEach(
          (slot: { date: string; startTime: string; endTime: string }) => {
            if (!timeSlotsByDate.has(slot.date)) {
              timeSlotsByDate.set(slot.date, []);
            }
            timeSlotsByDate.get(slot.date).push({
              startTime: slot.startTime,
              endTime: slot.endTime,
            });
          }
        );

• Handles POST requests for creating new bookings
• Validates required fields (customerName and customerEmail)
• Checks if Google Calendar integration is configured
• Processes time slots by grouping them by date
• Uses a Map to organize time slots efficiently