tialaaa / listify-smart-shopping-list

Listify

Abstract

A full-stack "smart" shopping list web app that learns users’ shopping habits to assist with list management. Using a customized algorithm, it automatically organizes items and predicts future purchase dates based on your past buying trends. We used a Firebase database to generate and store data, which is then saved to a user's local storage. A focus on accessibility and delivering an intuitive user experience guided the UI decisions.

As a user, you will enter items (e.g., “Greek yogurt” or “Paper towels”) into your list. Each time you buy the item, you mark it as purchased in the list. Over time, the app comes to understand the intervals at which you buy different items. If an item is likely to be due to be bought soon, it rises to the top of the shopping list. Using individualized list tokens, you can manage separate lists and share them with collaborators.

Deployed Page

Listify

Preview

Home page

List Management page

---

Context

Completed by an asynchronous team of 4 developers working part-time over 8 weeks, under the guidance of 3 working professionals. Project specifications and user stories were provided to guide feature requirements, with the final decisions left to the Dev team.

Credit goes to non-profit org The Collab Lab for coordinating this project!

Technologies Used

• React
• React Router
• Firebase database and hosting
• TailwindCSS
• Figma
• Git, GitHub, Github Projects

Learning Goals

• Work within an asynchronous developer team to deliver a fully functioning application based on provided project specifications.
• Learn and utilize TailwindCSS.
• Utilize and keep in sync local storage and permanent database storage.
• Implement a user interface that is easy to use, responsive, and follows best practices for accessibility.

Installation Instructions

• Using the terminal, clone the Listify Repo to your local machine.
• cd into new listify-smart-shopping-list directory.
• Run npm i to install all dependencies.
• To launch the project locally, run npm start. You should be able to see the project at localhost:3000.