Burger & Cake Website

A modern full-stack food ordering platform developed using React, Django, SQLite, and Google Authentication. The project combines an animated and responsive frontend with a structured backend system for user authentication, order management, analytics tracking, and REST API communication.

---

Project Overview

The Burger & Cake Website is designed to simulate a modern food ordering application with a visually engaging user interface and a scalable backend architecture. The application allows users to browse products, authenticate using Google Sign-In, place orders, and view purchase history and analytics.

---

Features

User Interface

• Modern animated landing page
• Background video hero section
• Responsive navigation bar
• Interactive product cards
• Smooth Framer Motion animations
• Mobile responsive layout

Authentication

• Google OAuth Sign-In
• Persistent login using localStorage
• User-based dashboard access
• Dynamic profile avatar generation

Ordering System

• Add to Cart functionality
• Buy Now functionality
• Product listing interface
• Product image support
• Food category presentation

Analytics & History

• User order history tracking
• Item-wise purchase tracking
• Monthly and yearly analytics
• Purchase count statistics
• Time-based order tracking
• Repeat item analytics

Backend Features

• Django REST API integration
• SQLite database storage
• API-based frontend communication
• CORS support for frontend/backend interaction

---

Technology Stack

Frontend

• React.js
• Framer Motion
• React Router DOM
• Google OAuth
• JavaScript

Backend

• Django
• Django REST Framework
• SQLite
• django-cors-headers

Deployment

• Netlify (Frontend)
• Render (Backend)

---

Project Structure

burger_and_cake/
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── App.js
│   │   └── index.js
│   └── package.json
│
├── backend/
│   ├── config/
│   ├── orders/
│   ├── manage.py
│   ├── db.sqlite3
│   └── requirements.txt
│
└── README.md

---

Frontend Setup

1. Navigate to Frontend Folder

cd frontend

2. Install Dependencies

npm install

3. Start Frontend Server

npm start

Frontend runs on:

http://localhost:3000

---

Backend Setup

1. Navigate to Backend Folder

cd backend

2. Create Virtual Environment

Windows

python -m venv venv

3. Activate Virtual Environment

Windows

venv\Scripts\activate

4. Install Backend Dependencies

pip install django djangorestframework django-cors-headers gunicorn whitenoise

5. Run Database Migrations

python manage.py makemigrations
python manage.py migrate

6. Start Backend Server

python manage.py runserver

Backend runs on:

http://127.0.0.1:8000

---

Google Authentication Setup

1. Open Google Cloud Console

https://console.cloud.google.com/

2. Create a New Project

Create a new Google Cloud project from the dashboard.

---

3. Configure OAuth Credentials

Navigate to:

APIs & Services → Credentials

Create:

OAuth Client ID

Select:

Web Application

---

4. Add Authorized JavaScript Origins

Local Development

http://localhost:3000

Production Deployment

https://your-netlify-site.netlify.app

---

5. Copy Client ID

Example:

123456789-example.apps.googleusercontent.com

---

6. Add Client ID in React

Inside:

frontend/src/index.js

Add:

<GoogleOAuthProvider clientId="YOUR_CLIENT_ID">

---

API Configuration

Replace localhost backend URLs with deployed backend URLs during production deployment.

Example:

const API_URL = "https://your-render-backend.onrender.com";

Example API Call:

fetch(`${API_URL}/api/buy/`)

---

Database Information

The project currently uses SQLite as the database.

Database file:

backend/db.sqlite3

Stored Information:

• User order history
• Purchase timestamps
• Item purchase frequency
• Monthly analytics
• Repeat purchase data
• User email tracking

---

Adding Videos

Place video files inside:

frontend/public/

Example:

frontend/public/burger.mp4

Usage:

<source src="/burger.mp4" type="video/mp4" />

---

Adding Product Images

Place product images inside:

frontend/public/images/

Example:

frontend/public/images/cake1.jpg

Usage:

<img src="/images/cake1.jpg" alt="Cake" />

---

Frontend Deployment (Netlify)

Build Configuration

Base Directory

frontend

Build Command

npm run build

Publish Directory

build

---

Backend Deployment (Render)

Start Command

gunicorn config.wsgi

---

Analytics System

The backend analytics system stores:

• Total orders
• Product purchase count
• Monthly order statistics
• Daily purchase tracking
• User purchase history
• Repeat purchase information

This data can be used for:

• Sales analysis
• Customer behavior analysis
• Popular item identification
• Monthly performance tracking

---

Example Workflow

1. User opens the website
2. User signs in using Google Authentication
3. User browses products
4. User adds products to cart
5. User purchases products
6. Backend stores order information in SQLite
7. Dashboard and History pages display analytics and purchase history

---

Future Improvements

• PostgreSQL integration
• JWT Authentication
• Payment gateway integration
• Admin analytics dashboard
• Real-time order tracking
• AI-based recommendation system
• Wishlist functionality
• Cart persistence

---

Repository Topics

react, django, sqlite, google-auth, food-ordering, framer-motion, rest-api, full-stack, analytics

---

Author

Developed as a full-stack web application project for educational, portfolio, and learning purposes.

---

License

This project is intended for educational and non-commercial use.