Skip to content
This repository has been archived by the owner on Jun 28, 2024. It is now read-only.

Latest commit

 

History

History
64 lines (48 loc) · 3.38 KB

README.md

File metadata and controls

64 lines (48 loc) · 3.38 KB

Create and store weekly grocery shopping lists. Find real products via search or barcode scan, view nutrition facts, or upload your own.

React Firebase Heroku

Demo GIF

🎥 Demo Video + Project Walk-through

Youtube Video

🎯 Project Overview

A grocery product catalog to assist budgeting and managing a shopping list stored in the cloud.

  • Designed a Firebase Cloud Firestore NoSQL database managing user records, grocery product catalogs, and cart purchase histories
  • Organized state management for products, account information, and carts with Context hooks also persisted in the database.
  • Integrated Firebase Authentication to assist storing user unique shopping lists, along with customized product records.
  • Created a clean and modern user experience with React/MaterialUI following a wireframe and site-wide color theme.
  • Implemented barcode scanning and external records from the Spoonacular + OpenFoodFacts API to onboard new products

📦 Technologies:

🏗️ Architecture

Architecture

🌟 Features:

  • Browse grocery products records served from the Firestore database
  • Save products to your cart, always persisted in the cloud.
  • Analyze the cart to identify empty categories
  • Customized product records and create a personal list
  • Create an account to access your list anywhere
  • Scan a bar code to upload a product pulled from Spoonacular or OpenFoodFacts
  • View a history of transaction receipts previous from shopping lists
  • Save product images with a convient image searching pop-up connected to Google CSE

Demo Screenshot Cart Feature Screenshot Search Feature Screenshot Scan Feature Screenshot Analyzer Feature Screenshot Customize Feature Screenshot Saved Feature Screenshot

Deployment

Architecture

⚙️ Local Development

$ cp .env.sample .env
$ npm install
$ npm run dev