Terrace 21 - Web application for a premium restaurant

Terrace 21 - Web Application for a Premium Restaurant

Project Overview

Terrace 21 is a full-featured web platform for a premium restaurant, developed using modern technologies and best web development practices. The project implements a comprehensive restaurant management system with an elegant user interface and a robust backend architecture.

Key Features

The platform includes a complete menu management system with categories (breakfasts, lunches, dinners, hookah), a table reservation system with date and time validation, a guest cart using Local Storage, an administrative panel for content management, and an integrated map with restaurant geolocation.

Technical Challenges and Solutions

Guest Authentication Challenge

Challenge: The need to provide cart functionality for unregistered users without creating unnecessary server load. Guests should be able to add dishes to the cart, save their selection between sessions, and seamlessly proceed to registration while retaining all data.

Solution: A hybrid system was developed using Local Storage to store the guest cart and a unique Guest ID. An algorithm was created for generating unique guest identifiers, including a timestamp and random characters. When a guest proceeds to registration, the system automatically transfers cart data to the user's account via a dedicated endpoint that handles data migration.

JWT Token Security and Data Protection

Challenge: Ensuring secure storage of authentication tokens, protection against XSS and CSRF attacks, and implementing a refresh token system for long-term authentication without compromising security.

Solution: JWT transmission was implemented via HttpOnly cookies with additional Secure and SameSite flags. A custom JWT filter was created in Spring Security for automatic token interception and validation. A refresh token system with rotation was developed, where each new access token is accompanied by a new refresh token. Additionally, a whitelist mechanism for valid tokens with automatic deletion upon logout was implemented.

Complex Reservation System with Validation

Challenge: Creating an intelligent table reservation system that considers restaurant operating hours, available seating, time slots, and special client requirements (celebrations, business meetings).

Solution: A multi-layered validation system with frontend and backend checks was developed. An algorithm for dynamically calculating available time slots based on current load was created. A conflict resolution system was implemented to prevent double bookings, along with a mechanism for automatically releasing unprocessed requests after a certain period.

Premium Adaptive Design

Challenge: Creating an elegant interface that matches the status of a premium restaurant and displays correctly on all devices, from mobile phones to widescreen displays, while maintaining a professional appearance and ease of use.

Solution: A modular CSS architecture was developed using CSS custom properties for centralized design system management. Complex animations with CSS transforms and transitions were implemented without impacting performance. Mobile First principles with progressive enhancement were applied, and a flexible grid system that adapts to any screen width was created.

Performance Optimization and User Experience

Challenge: Ensuring fast page loading with a large number of high-quality images of dishes and interiors, minimizing interface response time, and creating smooth user interaction.

Solution: Lazy loading with Intersection Observer API was implemented for images, CSS was optimized by minimizing repaint/reflow operations through effective use of transform instead of changing layout properties. A critical resource preloading system was created, and content delivery optimization with responsive images was implemented. Skeleton screens were realized to improve perceived performance.

External Service Integration

Challenge: Seamless integration with Google Maps to display the restaurant's location, an email notification system for booking confirmations, and potential integration with payment systems.

Solution: An abstract layer for working with external APIs was created, allowing easy replacement of service providers. Error handling with graceful degradation was implemented for cases of external service unavailability. A caching system was developed to reduce the number of external requests and improve system response.

Results and Achievements

Within five weeks of development, a full-featured platform was created with an intuitive user interface, a secure authentication system, a scalable backend architecture, full adaptability for mobile devices, and readiness for production deployment.

The project demonstrates a deep understanding of modern web technologies, skills in working with complex authentication and authorization systems, experience in creating user-friendly interfaces, and the ability to solve non-standard technical challenges.

Implementation Timeline: 5 weeks

Status: Completed and Ready for Deployment