Grocy is a modern and responsive grocery website built using React, Tailwind CSS, and React Router DOM.
It provides users with a clean interface to explore products, browse categories, and experience smooth navigation across pages.
The project focuses on simplicity, performance, and modern UI design principles.
✅ Responsive Design – Works seamlessly across desktops, tablets, and mobile devices.
✅ Modern UI/UX – Built with Tailwind CSS for a clean, modern, and consistent design.
✅ Component-Based Structure – Fully modular React components for easy maintenance and scalability.
✅ Page Routing – Implemented with React Router DOM for smooth page transitions.
✅ Category Tabs – Browse products by categories (Fruits, Vegetables, Dairy, etc.).
✅ Reusable Components – Custom reusable UI components (Buttons, Headings, Cards, etc.).
✅ Interactive Banners – Dynamic and styled banners for each section.
| Technology | Purpose |
|---|---|
| React.js | Core frontend framework |
| Tailwind CSS | Styling and responsive design |
| React Router DOM | Page navigation and routing |
| Vite | Fast development and build tool |
grocy/
├── src/
│ ├── assets/ # Images and static files
│ ├── components/ # Reusable UI components
│ ├── pages/ # Main pages (Home, Products, Contact, etc.)
│ ├── App.jsx # Main app component
│ ├── main.jsx # Entry point
│ └── index.css # Tailwind CSS imports
├── public/ # Public assets
├── package.json
└── README.md
-
Clone the repository
git clone https://github.com/your-username/grocy.git
-
Navigate to the project directory
cd grocy -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open in your browser
https://thegrocy.vercel.app/
Add your UI screenshots here (like Home page, Product page, etc.)
Example:
<img width="1911" height="908" alt="ui-screenshot" src="https://github.com/user-attachments/assets/df9570e1-cdeb-4338-a085-de3ffaf1e8fe" />
- 🛍️ Add product search and filtering
- 🧾 Add cart and checkout functionality
- 🔐 Add login/signup authentication
- 🌐 Connect with a backend (Node.js + MongoDB)
- 🌙 Add dark mode
Aditya Tripathi
💼 Frontend Developer | React Enthusiast
🌐 https://github.com/aditya-tripathee
This project is licensed under the MIT License — you’re free to use, modify, and distribute it.
✨ Grocy — A modern grocery website built with love using React and Tailwind CSS.