Git Product home page Git Product logo

amalyam / aisle-be-there Goto Github PK

View Code? Open in Web Editor NEW

This project forked from the-collab-lab/tcl-69-smart-shopping-list

0.0 0.0 0.0 2.28 MB

A client-side smart shopping app built with React, JS, HTML/CSS, and Firebase for authentication and storage. Uses an algorithm to sort items by how frequently the user needs them.

Home Page: https://tcl-69-smart-shopping-list.web.app/

JavaScript 76.53% CSS 21.87% HTML 1.60%

aisle-be-there's Introduction

What is Aisle Be There and how was it built?

Aisle Be There is a “smart” shopping list app that learns your buying habits and helps you remember what you’re likely to need to buy on your next shopping trip. The app was built collaboratively using Firebase, React, JavaScript, NodeJS, HTML, and CSS. Firebase was used for authentication and storage. The app was built with an emphasis on accessibility, and we used Agile methodologies to drive our process.

Over the 10 week development process, I:

  • contributed to 14 merged pull requests, enhancing various features and fixing bugs, leading to a reduction in crashes and optimizing accessibility and useability in line with WCAG 2 standards
  • engaged in 50+ hours of pair programming with my teammates
  • performed 11+ code reviews to ensure code quality

Explore the app here: https://tcl-69-smart-shopping-list.web.app/

How does it work?

As a user, you can create new lists and enter items (e.g., “Greek yogurt” or “Paper towels”) into your lists. Each time you buy an item, you mark it as purchased. 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. Scroll down to see screenshots of the app in use!

Features:

  • create and delete lists
  • add and delete items from lists
  • share lists with other users
  • mark items by how soon they will be needed
  • mark items as purchased
  • have items sorted by an algorithm based on how frequently they will be needed

Future enhancements

  • caching users' lists for performance
  • provide a way for users to see who a list is currently shared with by adding a flag to mark lists that have been shared (such as with a chip noting the other user’s name next to the list name) or clicking a button to see all users who the list has been shared to
  • reformatting the items list page for better clarity, such as placing item urgency alongside each item rather than having separated categories
  • add the ability to uncheck an item (modify the function to check off an item to first save the item's date info in Firebase so that the data can be reverted)
  • adding dark/light mode toggle

Screenshots

Sign in page and link to about page

Home page

Example of a user's list page. When a user clicks on one of the lists, they will be redirected to a page showing the items in that list.

List page

Example of a user's list populated with items sorted based on frequency of need.

List items

Dialog box to add new items to a list

Add item

Dialog box to share a list with another user

Share list

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.