-lightgrey?style=for-the-badge){kind=icon}
A grocery price tracking tool that helps users find the best prices in their local stores and detect patterns so they can recognize when a sale is truly a good deal.
Back in August 2020, I found myself comparing grocery prices online to find the best places to get my food as a student on a budget. 😅 I wondered if there were any better solutions to solve my problem and came up with this project idea. I decided to jump on it as it provided a good opportunity to learn about some topics that had been hanging in my head for a while:
- 🕷 Web scrapping
- 🧼 Application development following some variation of the clean architecture
- 🎨 Basics of decent UX design
If you're interested, you can read more about how I approached this project, how I managed its development and what I learned from this whole experience.
This page allows users to search for listings across various grocery stores. Listings can be clicked on to view more details.
When a user clicks on one listing, a drawer opens up on the right with more details about the targeted listing and its price history.
This page lists all of the users' groups. These groups make it easy for the user to compare similar products together and identify which is the best value at the current moment.
The group creation page allows a user to create a group and select his preferred comparison unit. Listings can be added through the listings selection drawer by clicking on the "Add Listings" button.
The listings selection drawer is similar to the listings page. The user can search for specific listings in the search bar and selected listings will appear right over it.
Make sure you already have those programs:
Run the following commands to install the project:
# Clone the project in a directory of your choice
$ git clone git@github.com:vcheeney/pricebook.git
# Move into the project directory
$ cd pricebook
# Create the .env file from the template
# You can edit the values if you wish but defaults will work fine.
$ cp .env.example .env
# Install the project dependencies
$ npm install
# Build the project
$ npm run buildIn one terminal, start the database with the following command and leave the terminal running until you would like to shut the DB down.
# Start the database
$ docker-compose upIn another terminal, run the following command:
# Start the application
$ npm start
# If you prefer to start the development server
$ npm run devAccess the app at http://localhost:3000/
- NextJS 10.0.0 - Production ready React framework
- MongoDB 3.6.3 - NoSQL database system
- Chakra UI 1.0.4 - React components library
- Formik 2.2.6 - React forms library
- Chart.js 2.9.4 - React charts library
- Next-Auth 3.1.0 - Authentication solution for NextJS apps
- React Query 3.5.5 - Data synchronization solution for React apps
- React Icons 4.1.0 - Rich React icons library
- Puppeteer 5.5.0 - Headless chrome API
- Cheerio 1.0.0-rc.3 - HTML parser for the server
- Jest 26.5.23 - Testing framework
Tests have been written for the core of the application. Run them with the following command:
# Run the tests
$ npm run testI archived this project in January 2021. The project used to be hosted on Vercel and MongoDB Atlas, but I shut it down as I lost interest in the problem the product was trying to solve.
Rather than delete the whole thing, I downloaded most of the content the tool had produced until then and saved it as seed data for a local MongoDB database runnable as a Docker container. That way, anyone can clone the project and launch the app locally to get a feel for what this project was all about.
As mentioned earlier, you can read the full story of this project here.