Skip to content

Latest commit

 

History

History
191 lines (132 loc) · 6.66 KB

Documentation.md

File metadata and controls

191 lines (132 loc) · 6.66 KB

FoodJET - Food Delivery App Full Documentation

Table of Contents

  1. UX
  2. Frontend
  3. Backend
  4. API

UX

User Study

Before developing the app, I conducted user research to understand my target audience’s preferences and behavior regarding online food ordering. This research informed the app's design and functionality.

  • Steps for conducting this study: I created a survey to gather user insights, followed up with in-depth interviews, and analyzed the data to inform design decisions.

Questions to Users (Stage 1):

  • How often do you order food online?
  • Do you prefer to browse by food categories (e.g., appetizers, desserts) or by popularity?
  • What do you find frustrating about food delivery apps?
  • What payment method do you prefer (card, PayPal, digital wallets)?
  • How important is fast checkout?

Form Link: Survey for Food Delivery App

Analysis (Stage 2):

Based on the responses, the target audience is:

  • Age: 21-46.
  • Preferences: Fast, easy-to-use menu browsing, with a preference for category filtering and fast checkout processes.
  • Pain Points: Complicated navigation and slow checkout.

Based on this data, I created personas, a site map, and a prototype to guide the project.

Personas and User stories

Persona Link: Link to Personas

Prototype

Lo-Fi Prototype Link: Link to Prototype

Site Map

Site Map Link: Link to Sitemap

Frontend

Setup with React (JSX) and CSS

For the frontend, I used React with JSX and CSS to design a clean, responsive, and user-friendly interface. Below are the steps I followed to set up the frontend:

  1. Install React with Vite:

    npm create vite@latest  --template react

    Chose React (JavaScript) for the project.

  2. CSS for Styling:

    • I used CSS to style the components for flexibility and full control over the design.
    • CSS files are linked directly to each React component for modular and maintainable styling.

  3. Frontend Tools:

    • React (JSX)
    • CSS for custom styling
    • React Router for page navigation

Key Frontend Features

  1. Category-Based Menu:

    • Users can browse food items organized into categories such as Salad, Rolls, Sandwich, Cake, Pure Veg, Pasta, Noodles and Desserts,

  2. Cart Management:

    • Users can add items to their cart, adjust quantities, and proceed to checkout.

  3. User Authentication:

    • User sign-up and login features are implemented with JWT-based authentication to ensure secure sessions.

  4. Stripe Integration for Payment:

    • Stripe is integrated into the checkout page for secure online payments, ensuring smooth transactions.

  5. Responsive Design:

    • The app is responsive, optimized for mobile, tablet, and desktop using media queries in CSS.

Backend

Setup with Node.js, Express, and JavaScript

For the backend, I used Node.js and Express with JavaScript. Below are the steps to set up the backend:

  1. Initialize Node.js and Express:

    npm init -y
npm install express dotenv

    This sets up the basic Node.js environment with Express as the web server.

  2. CORS Setup:

    npm install cors

    Configured CORS to allow requests from the frontend.

  3. Backend Tools:

    • Node.js
    • Express for server-side handling
    • MongoDB for database management
    • Stripe API for handling payments

  4. File Structure:

    • app.js: Handles Express routes and middleware.
    • server.js: Runs the server on a specified port.
    • routes: Manages different routes for authentication, menu, and orders.

Key Backend Features

  1. User Authentication:

    • JWT-based user authentication (register, login, and logout).

  2. Menu Management:

    • API routes to get food items based on their categories.

  3. Order Management:

    • Orders are placed and stored in MongoDB, including order status and delivery details.

  4. Stripe Payment Integration:

    • Stripe API is used to process payments securely. Backend routes are created to initiate and confirm payments.

API

MongoDB

For the database, I used MongoDB to store user details, food items, and order information.

  1. MongoDB Connection:

    • I used Mongoose to connect to MongoDB and define schema models.
    npm install mongoose

  2. Schema Models:

    • User: Stores user credentials, order history, and personal details.
    • Menu Item: Stores food items categorized by type.
    • Order: Stores the order information, including the user, items ordered, payment status, and delivery address.

Stripe Payment Integration

Stripe is integrated for processing payments.

  1. Install Stripe SDK:

    npm install stripe

  2. Payment Process:

    • Users can pay using Stripe, with backend routes handling the payment initiation and confirmation.
    • Webhooks are used to listen for payment events from Stripe, ensuring payments are completed securely.

Sure! Here’s another version for your documentation:

API Testing

For testing purposes, I utilized Thunder Client to test CRUD operations on user accounts and menu items, including login and registration functionalities. Additionally, I employed Insomnia to simulate HTTP requests and validate the overall API functionality.

Key Endpoints Tested

  • GET /menu: Tested the retrieval of food items by category.
  • POST /orders: Verified the process of placing an order and confirming payment.
  • POST /payments: Checked the initiation and confirmation of payments through Stripe.