A modern food ordering web application built with React, Webpack, and SCSS, focused on scalability and ease of feature development.
This repository contains the frontend of the application. The backend, including APIs and dashboards for Super Admins, Restaurant Managers, and Delivery Riders, is developed using Laravel. You can explore the backend project here: Foodie API & Backend Dashboard.
Here’s a sneak peek of the app:
Click the images below to view the full version:
Click the images below to view the full version:
| Home Page | Restaurant Details | Checkout Page | Orders Page |
|---|---|---|---|
 |
 |
 |
 |
| Home Page | Restaurant Details | Checkout Page | Orders Page |
🔗 Foodie Live Demo: https://foodie.wpmake.net/
- ⚡ Built with React + Webpack
- 🎨 Styled with SCSS
- 🗂 Organized with feature-based architecture
- 🌍 Environment-based configs (
.env.development,.env.production) - 🔧 Configurable with Babel + PostCSS
- 📦 Modular structure for easy scaling
src/
├── app/ # App-level setup ( routing )
├── context/ # Global state (e.g. Cart, Auth)
├── features/ # Domain-driven feature modules (e.g., cart, auth, menu)
├── pages/ # Page-level components
├── shared/ # Reusable utilities, helpers, constants
├── widgets/ # UI building blocks
├── index.scss # Global styles
└── index.js # Entry point
-
Clone the repo
git clone https://github.com/iamprazol/react-food-ordering-website.git cd react-food-ordering-website -
Install dependencies
npm install
-
Run the development server
npm run start
-
Build for production
npm run build
Create a .env file in the project root. Example:
REACT_APP_API_URL=https://api.example.com
REACT_APP_URL=http://localhost:8000/
REACT_FRONT_URL=http://localhost:3000/
REACT_APP_STRIPE_PUBLISHABLE_KEY=your-payment-key
(To be added in future builds)
Contributions are welcome! Please read CONTRIBUTING.md for guidelines.
See CHANGELOG.md for version history.
This project is licensed under the MIT License.