Web Food - Digital Restaurant Web Application

A high-performance, modern web application built to help restaurants transform their traditional dining experience into a fully digital, interactive journey. This project involved migrating a static website into a dynamic, scalable application using React.js, with a strong focus on usability, speed, and customer engagement.

? Key Features

⚡ React-Powered Core

Developed using React.js with Vite to deliver a fast, responsive single-page application (SPA) experience.

? Multi-Page Navigation

Implemented seamless routing using React Router, allowing smooth transitions between the landing page and a dedicated, QR-friendly digital menu.

? Dynamic Digital Menu

A smart filtering system enables users to browse categories like Burgers, Pizza, and Drinks with instant UI updates for a smooth experience.

? Interactive Shopping Cart

Built using the Context API to handle global state efficiently, featuring:

Real-time price and quantity updates

Persistent cart data via LocalStorage

Elegant sliding sidebar for quick cart access and management

? Premium UI/UX Design

Enhanced user experience with:

AOS (Animate On Scroll) for smooth animations

Fully responsive, mobile-first layout

Clean, modern interface with interactive elements

?️ Technical Implementation

Frontend: React.js (Hooks: useState, useEffect, useContext, useReducer)

State Management: Context API for centralized cart logic

Routing: React Router DOM

Animations: AOS.js

Styling: Modular CSS3 with responsive design principles

Data Handling: Structured, scalable menu data for easy updates

? Impact

This application provides restaurants with a scalable digital solution to:

Improve customer ordering experience

Reduce dependency on printed menus

Enable QR-based access for modern dining

Streamline order management through an intuitive interface