FoodJET is an online food delivery application that allows users to order meals from a curated, categorized menu with secure payments through Stripe. Built with React (frontend), Node.js and Express (backend), and a MongoDB database, this app offers both user-friendly ordering and an admin dashboard for efficient management.
- User Onboarding: Registration and login functionality.
- Category-Based Menu:
- Organized food items by category, with filter and search options.
- Food Ordering:
- Add items from multiple categories to a cart and place orders in one transaction.
- Secure Payment:
- Stripe integration supports secure payments with credit cards, Apple Pay, Google Pay, and more.
- Order History:
- Review past meals conveniently.
Admin Dashboard
- Menu & Order Management:
- CRUD functionality for managing food items and categories.
- Order tracking and status updates.
- full CRUD User account management.
- Order Tracking: Real-time status updates for ongoing orders.
- User Authentication: Implement JWT for secure registration and login.
- Menu & Categories: Develop browsing and filtering for food categories.
- Ordering Process: Enable multi-category selection, cart, and checkout.
- Stripe Payment Integration:
- Secure, multi-method payment options for payment.
- Admin Dashboard: Simple management for menu, and orders, users.
- Frontend: React.js
- Backend: Node.js, Express.js
- Database: MongoDB
- Payment Gateway: Stripe
- Authentication: JWT
- Deployment: Render
- API Testing: Tested using Thunder Client.
- Responsiveness: Optimized for mobile, tablet, and desktop screens.
- Security: Implements CORS and HTTP for secure communication.
- User Research: Conduct interviews to understand food-ordering preferences.
- Personas & User Stories: Create personas and stories to drive feature design.
- Prototyping: Low-fidelity designs and app flow prototypes in Figma.
- Languages: JavaScript across backend and frontend.
- Styling: Consistent style guide across CSS and JS.
PWA
Configured a PWA using vite-plugin-pwa to enable offline access and faster loading.
First, I installed the plugin with npm install vite-plugin-pwa, then set up the PWA configuration in vite.config.js. Finally, I defined the app metadata in manifest.json.
- Design: Figma for UI/UX.
- Feedback: Google Forms for user surveys and feedback collection.