/quickcart

A grocery product catalog for budgeting a shopping list stored in the cloud. Built with React.js, Node.js, Material UI, and Firebase.

Primary LanguageJavaScript

QuickCart ยท Build Status Coverage Status

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

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

โš™๏ธ Local Development

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

๐ŸŒ Links