Foodzy is a responsive mini food-ordering frontend built as a 6th-semester minor project. It demonstrates clean UI/UX for browsing a restaurant menu and a working Add-to-Cart feature implemented in plain HTML, CSS and JavaScript.
- Type: Frontend (client-side) mini project — no backend integrated yet
- Course: Minor Project (6th Semester, B.Tech)
- Purpose: Provide a responsive menu, let users add items to a cart, preview orders, and visualize basic restaurant pages (Home, Menu, Gallery, Blog, Contact).
- Responsive homepage with hero section and brand/UI animations
- Categorized menu (Breakfast / Lunch / Dinner) with filters
- Dish details (name, price, veg/non-veg indicator, rating)
- Add-to-Cart functionality (client-side) with dynamic total calculation
- Image sliders (Swiper.js), lightbox (Fancybox) and small UI animations (GSAP)
- Clean modern design using CSS + Bootstrap utilities
- Frontend: HTML5, CSS3, JavaScript (ES6)
- Libraries: Bootstrap, Swiper.js, Fancybox, GSAP (animations)
- Icons: Unicons / Font icons
- Note: Backend (billing, order persistence) is planned as a future enhancement.
foodzy/
├─ index.html
├─ style.css
├─ main.js
├─ logo.png
├─ images/
│ ├─ foodzy ss1.png
│ ├─ foodzy ss2.png
│ └─ foodzy ss10.png
├─ README.md
└─ .gitignore
- Open the project folder in VS Code (File → Open Folder → select
foodzy/). - Open
index.htmlin a browser (double-click) OR use VS Code Live Server extension for live reload:- Install "Live Server" extension, right-click
index.html→ "Open with Live Server".
- Install "Live Server" extension, right-click
This is the Homepage of the website, featuring the main banner and hero section.
This shows the About Us section, where the restaurant's story is told.
This is the Menu section, displaying various food categories and dishes.
This screenshot also shows part of the Menu or Gallery, focusing on specific dishes like pizza and sushi.
This shows the Gallery and Table Booking section, highlighting the opening hours and an image gallery.
This is the Chefs Section, introducing the culinary team.
This shows the Testimonials section, where customer reviews are displayed.
This screenshot includes both the Testimonials and the FAQ (Frequently Asked Questions) section.
This displays the Blog and Newsletter Subscription section.
This shows the Newsletter and Footer section of the website.
- Create a new repo on GitHub named
foodzy(Description: A frontend food-ordering website built with HTML, CSS, JS).- Don’t check “Add README” (you already have one).
- In VS Code terminal (inside
foodzy/), run:
git init
git add .
git commit -m "Initial commit - Foodzy (frontend)"
git branch -M main
git remote add origin https://github.com/<keerthana-ki>/foodzy.git
git push -u origin main- Push the repo to GitHub (steps above).
- On GitHub repo → Settings → Pages → Source:
mainbranch / root (/) → Save. - After a minute, your site will be available at:
https://<your-username>.github.io/foodzy/
index.html,style.css,main.js,logo.png(already present)images/folder with screenshots (homepage, cart, menu, etc.)README.md(this file) and.gitignore(see below)- Optional:
/docs/ProjectReport.pdf(a PDF of your PPT or final report).
- Integrate backend (Spring Boot / Node.js) for cart persistence & billing
- Add user authentication and order history (DB: MySQL / MongoDB)
- Payment gateway (Stripe / Razorpay) & invoice generation (PDF)
- Deploy a live demo (GitHub Pages or simple hosting)
- Minor project (6th Semester, B.Tech) — Keerthana A and Harshath KC
- Project guide / faculty: Mrs. Swetha A
MIT License — see LICENSE (optional)