NomNomNow Eats Online

NomNomNow Eats Online is a food delivery demo built with React, TypeScript, Vite, Tailwind CSS, and a small Express + SQLite backend. It includes restaurant browsing, menu selection, cart checkout, order history, contact form submission, and a lightweight admin dashboard.

What Is Included

• Restaurant discovery with search and cuisine filters.
• Restaurant menu pages with category tabs and cart actions.
• Cart checkout with delivery details, payment selection, and order receipt.
• Order history with delivery progress tracking.
• Contact form that stores submissions through the backend.
• Profile page with form persistence in localStorage.
• Admin login and dashboard for viewing and updating orders, customers, and contact messages.

Tech Stack

• Frontend: React 18, TypeScript, Vite
• Styling: Tailwind CSS, shadcn/ui, Radix UI, Lucide icons
• State and data: React Context, TanStack Query, React Hook Form, Zod
• Backend: Node.js, Express, SQLite

Project Structure

• src/App.tsx sets up routing, layout, and the admin route guard.
• src/context/CartContext.tsx manages cart state, order submission, and contact submission.
• src/data/foodData.ts contains the restaurant and menu seed data used by the UI.
• src/utils/api.ts wraps requests to the backend API.
• backend/server.js exposes the API and stores data in local SQLite databases.

Prerequisites

• Node.js 18 or newer
• npm

Setup

Install frontend dependencies from the project root:

npm install

Install backend dependencies:

cd backend
npm install

Run Locally

Start the backend server first:

cd backend
npm run dev

The backend runs on http://localhost:5000 by default.

In a second terminal, start the frontend:

npm run dev

Vite will print the local frontend URL, usually http://localhost:5173.

Available Scripts

From the project root:

• npm run dev - Start the Vite development server.
• npm run build - Build the frontend for production.
• npm run build:dev - Build the frontend in development mode.
• npm run lint - Run ESLint across the project.
• npm run preview - Preview the production build locally.

From the backend folder:

• npm start - Start the Express server.
• npm run dev - Start the Express server with nodemon.

Frontend Pages

• / Home page with featured restaurants and popular dishes.
• /restaurants Restaurant browsing with search and cuisine filters.
• /restaurants/:id Restaurant menu and add-to-cart flow.
• /cart Cart review, delivery details, payment, and receipt.
• /orders Order history and delivery progress.
• /profile Customer profile form with saved preferences.
• /contact Contact form and business information.
• /admin-login Demo admin sign-in.
• /admin Admin dashboard for orders, customers, and contact messages.

Backend Overview

The backend exposes REST endpoints for:

• Orders
• Customers
• Contact messages

Data is stored in local SQLite databases inside the backend folder:

• orders.db
• customers.db
• contact.db

These database files are created automatically when the server starts.

Demo Admin Access

The admin area uses a simple localStorage flag for access control. Use these demo credentials on the login page:

• Username: admin
• Password: 123

Notes

• The frontend reads restaurant and menu data from static files in src/data.
• The checkout flow writes new orders and contact submissions to the backend API.
• Profile data is persisted locally in the browser, not in the backend.