Eat N Treat Website
Customer Booking & Workshop Discovery Platform
Overview
Eat N Treat Website is a customer-facing Angular web application designed for browsing cooking workshops, viewing detailed course information, and making online bookings. This frontend application provides an intuitive and visually appealing interface for customers to discover culinary workshops and complete their reservations seamlessly.
The application integrates with the Eat N Treat Spring Boot backend API for data management and booking processing, while offering Google OAuth authentication for secure and convenient user login.
Technologies Used
Frontend
- • Angular 20.x - Modern SPA framework
- • TypeScript - Type-safe development
- • RxJS - Reactive programming
- • Angular Router - Client-side routing
- • Reactive Forms - Form handling
- • Tailwind CSS - Utility-first styling
Backend & Services
- • Spring Boot REST API - Backend integration
- • Google OAuth 2.0 - Authentication
- • EmailJS - Email notifications
- • Google Auth Library - Token validation
- • HttpClient - API communication
Key Features
Workshop Discovery & Filtering
Browse cooking workshops with advanced filtering by category (Bread & Baking, Cakes & Desserts, International Cuisine, etc.), search functionality, and sorting options by name, date, fee, and duration.
Google OAuth Authentication
Seamless login with Google OAuth 2.0 integration allowing users to authenticate using their Google accounts. Includes token-based authentication and secure session management.
Interactive Booking System
Complete booking flow with reactive forms validation, batch selection, payment options (full payment or booking amount), coupon code application, and real-time price calculations with discount support.
Workshop Details & Gallery
Detailed workshop pages featuring instructor information, course descriptions, prerequisites, duration, pricing, student capacity tracking, and visual gallery with Unsplash integration for high-quality images.
Batch Management
View multiple batches for each workshop with availability status, start dates, time slots, and automatic calculation of next available batch dates.
Order Management
Personal order dashboard for users to view booking history, track order status, and manage upcoming workshop reservations.
User Experience Features
Responsive Design
Fully responsive layout optimized for desktop, tablet, and mobile devices with adaptive navigation
Real-time Validation
Client-side form validation with immediate feedback for email, phone numbers, and required fields
Dynamic Pricing
Real-time price calculation with INR currency formatting, discount application, and payment breakdown
Lazy Loading
Component lazy loading for optimal performance and faster initial page load times
Application Flow
Customer Journey
- Browse workshops on homepage with category-based filtering
- Search and sort workshops by various criteria (name, price, date)
- View detailed workshop information with instructor details and gallery
- Select preferred batch with date and time
- Login via Google OAuth for secure authentication
- Fill booking form with personal details and preferences
- Apply coupon codes for discounts (if available)
- Choose payment option (full payment or booking amount)
- Review and confirm booking details
- Receive confirmation via EmailJS integration
- Track bookings in personal orders dashboard
Technical Implementation
Component Architecture
Standalone components with lazy-loaded routes:
- • Home - Landing page with featured workshops
- • Workshop List - Browse and filter workshops
- • Workshop Detail - Detailed view with batches
- • Booking Form - Complete reservation system
- • Orders - Personal booking dashboard
- • Gallery - Visual showcase
- • About & Contact - Information pages
Service Layer
Dedicated Angular services for:
- • Workshop Service - API integration for workshop data
- • Auth Service - Google OAuth implementation
- • Email Service - EmailJS integration
- • Booking Service - Reservation management
Backend Integration
This frontend application integrates with the Eat N Treat - Workshop Manager Spring Boot backend for all data operations including:
- • Workshop Data: Fetching workshop details, batches, and availability via REST APIs
- • Booking Processing: Submitting bookings with validation and confirmation
- • User Authentication: Google OAuth token validation through Spring Security
- • Order Management: Retrieving user's booking history and order details
The application demonstrates a complete full-stack solution with frontend-backend separation using RESTful API architecture.
Challenges & Solutions
Challenge: Google OAuth Integration
Implementing secure Google login with token management and user session handling across the application.
Solution: Used Google Auth Library for Angular to handle OAuth flow, implemented token storage in localStorage with automatic refresh, and integrated with Spring Security on backend for token validation.
Challenge: Real-time Workshop Availability
Displaying accurate workshop capacity and preventing overbooking when multiple users browse simultaneously.
Solution: Implemented reactive data streams with RxJS to fetch latest availability, added visual indicators for workshop capacity (available/full), and server-side validation for concurrent bookings.
Challenge: Dynamic Coupon System
Building a flexible discount system supporting both percentage and fixed-amount coupons with validation.
Solution: Created a reactive coupon application system with immediate price recalculation, backend validation for coupon codes, and clear visual feedback for applied discounts.
Project Outcome
Eat N Treat Website successfully provides a modern, user-friendly platform for customers to discover and book cooking workshops. The application showcases proficiency in Angular development, third-party authentication integration, reactive programming, and creating seamless user experiences.