Food Ordering Web App Technical Assessment (MERN Stack)

Problems

• Authentication Fixes Login: Return 401 Unauthorized if credentials are incorrect (currently returns 200 OK). Registration: Return 401 Unauthorized if the user already exists (currently returns 200 OK).
• UI Enhancement Add a zoom-in effect on hover for each menu image.
• Order UI Fix Ensure the “-” (minus) icon in the order section maintains a consistent position when the user interacts with it (e.g., when quantity changes).

Table of Contents

• Food Ordering Web App Technical Assessment (MERN Stack)
  • Problems
  • Table of Contents
  • Introduction
  • Features
  • Technologies Used
  • Installation
    • Prerequisites
    • Clone the Repository
  • Backend Setup
  • Frontend Setup
  • Admin App Setup
  • Usage
  • Screenshots
  • API Documentation

Introduction

This is a full-stack food ordering web application built using the MERN stack (MongoDB, Express, React, Node.js). The application consists of a customer-facing app for ordering food and an admin app for managing orders, menu items, and more.

Features

• User authentication and authorization
• Browse food items
• Add items to the cart and place orders
• Stripe Payment Integration: Secure and reliable payment processing using Stripe.
• Order tracking
• Admin panel to manage menu items, orders

Technologies Used

• Frontend: React.js, React Context API, React Router
• Backend: Node.js, Express.js
• Payment Gateway: Stripe
• Database: MongoDB
• Authentication: JWT (JSON Web Tokens)
• Styling: CSS

Installation

Prerequisites

• Node.js
• MongoDB

Clone the Repository

Backend Setup

Navigate to the backend directory:

cd backend

Install dependencies:

npm install

Create a .env file in the backend directory and add the following:

JWT_SECRET="your_jwt_secret_here"
STRIPE_SECRET_KEY="your_stripe_secret_key_here"

Start the backend server:

npm run server

Frontend Setup

Navigate to the frontend directory:

cd frontend

Install dependencies:

npm install

Start the frontend server:

npm run dev

Admin App Setup

Navigate to the admin directory:

cd admin

Install dependencies:

npm install

Start the admin app :

npm run dev

Usage

Access the customer-facing app at http://localhost:5173. Access the admin app at http://localhost:5174. Register as a new user or log in with existing credentials. Browse the menu, add items to the cart, and place an order. Pay using dummy visa card Use the admin panel to manage orders, menu items.

Screenshots

API Documentation

The API endpoints for the backend can be documented using tools like Postman or Swagger. Include endpoints for user authentication, menu items, orders, and more.