🛒 Fresh Grocery Store

A modern grocery e-commerce website built with React, TypeScript, Vite, and Tailwind CSS.

✨ Features

Customer Features

• Browse products by category
• Search products by name
• Product details page
• Shopping cart management
• Address management
• Checkout flow
• Order history
• Responsive design for mobile, tablet, and desktop

UI Features

• Modern grocery-themed design
• Product filtering
• Flash Deals section
• Featured products
• Category navigation
• Loading states
• Smooth animations

🛠️ Tech Stack

Frontend

• React
• TypeScript
• Vite
• React Router
• Tailwind CSS
• Lucide React Icons

State Management

• React Context APIs
• React Hooks

📁 Project Structure

📁 Project Structure

project-root/
│
├── client/                 # Frontend React Application
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── context/
│   │   ├── pages/
│   │   ├── types/
│   │   ├── hooks/
│   │   ├── utils/
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── package.json
│   └── vite.config.ts
│
├── server/                 # Backend API
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── uploads/
│   ├── server.js
│   └── package.json
│
├── README.md
└── .gitignore

🚀 Installation

Clone the repository:

git clone <your-repository-url>

Navigate to the project:

cd fresh-grocery

Install dependencies:

npm install

Start development server:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

📸 Screenshots

Home Page

• Hero Banner
• Categories
• Flash Deals
• Featured Products

Product Page

• Product Information
• Add To Cart
• Related Products

Cart

• Quantity Management
• Price Calculation
• Checkout Navigation

Address Management

• Add Address
• Edit Address
• Default Address Selection

🎯 Learning Objectives

This project demonstrates:

• React Fundamentals
• TypeScript Integration
• Component Architecture
• Context API
• React Router
• State Management
• Responsive Design
• E-commerce UI Development

🌟 Future Improvements

• Backend API Integration
• User Authentication
• Payment Gateway
• Product Reviews
• Wishlist
• Order Tracking
• Admin Dashboard
• Real-time Notifications

📄 License

This project is for learning and educational purposes.

👨‍💻 Author

Created by Kha Don

GitHub: https://github.com/your-username