Smart-Grocery-Website

Smart-Grocery-Website is a simple web application where users can browse grocery products, see categories, prices, and add items to a cart.
This project helped me learn web development fundamentals such as HTML/CSS/JavaScript, UI layout, product listing, filters, and basic cart functionality.

Features

• Browse grocery products by category
• View product details (name, price, image, description)
• Filter products by category or price
• Add items to cart and view cart summary
• Responsive UI (works on mobile and desktop)

How to Run the Project

1. Clone the repository

   git clone https://github.com/Sekhard26/Smart-Grocery-Website.git
   

2. Navigate into project folder

• cd Smart-Grocery-Website

3. Install dependencies (if any; for example if you used a bundler or modules)

• npm install

4. Start the development server / open the project

npm run dev # OR open index.html in your browser

5. Open index.html in your browser, or go to http://localhost:XXXX (if using a dev server)

File-Structure

Smart-Grocery-Website/
|-- backend/
│   │-- assets/
│   │-- components/
│   │-- context/
│   │-- modals/
│   │-- pages/
│   │-- App.js
│   │-- index.css
│   │-- main.js
│
|-- client/
│   |-- src/
│      │-- components/
│      │-- pages/
│      │-- assets/
│      │-- index.html
│      │-- style.css
│-- package.json
│-- README.md