EasyOrder is a responsive grocery ordering web application built using React and Bootstrap.
The platform allows customers to browse grocery products, filter by category, add items to a shopping cart, and submit an order via WhatsApp integration.
The application demonstrates modern frontend development concepts, including component-based architecture, state management with React Hooks, dynamic UI updates, and user interaction flows commonly used in e-commerce platforms.
Add your deployed link here after deployment.
https://easy-order-one.vercel.app
EasyOrder was designed as a lightweight grocery ordering interface that simplifies the ordering process for customers.
Users can:
- Browse products
- Search items dynamically
- Add or remove products from the cart
- View live price calculations
- Submit orders directly through WhatsApp
This project showcases practical frontend development skills including:
- React component architecture
- State management using React Hooks
- Dynamic rendering of product datasets
- Shopping cart logic
- Responsive UI development
- Modal image previews
- External messaging integration
User
│
▼
React Frontend (EasyOrder)
│
├── Header
├── Navigation Bar
├── Product Catalog
├── Shopping Cart
├── Checkout Form
│
├── Product Dataset (data.js)
├── Category Dataset (cat.js)
│
▼
WhatsApp Order API
│
▼
Customer Order Sent via WhatsApp
Products are dynamically rendered using a structured dataset stored in data.js.
Each product contains:
- Product image
- English name
- Tamil name
- Price
- Unique ID
This makes it easy to expand the product catalog by updating a single data file.
Products are grouped into categories such as:
- Promotions
- Rice
- Dal
- Salt
A category navigation bar allows users to quickly jump to different product sections.
Users can filter products dynamically by typing in the search field.
The filtering system updates the product list in real time using JavaScript logic in React state.
Customers can:
- Add products to cart
- Increase quantity
- Decrease quantity
- Remove items automatically when quantity reaches zero
Cart updates are handled using React state management.
The application automatically calculates:
- Product subtotal
- Delivery or service charge
- Final payable amount
All calculations update instantly when items are added or removed.
Instead of a traditional checkout system, EasyOrder generates a formatted order summary and redirects the user to WhatsApp.
The order message contains:
- Unique order ID
- Product list with quantities
- Total price
- Customer information
- Additional customer notes
This workflow is useful for small businesses that manage orders through messaging platforms.
Users can click product images to view a larger preview using a modal window.
This enhances the product browsing experience.
The interface uses Bootstrap and React Bootstrap components to ensure the layout adapts to both desktop and mobile screens.
- React
- JavaScript
- React Bootstrap
- Bootstrap CSS
- React Hooks (
useState,useEffect) - React Modal
- React Icons
- Local product dataset (
data.js) - Category dataset (
cat.js)
- WhatsApp message API link
- Vercel
- Netlify
- GitHub Pages
EasyOrder/
│
├── public/
│
├── src/
│ ├── components/
│ │
│ ├── Basket.js
│ ├── cat.js
│ ├── data.js
│ ├── Footer.js
│ ├── Header.js
│ ├── Main.js
│ ├── NavigationBar.js
│ └── Product.js
│
├── App.js
├── index.js
├── App.css
│
├── package.json
└── README.md
The main application controller responsible for:
- managing cart state
- handling add/remove actions
- filtering products
- calculating pricing
- generating WhatsApp order messages
Displays the main application header and branding.
Provides category navigation and filtering functionality.
Renders grouped product sections and dynamically displays products.
Displays individual product cards with:
- image
- product name
- price
- add-to-cart button
- modal image preview
Handles:
- cart display
- quantity adjustments
- customer information form
- order submission
Displays a summary of the cart when items exist.
Contains the structured dataset used to generate the product catalog.
Defines product categories used for navigation.
Users view the product catalog on the homepage.
Products can be filtered using category navigation or the search bar.
Selected items are added to the cart and quantities are updated dynamically.
The cart automatically calculates the total cost.
Users provide:
- Name
- Phone number
- Address
- Postal code
- Optional notes
The system generates a formatted WhatsApp message and redirects the user to WhatsApp to send the order.
Example order message generated by the system:
New order (# AB123)
2x Ooty Ponni Rice
1x Rusi Toor Dal
1x TATA Salt
Payable: S$ 13.20
Customer details:
John Doe
91234567
Singapore
123456
Note:
Leave at door
This project demonstrates practical frontend development concepts such as:
- reusable React components
- managing UI state
- implementing shopping cart logic
- dynamic product rendering
- UI responsiveness
- real-world ordering workflows
During development several technical challenges were addressed:
- resolving outdated dependency issues
- fixing React DOM attribute errors
- replacing unavailable package libraries
- restoring broken cart logic
- handling missing product images
- simplifying notification systems
These improvements helped stabilize the application.
Possible enhancements include:
- adding a backend API and database
- implementing authentication
- integrating online payment gateways
- improving product search
- adding order history tracking
- migrating to a modern React build system
- adding admin dashboard for product management
Clone the repository:
git clone https://github.com/your-username/EasyOrder.git
cd EasyOrder
Install dependencies:
npm install
Start development server:
npm start
Open browser:
http://localhost:3000
This project can be deployed using:
- Vercel
- Netlify
- GitHub Pages
For portfolio presentation, Vercel is recommended because it provides simple CI/CD deployment directly from GitHub.
EasyOrder demonstrates how a simple frontend application can solve a real-world ordering workflow without requiring complex backend infrastructure.
The project highlights practical software engineering skills, including:
- user-centered interface design
- component-based architecture
- scalable UI structure
- real-time state updates
- messaging-based order workflows
These skills are highly relevant for frontend and full-stack development roles.
Mohamed Fadhih
GitHub: https://github.com/mdfadhih
LinkedIn: https://www.linkedin.com/in/fadhih/
Portfolio: https://my-portfolio-seven-tawny-79.vercel.app/
This project is intended for educational and portfolio purposes.