Shoppingify Website

ViewDemo

📔 Table of Contents

• 📔 Table of Contents
  • 🌟 About the Project
    • 📷 Screenshots
    • 👾 Tech Stack
    • 🎯 Features
    • 🔑 Environment Variables
  • 🧰 Getting Started
    • ‼️ Prerequisites
    • ⚙️ Installation
    • 🏃 Run Locally
  • 👀 Usage
  • 🤝 Contact

🌟 About the Project

📷 Screenshots

• Home page

• Add new Item

• Check List Cart

• View Item

• History page

• History detail

• Statistics page

👾 Tech Stack

Client

Server

Database

Deploy

🎯 Features

• Page transition animation

• See a list of items under different categories.

• Add a new item with name, category, note, and image.

• When user add a new item, user can select one from the existing categories

• When user select an item, user can see its details and user can choose to add the current list or delete the item.

• Add items to the current list

• Increase the number of item in the list

• Remove the item from the list

• User can save/update the list with a name (user can have only one active list at a time)

• User can toggle between editing state and completing state

• When user am at completing state, user can save my progress by selecting the item

• See user's shopping history and user can see the details of it

• See some statistics: top items, top categories, and monthly comparison.

• Search for items

🔑 Environment Variables

To run this project, you will need to add the following environment variables to your .env file

URI

``

🧰 Getting Started

‼️ Prerequisites

This project uses Npm as package manager

 npm install npm@latest -g

⚙️ Installation

🏃 Run Locally

Clone backend

  git clone https://github.com/Alifend/shoppinglist-backend.git

Go to the project directory

  cd shoppinglist-backend

Install dependencies

  npm install

Start backend

  npm run dev

Clone frontend

  git clone https://github.com/Alifend/shoppinglist-frontend.git

Go to the project directory

  cd shoppinglist-frontend

Install dependencies

  npm install

Start frontend

  npm run start

👀 Usage

This project can be used for any real stores to interact with user. In other words, this project is able to show current items,allow user to add, remove item, show history detail and the statistic sale of the store.

🤝 Contact

Andrés Felipe Celis - [email protected]

Frontend Link: https://github.com/Alifend/shoppinglist-frontend

Backend Link : https://github.com/Alifend/shoppinglist-backend