Skip to content

Latest commit

 

History

History
119 lines (96 loc) · 4.54 KB

File metadata and controls

119 lines (96 loc) · 4.54 KB

Ring2Bring - Local Food Delivery Platform

Overview

Ring2Bring is a food delivery web application designed for small-scale local operations. It enables restaurant owners to list their menus, customers to place orders, and admins to manage deliveries with a small team of 2-3 delivery personnel.

Project Architecture

Technology Stack

  • Frontend: React with TypeScript, Tailwind CSS, Shadcn UI components
  • Backend: Express.js with TypeScript
  • Storage: In-memory storage (MemStorage) for MVP
  • State Management: TanStack Query (React Query v5)
  • Routing: Wouter (frontend), Express routes (backend)
  • Form Handling: React Hook Form with Zod validation

Data Model

The application uses the following core entities:

  1. Restaurants: Restaurant listings with name, cuisine, ratings, delivery time
  2. Menu Items: Food items with prices, categories, vegetarian status
  3. Customers: Customer information stored per order
  4. Delivery Boys: Delivery personnel with availability status
  5. Orders: Order tracking with status updates and delivery assignment

Application Features

Customer Interface

  • Home Page (/): Browse restaurants with search functionality
  • Restaurant Page (/restaurant/:id): View menu, add items to cart
  • Checkout (/checkout/:restaurantId): Place orders with delivery details
  • Order Tracking (/order-tracking/:id): Real-time order status updates

Admin Dashboard

  • Dashboard (/admin): Overview with key metrics and recent orders
  • Order Management (/admin/orders): View and update order status, assign delivery boys
  • Restaurant Management (/admin/restaurants): CRUD operations for restaurants
  • Menu Management (/admin/menu-items): CRUD operations for menu items
  • Delivery Management (/admin/delivery-boys): Manage delivery team

Design System

Color Scheme

  • Primary: Vibrant orange (#FA8334) - appetite-stimulating color for food delivery
  • Accent: Warm complementary colors for cards and highlights
  • Background: Clean white/dark gray with proper contrast ratios

Typography

  • Primary Font: Inter (body text)
  • Accent Font: Poppins (headings and CTAs)
  • Clean hierarchy with proper font sizes and weights

Components

  • Shadcn UI component library for consistency
  • Responsive design with mobile-first approach
  • Dark mode support with theme toggle
  • Smooth hover and active state transitions

API Routes

Restaurants

  • GET /api/restaurants - List all restaurants
  • GET /api/restaurants/:id - Get restaurant details
  • POST /api/restaurants - Create restaurant (admin)
  • PATCH /api/restaurants/:id - Update restaurant (admin)
  • DELETE /api/restaurants/:id - Delete restaurant (admin)

Menu Items

  • GET /api/menu-items - List all menu items
  • GET /api/menu-items/:restaurantId - Get menu items for a restaurant
  • POST /api/menu-items - Create menu item (admin)
  • PATCH /api/menu-items/:id - Update menu item (admin)
  • DELETE /api/menu-items/:id - Delete menu item (admin)

Orders

  • GET /api/orders - List all orders
  • GET /api/orders/:id - Get order details
  • POST /api/orders - Create new order
  • PATCH /api/orders/:id - Update order status (admin)

Delivery Boys

  • GET /api/delivery-boys - List all delivery boys
  • POST /api/delivery-boys - Add delivery boy (admin)
  • PATCH /api/delivery-boys/:id - Update delivery boy (admin)
  • DELETE /api/delivery-boys/:id - Remove delivery boy (admin)

Development Workflow

Running the Application

npm run dev

This starts both the Express backend and Vite frontend on the same port.

Key Files

  • shared/schema.ts - Shared TypeScript types and Zod schemas
  • server/storage.ts - In-memory storage implementation
  • server/routes.ts - API route definitions
  • client/src/App.tsx - Main application router
  • client/src/index.css - Design system tokens and utilities

User Preferences

  • Mobile-first design approach
  • Clean, minimal interface focusing on core functionality
  • Fast performance with efficient state management
  • Local-focused branding and messaging

Recent Changes

  • Initial project setup with complete data model
  • Full frontend implementation with all customer and admin pages
  • Design system configuration with food delivery color scheme
  • Component library setup with Shadcn UI
  • Dark mode support with theme toggle
  • Responsive layouts for all screen sizes

Next Steps

  • Implement backend API routes
  • Connect frontend to backend with real data
  • Add sample data for testing
  • End-to-end testing of core user journeys