Smart Shopping List

Table of Contents

1. Project Overview
2. The Dreram Team
3. Built With
4. Ideation
5. Changelog
6. Future Improvements
7. Deployment

Project Overview

Smart Shopping List is your adaptive shopping companion that'll transform your shopping experience. From the first item added to your latest purchase, it keenly observes your buying habits. And over time, it doesn't just remember what you buy, but anticipates when you'll need to buy it again. As days go by, it provides intuitive status indicators, alerting you of each item's purchase urgency. Gone are the days where you have to keep mental track of all the things you buy! So, whether it's milk that you buy every week, the artisan coffee beans you indulge in monthly, or the 72lb cheese wheel from Costco you buy every couple of years, your Smart Shopping List has your back.

But what's a smart shopping experience if it's not shared? With a unique 3-word token, you can effortlessly share your list, allowing friends or family to collaborate. Now, you can ensure no item is forgotten, even when you're not the one heading to the store.

With the Smart Shopping List, you're not just shopping - you're shopping smart. 😎

The Dream Team

Cohort

• Amy Preci 🦄
• Jon Granados 🤖
• Emily Sellers 🌿
• Beth Melesse 💖

Mentors

• DJ Taylor 💥
• Dana Pughakoff 🌎
• EJ Mason 🐧

Code of Conduct

• Stacie Taylor 🌈

Built With

(jump to top)

Ideation

• 1. As a user, I want to read the names of all of the items in my shopping list
• 2. As a user, I want to be able to navigate to all the pages in the application by clicking the links in the nav bar
• 3. As a user, I want to set up a new shopping list so I can start tracking purchased items
• 4. As a user, I want to add a new item to my shopping list so I can start recording purchases
• 5. As a user, I want to join an existing shopping list so I can share a shopping list with another person
• 6. As a user, I want to filter my shopping list to make it easier to locate an item in the list
• 7. As a user, I want to see a welcoming prompt to add my first item if my list is empty to help me get oriented to how the app works.
• 8. As a user, I want to mark an item on my shopping list as purchased so the app can learn how often I buy different items.
• 9. As a user, I want to be alerted when I’m entering an empty item or an item that's already on my list.
• 10. As an item, I want my estimated next purchase date to be computed at the time my purchase is recorded in the database so the app can learn how often I buy different items.
• 11. Delete items from my shopping list so that my list isn’t cluttered with items I don’t want to buy in the future.
• 12. As a user, I want to view a list of my shopping list items in order of how soon I am likely to need to buy each of them again so that it’s clear what I need to buy soon.
• 13. As a user, I want the app to look professional and welcoming.
• 14. As a user, I want "/list" to redirect to the home page if there is no token.
• 15. As a user, I want the /list page to look professional and welcoming while remaining simple to use and understand.
• 16. As a user, I want the AddItem page to look professional, welcoming and accessible.
• 17. As a user, I want to experience a consistent theme throughout the application.
• 18. Add menu icon and drop menu or drawer for mobile version of App Bar
• 19. Style 'Empty List' message on List view.
• 20. Continue Styling Layout of Home Page.
• 21. Fix height of container in List page.
• 23. Fix dark-mode text disappearing across app.
• 24. As a user, I want the application to provide helpful feedback when my search request doesn't match anything on my list.
• 25. Prevent app from rendering before data has been fetched from backend.
• 26. Prevent access to AddItem page without list token.
• 28. Dynamically pass in the list token to make sure items are added to the right list.
• 29. Detach repository from team repository for flexibility.
• 30. Configure with personal Firestore database.
• 31. Deploy to Render.

(jump to top)

Changelog

• Update Layout.js links with NavLinks which navigate to appropriate pages
• Render list items on List component
• Allow users to add a new item to their shopping list.
• Removed mock token and replaced with null.
• Filter list feature.
• Passed listToken to AddItem component.
• Allow user to join an existing shopping list
• Render a user prompt and add item button when a shopping list is empty.
• Mark items as purchased.
• Redirect "/list" to "/" when there is no token.
• Predict dateNextPurchased based on algorithm.
• Empty Submission or Duplicate Item Alerts.
• Sort and display items in order of how soon they need to be purchased
• Delete Shopping List Items.
• Import Material UI component library.
• Style the list page so that it looks polished, is easy to use, is easy to comprehend, and is accessible.
• Style AddItem page.
• Style the basic page layout that applies to all views of the app using components from MUI Library.
• Adding Styling to Home Page.
• Implement global styling.
• Fix height of container in List page.
• Prevent app from rendering before data has been fetched from backend.
• Conditionally render "List" and "Add Item" NavLinks on List and AddItem views and remove NavLinks from Home view.
• Style "empty list" page on List view
• Handle empty search queries in a helpful manner.
• Revert "Prevent app from rendering before data has been fetched."
• Continue styling home page.
• Icon Menu Positioned on App Bar for Mobile/Small-Screen View.
• Ongoing styling.
• Change ListItem disablePadding value from string to Boolean.
• Remove logo background.
• Configure with personal Firebase.

(jump to top)

Future Improvements

• Add support for user-level color theme preferences.
• Normalize pop-ups/modals/dialogs/messages for consistency throughout application.
• Improve user experience during latency while data is being fetched from backend.
• Turn the functionality from /add-item into a simple modal within /list.
• Implement a way for a user to copy their list's associated token.
• Implement a way to edit items in a user's list.
• Implement a way to delete lists.
• Add support for multiple lists.

(jump to top)

Deployment

Remote Deployment

To view the live version of Smart Shopping List, click here. Follow the on-screen instructions to register or log in.

Local Deployment

Follow these steps to run Smart Shopping List on your local machine for development and testing.

1. Install Node and NPM

   💡 Note: This project requires the latest Long Term Support (LTS) version of Node. If you have an earlier version of Node, now would be a great time to upgrade!

2. Clone the project locally

3. cd into your project's directory and run npm install to install dependencies

4. Copy your Firebase Firestore configuration details into /src/api/config.js

5. Run npm start to start the application

6. Access the project in your browser at http://localhost:3000

(jump to top)