FreshMart: Fresh Groceries, Smart Shopping — An Interactive Online Grocery Store 🥬

FreshMart — Fresh Groceries, Smart Shopping 🥬

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

I built FreshMart, a modern and responsive online grocery store website designed to make everyday grocery shopping simple, convenient, and enjoyable.

The website allows users to explore grocery products, search for items, filter products by category, add groceries to a shopping cart, adjust quantities, and calculate their order total. It also includes a checkout demonstration, delivery fee calculations, and a newsletter subscription interface.

I built FreshMart using HTML, CSS, and vanilla JavaScript, focusing on an attractive interface and interactive shopping features without relying on heavy frameworks.

For the Hacktoberfest Week 4 theme, Ghost in the Machine, I explored how the logic running behind a website can create an experience that feels responsive and intelligent. Every search, category filter, cart update, and price calculation happens through JavaScript working behind the scenes.

Although FreshMart does not currently use an AI model, it demonstrates how web technologies can create a useful, interactive experience. The project also provides a foundation for future AI-powered grocery recommendations, intelligent shopping assistants, and personalized shopping experiences.

Demo

Live Demo: https://shivamsingh3311.github.io/GroceryStore/

You can run the website locally by downloading the project files and opening index.html in a browser.

Code

GitHub Repository: https://shivamsingh3311.github.io/GroceryStore/

The project contains four main files:

• index.html — Website structure and user interface.
• style.css — Styling, responsive layouts, animations, and shopping cart design.
• script.js — Product search, category filters, cart management, delivery calculations, and demo checkout.
• README.md — Project documentation, setup instructions, features, and future improvements.

How I Built It

I built FreshMart using three core web technologies:

• HTML5: Created the website structure, product sections, search bar, cart drawer, and checkout form.
• CSS3: Designed a clean grocery-shopping interface with green colors, responsive product cards, hover effects, and mobile-friendly layouts.
• JavaScript: Implemented product rendering, search functionality, category filtering, shopping cart operations, quantity controls, subtotal calculations, delivery charges, and the demo checkout flow.

I kept the project lightweight and beginner-friendly, without requiring frameworks