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.
- 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
The application uses the following core entities:
- Restaurants: Restaurant listings with name, cuisine, ratings, delivery time
- Menu Items: Food items with prices, categories, vegetarian status
- Customers: Customer information stored per order
- Delivery Boys: Delivery personnel with availability status
- Orders: Order tracking with status updates and delivery assignment
- 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
- 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
- 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
- Primary Font: Inter (body text)
- Accent Font: Poppins (headings and CTAs)
- Clean hierarchy with proper font sizes and weights
- Shadcn UI component library for consistency
- Responsive design with mobile-first approach
- Dark mode support with theme toggle
- Smooth hover and active state transitions
GET /api/restaurants- List all restaurantsGET /api/restaurants/:id- Get restaurant detailsPOST /api/restaurants- Create restaurant (admin)PATCH /api/restaurants/:id- Update restaurant (admin)DELETE /api/restaurants/:id- Delete restaurant (admin)
GET /api/menu-items- List all menu itemsGET /api/menu-items/:restaurantId- Get menu items for a restaurantPOST /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)
GET /api/orders- List all ordersGET /api/orders/:id- Get order detailsPOST /api/orders- Create new orderPATCH /api/orders/:id- Update order status (admin)
GET /api/delivery-boys- List all delivery boysPOST /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)
npm run devThis starts both the Express backend and Vite frontend on the same port.
shared/schema.ts- Shared TypeScript types and Zod schemasserver/storage.ts- In-memory storage implementationserver/routes.ts- API route definitionsclient/src/App.tsx- Main application routerclient/src/index.css- Design system tokens and utilities
- Mobile-first design approach
- Clean, minimal interface focusing on core functionality
- Fast performance with efficient state management
- Local-focused branding and messaging
- 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
- Implement backend API routes
- Connect frontend to backend with real data
- Add sample data for testing
- End-to-end testing of core user journeys