Inspiration
The inspiration for this project came from the growing popularity of online grocery delivery apps like Zepto, BigBasket, JioMart, and Instamart.
Many times, the same grocery product is available at different prices across platforms, and users often struggle to find the best deal quickly.
So, I decided to build GroceryCompare, a grocery price finder app that helps users compare product prices across multiple apps in one place.
What it does
A grocery price finder app that helps users compare product prices across multiple apps in one place.
How we built it
The application allows users to search for grocery products like milk, bread, rice, sugar, etc., and instantly view price comparisons from different platforms. Key features include:
- Product search with popular suggestions
- Best price highlighting
- Seller-wise comparison cards
- Local product image system for correct grocery images
- Responsive and modern UI design
## Challenges we ran into One major challenge was ensuring the correct product images matched user searches.
Initially, images were inconsistent, so I implemented a fixed local image mapping system to ensure accurate visuals for every grocery category. Another challenge was setting up the project locally in VS Code using Vite and resolving CSS/Tailwind build issues. ## Accomplishments that we're proud of This project helped me understand how real-world web applications are designed, structured, and optimized for better user experience.
In the future, I plan to enhance it by integrating live APIs from grocery platforms and adding more product categories. ## What we learned Through this project, I gained hands-on experience in: - Building modern responsive user interfaces using React and Tailwind CSS
- Creating reusable UI components with shadcn/ui
- Managing application state and dynamic search functionality
- Handling product image mapping for accurate grocery visuals
- Structuring a real-world frontend project with clean folders and utilities
## What's next for Grocery Compare Grocery Compare is a strong foundation for helping users find the best grocery prices across multiple platforms.
In the future, I plan to improve and expand the project with more advanced features
Built With
- local-image
- lucide
- node.js
- npm
- react.js
- shadc
- typescript
- vscode
Log in or sign up for Devpost to join the conversation.