Welcome to GApple, your ultimate destination to order the most delicious food right from your browser. From spicy starters to mouth-watering desserts, we bring the best restaurant experience to your doorstep.
- Frontend: React, Vite, Tailwind CSS, Context API
- Backend: Django REST Framework, Python
- Database: SQLite (Development)
- Authentication: Custom PyOTP (Time-based Email OTP)
- Payments: Stripe Integration
The journey begins with a seamless user registration process. The user fills in their basic details—such as name, email, and password—and clicks on sign up to create a new account. The application uses a clean React form with real-time validation to ensure all fields are correctly formatted before submission to the Django backend.
Security is a top priority. As soon as a user signs up, the system requires 2-step email verification to prevent spam accounts. A unique, time-based OTP (One-Time Password) is generated on the backend and sent to their registered email address. The user opens their inbox, retrieves the OTP, and enters it on the verification screen. Once validated, their account is successfully activated and ready to use.
The core of GApple is its dynamic, interactive menu. Users can effortlessly browse through various food categories (like salads, desserts, etc.) and seamlessly add items to their cart. By clicking the plus and minus icons, they can adjust quantities on the fly with sub-second latency. Clicking the cart button reveals a complete, categorized list of selected items along with the calculated total order amount, powered by the React Context API for global state management.
Once the user is satisfied with their cart, they proceed to provide their delivery information. The intuitive form captures essential details like the recipient's name, pincode, full delivery address, and mobile number. This ensures accurate order fulfillment and provides the restaurant with all necessary logistics data.
Checkout is robust and secure. As soon as the user clicks on "Proceed to Checkout", the secure Stripe payment gateway integration is triggered. The user inputs their card details (using standard Stripe dummy credentials for testing) and completes the payment. Upon success, the order is finalized and placed into the central database.
The application features a completely separate, dedicated administrative React portal. The admin logs in using their secure superuser credentials and is immediately greeted by the order list dashboard. This provides a bird's-eye view of all incoming orders, allowing the restaurant staff to track, prepare, and manage deliveries efficiently.
The admin has full control over the restaurant's offerings through an intuitive CMS interface. Here, the admin demonstrates adding a new "Tiramisu" dessert to the catalog. They fill out the product details, select a category, and upload an image. The frontend handles the image upload via multipart/form-data, passing it securely to the Django REST Framework backend to update the database instantly.
Menu management works both ways, and updates are instantaneous. In this final step, the admin removes the newly created "Tiramisu" from the catalog. Switching back to the user portal and refreshing the page proves that the Tiramisu has instantly disappeared from the public menu, ensuring customers never order out-of-stock items.
Make sure you have the following installed:
git clone https://github.com/VIDIT45AGARWAL/GApple.git
cd GApplecd food-app/backend/foodapp
# Create and activate a virtual environment
python3 -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Set up environment variables
cp .env.example .env
# Edit .env to add your email credentials and Stripe key (optional for basic testing)
# Run migrations and start the server
python manage.py migrate
python manage.py createsuperuser # Create an admin account
python manage.py runserverYour backend API should be running at http://localhost:8000.
Note: By default, the backend uses SQLite and local file storage for development. No PostgreSQL or Cloudinary setup is needed to get started.
Open a new terminal:
cd food-app
# Set up environment variables
cp .env.example .env
# Install dependencies and start the dev server
npm install
npm run devThe user portal should now be running at http://localhost:5173.
Open another new terminal:
cd adminPanel/food-app-admin-panel
# Set up environment variables
cp .env.example .env
# Install dependencies and start the dev server
npm install
npm run devThe admin panel should now be running at http://localhost:5174.