December 2024Freelance

VG Foods - Vegan Restaurant Platform

A modern, full-featured web application for a vegan restaurant offering online ordering, reservations, and administrative management. Built with React, TypeScript, and powered by Supabase for robust backend services.

Live Site

Key Features

For Customers

Online Ordering: Browse menu, add items to cart, and checkout.
Multiple Services: Dine-in reservations, Takeaway, and Party Orders.
User Authentication: Sign up, sign in, password reset, and profile management.
Order Management: View order history and track status.

For Administrators

Admin Dashboard: Complete management interface with role-based access.
Order & Reservation Management: Track, update, and handle bookings and orders.
Menu Management: Add, edit, or remove menu items easily.
Analytics: Track sales and customer data via Chart.js and D3.

Technical Highlights

Performance & PWA

Progressive Web App: Installable on devices with offline caching.

Animations: GSAP and Framer Motion for smooth scroll effects.

Code Splitting: Route-based lazy loading for faster initial load.

Assets: WebP image conversion, minification, and gzip compression.

System Integrations

Authentication: Secure flow with Supabase Auth Helpers.

Real-time Updates: Live order status and instant notifications.

Email Notifications: EmailJS integration for order confirmations.

Technology Stack

Frontend

React (18.3.1)
TypeScript (5.3.3)
Vite (6.2.0)
React Router (7.3.0)

Backend & Services

Supabase (2.48.1)
PostgreSQL
Supabase Auth
EmailJS

Styling & UI

Tailwind CSS
Styled Components
Headless & Radix UI
GSAP & Framer Motion

Project Structure

vgfoods/
├── src/
│   ├── components/
│   │   ├── Navbar.tsx, Footer.tsx  # Layout components
│   │   ├── sections/               # Home, About, Menu, Contact
│   │   ├── auth/                   # SignIn, SignUp
│   │   ├── admin/                  # Admin dashboard
│   │   ├── dashboard/              # User dashboard
│   │   ├── services/               # Dine-in, Takeaway, Party Order
│   │   └── checkout/               # Checkout process
│   ├── context/
│   │   └── Theme, Cart, Auth       # State management
│   ├── lib/
│   │   └── supabaseClient.ts       # Backend configuration
│   └── App.tsx & main.tsx          # Entry points
├── package.json                    # Dependencies
└── vite.config.ts                  # Vite configuration