The FoodHub Frontend is the client-side application of the FoodHub meal
ordering platform.
It provides the user interface where customers, providers, and admins
interact with the system.
The frontend communicates with the backend through REST APIs to fetch meals, manage orders, and handle authentication.
- React / Next.js
- Tailwind CSS or Bootstrap
- Axios (API requests)
- React Router (routing)
- Context API / Redux (state management)
- View homepage with featured meals
- Browse all meals
- Filter meals by category, cuisine, or price
- View provider profiles
- View meal details
- User registration and login
- Add meals to cart
- Checkout with delivery address
- View order history
- Track order status
- Manage profile
- Provider dashboard
- Manage menu items (add, edit, delete)
- View incoming orders
- Update order status
- Admin dashboard
- Manage users
- View all orders
- Manage categories
/-- Home/meals-- Browse meals/meals/:id-- Meal details/providers/:id-- Provider profile/login-- Login/register-- Register
/cart/checkout/orders/orders/:id/profile
/provider/dashboard/provider/menu/provider/orders
/admin/admin/users/admin/orders/admin/categories
src/ components/ pages/ services/ context/ utils/ assets/
- Install dependencies
npm install
- Start development server
npm run dev
or
npm start
- Open browser
Example .env
REACT_APP_API_URL=http://localhost:5000/api
- Display UI and user interactions
- Call backend APIs
- Handle authentication tokens
- Manage application state