As part of our school project, we created a full-stack coffee delivery app for an existing business. The goal was to build a website where customers can order food online, track their orders, and pay seamlessly. We used a React JS frontend, MongoDB for database management, Express and Node JS for the backend, and Stripe for handling payments. Let’s walk through the main features of the app.
Project Overview:
The app is divided into four main subsystems:
- Order Management
- Inventory Management
- Sales Management
- User Management
We developed the Frontend (React JS), Admin Panel, and Backend server using Node JS, then deployed the entire application using Render.
Subsystem 1: Order Management
This subsystem allows customers to browse the menu, place orders, and track them in real-time.
Key Features:
Manage Products (Admin Panel): Admin can add new products and update the availability of items (e.g., a new smoothie or coffee). These changes reflect on the customer-facing menu instantly.
Order Placement: Customers can add products to their cart, choose between delivery or pick-up, and proceed to checkout. They can log in before completing the order.
- Payment Integration (via Stripe and GCash): Customers can pay via credit card through the Stripe API or using GCash by scanning a QR code. After payment, the order is processed.
Order Tracking: Customers can track their order status (e.g., "Brewing your coffee" or "Out for delivery"). They can cancel an order if it’s still in the early stages.
Order Status Update (Admin/Employee Panel):
Admins and employees can update the order status—marking it as "brewing," "out for delivery," or "ready for pick-up."
Subsystem 2: Inventory Management
This subsystem tracks stock levels and manages ingredient supplies to ensure smooth operations.
Key Features:
- Manage Ingredients: Admins can add, edit, or delete ingredients and supplies used in products.
- Stock Management: Track stock in and out, and get alerts when the stock is low. This ensures that the kitchen never runs out of key ingredients.
Subsystem 3: Sales Management
This subsystem helps monitor sales and track revenue.
Key Features:
-
Sales Reports:
Admins can generate sales reports, choose a date range, and export the data to a PDF for financial analysis.
---
Subsystem 4: User Management
This subsystem handles customer registration, login, and employee role management.
Key Features:
Customer Accounts:
Customers can create an account, log in, and view their order history. They can also reset their password if they forget it.Employee Accounts:
Admins can create employee accounts with role-based access (e.g., rider, cashier, manager) to ensure the right people can access the necessary system features.
Technology Stack:
- Frontend: React JS for a dynamic and responsive user interface.
- Backend: Node.js and Express to handle server-side logic and API requests.
- Database: MongoDB for storing user data, orders, and inventory.
- Payment Gateway: Stripe API for processing credit card payments and GCash integration for mobile wallet payments.
- Deployment: Render for hosting the entire app.
Challenges & Learning Points:
- State Management in React: Using React Context and useState to manage the state across different components was essential, especially for handling cart details and order statuses.
- Real-Time Updates: Integrating WebSocket or Socket.io to provide real-time updates for order tracking was crucial.
- Payment Integration: The process of integrating Stripe and GCash required careful attention to security and handling payment flows correctly.
Conclusion:
This project helped us understand how to integrate different technologies into a full-stack application. It was an amazing learning experience, as we worked with everything from the frontend to the backend and managed the deployment process. Building a food delivery app also gave us insights into practical business workflows, such as order management, inventory tracking, and sales reporting.
If you're interested in building a similar project or just want to learn more about full-stack development, feel free to ask any questions in the comments!
Top comments (0)