https://github.com/ozzs/cart-mark

A new and easy way to shop.
https://github.com/ozzs/cart-mark

groceries reactjs shopping-list supermarket

Last synced: 6 days ago
JSON representation

A new and easy way to shop.

• Host: GitHub
• URL: https://github.com/ozzs/cart-mark
• Owner: ozzs
• Created: 2022-02-24T20:28:25.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-17T16:52:12.000Z (almost 2 years ago)
• Last Synced: 2023-03-10T04:33:13.892Z (over 1 year ago)
• Topics: groceries, reactjs, shopping-list, supermarket
• Language: JavaScript
• Homepage:
• Size: 55 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  





  :star: Visit the live app! :star:








  

  

  

  

  

  

  



## Table of Content

- [Overview](#overview)

- [Key Features](#key-features)

- [Tech](#tech)

- [Usage](#usage)

  - [Creating a Personal Catalog](#creating-a-personal-catalog)

  - [Building a Shopping List](#building-a-shopping-list)

  - [Editing and Removing Items](#editing-and-removing-items)

  - [Go Shopping!](#go-shopping)

  - [View previous shopping lists](#view-previous-shopping-lists)

- [Support](#support)

## Overview

**So what is this and who is it for?** 🤷‍♀️

Have you ever felt tired of making a hasty shopping list? Scribble a few groceries on a note and then lose the note? Or maybe get a shopping list from your wife, but you don't understand what's in it or what you're supposed to bring? Wait, did she want almond milk or soy milk?

**Cart Mark** is designed to make everyone's shopping experience (from making the list to taking the latest product off the shelf) more convenient.

With **Cart Mark**, you can create such a shopping list, which will spare you from dealing with the majority of the problems mentioned earlier. The way the application is set up allows it to be used on both computers and mobile devices.

You can create a shopping list from a product catalog that you create, which you can then edit and annotate. Once the list is created, you can mark precisely what has been taken from the shelf and what has not. At the end of your purchase, the list will be saved so you can revisit it later.

And most importantly, you will no longer be confused with almond milk and soy milk!

## Key Features

* Simple & Easy to use

* An abstract and independent shopping experience

* Make your own grocery catalog

* View previous lists

* Open-Source code

* Mobile friendly

## Tech

### Frontend

* **React** ⚛

  - _JavaScript, HTML, CSS_

  - Code formatted with _Prettier_ :ribbon:

### Backend

* **Node.js** 🕸

  - _Express.js_

* **Database** :page_facing_up:

  - _SQLite_

  

**Uploaded to DigitalOcean using Docker** 🐳

## Usage

Here, I'll go over exactly how to use **Cart Mark**, which is made to be simple to use as you'll see right away!

### Creating a Personal Catalog

Clicking the `Add Item` button on the tab navigator will bring up the following page:



  



Enter the product's name, department (so that **Cart Mark** can conveniently arrange the purchase for you), and packaging type to add it to the catalog.

### Building a Shopping List

Clicking the `Create List` button on the tab navigator will bring up the following page:



  



Select your items from the catalog you created in the preceding step, enter the amount, and if desired, add a note. 


Your items will be added to the list when you click the `Add Product` button (which will appear at the bottom of the page).

### Editing and Removing Items

After you have added all the items to your list on the `Create List` page, you have the option to edit or remove them:



  



Click `Close List` when you're finished. Now head to the store!

### Go Shopping!

Clicking the `Go Shopping!` button on the tab navigator will bring up the following page:



  



As you can see, for a more convenient shopping experience, the products are separated into the departments to which they are related.

A product taken off the shelf will be marked with a strikethrough with just one click on it.

If you regretted it or made a mistake, you can remove the strikethrough line by double-clicking on the product.

### View previous shopping lists

Clicking the `Show Lists` button on the tab navigator will bring up the following page:



  



All of the previous lists that you have closed will be displayed.

## Support

The product is still in its initial stages, so we would really appreciate feedback and donations 😄

And don't forget to star us — it motivates us a lot! ⭐