/inventory-app

Primary LanguageJavaScript

🛒   Shopping App 🛒

Containerized and automated MERN Stack App.

Built with MERN stack (MongoDB, Express, React and Node).

Containerized with Docker, automated Build/Deployed through Jenkins. It can be run even locally using npm OR using Docker.

Shopping App, it started for The Odin Project practice Started from here curriculum

The Code can be found here

The Code can be found (Original Author) here

⚡️⚡️⚡️   Live Demo ⚡️⚡️⚡️

📜   Table of contents

🚩   Main Features

This App was made to track the order state since the customer place it once it's shipped the seller mark it as shipped, and then the shipper mark it as delivered.

Project methodology

  • Register and signin system
    • Everyone is registered as a customer.
    • Customers can apply to be sellers. Picture
    • Shipper only created by the Admin.
    • Admins can create any other admins.
  • Product life cycle
    • A seller add a product.
    • A customer order some products, number in stock decreases.
    • The customer tracks the order's state since it's placed. Picture
    • Depends on the address the customer provided, the area shipper get notification. Picture
    • The product's seller get a notification about the order. Picture
    • The shipper pick the product, the seller mark it as shipped.
    • The shipper deliver the order, and mark it as delivered.
    • The customer may want to turn it back (to be done).
  • Other facilities
    • Users can edit their account info. Picture
    • Users can track their order's state. Picture
    • Users can add, delete or edit addresses. Picture
    • Users can have a wishlist with any amount of products. Picture

Users roles - Dashboard Picture

  • Customer
    • Sign up & login.
    • Switch the account to seller. Picture
    • Purchase order of any amount of products.
    • Tracking order state. Picture
    • Return order (To do).
  • Seller -> all above plus.
    • Add and edit his own products.
    • Receive notifications of the new orders the customer make (only his products).
    • Mark the orders the customers make as shipped when the Shipper takes it.
  • Shipper -> all above plus
    • Receive notifications of orders (According to the customer address provided).
    • Ship orders to the customer's address and mark the order as Delivered.
  • Admin -> all above plus
    • Add, Edit and Delete categories.
    • Add, Edit and Delete any products.
    • Create other Admins.
    • Create Shippers and add Shipper area he will be responsible for.
    • Restrict any user from all the permissions.

💹   Technologies

Project is created with:

Automation

  • Jenkins
  • Git

Microservice/Containerization

  • Docker
  • Docker Compose

Backend

  • Express
  • Mongoose
  • Json Web Token (For authentication)
  • bcryptjs (for data encryption)

Frontend

  • React JS
  • Redux (Manage app state)
  • React-router (To handle routing)
  • Axios (For http requests)
  • React Bootstrap
  • React-toastify (To handle success and error messages)
  • Formik (To handle forms state and validation)
  • Yup (To handle client side form validation)
  • Sass

💡   Key Concepts

  • MVC (Model-View-Controller)
  • CRUD operations
  • Authentication system
  • Encrypting passwords
  • Images handling using multer
  • OOP (Object Oriented Programming)

📈   UML Diagram

It's my first time to design a UML so maybe it sucks :D

UML Diagram

💻   Setup

To automate using Jenkins, use Jenkinsfile in your Jenkins Pipeline Configuration.

$ Jenkins > Your_Pipeline > Configure > Use pipeline script from SCM
$ Add your Git repo in Repository option, use Filename as "Jenkinsfile", select Branch and disable "Lightweight Checkout" Option. and Then run the pipeline.
$ Other option is that you can copy the Jenkinsfile code and paste it into your Jenkins Pipeline Configuration.
$ In Jenkins Pipeline Configuration after copying the code, make any necessary edits according to path or steps as you like.

Dockerfile is designed to run the app in Dev mode means both FrontEnd and BackEnd by default, you can edit the start behaviour by changing the command in Dockerfile. To run this project using Docker, It will run both Frontend/Client and the Backend/Server, it can be done using -

$ cd inventory-application
$ sudo docker compose build --no-cache
$ sudo docker compose up -d 
$ To stop the containers - "sudo docker compose stop"
$ To remove all containers of this app - "sudo docker compose down"

To run this project locally, install it locally using npm:

$ cd inventory-application
$ npm install (install backend dependencies)
$ cd views
$ npm install (install frontend dependencies)
$ cd ..
$ npm run server (for Node server side development)
$ npm run client (for React client side development)
$ npm run dev (for both client and server side)

Install Node.js for local installation using this blog -

$ https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-18-04

  ENV

  • PORT=
  • DB_URI=
  • JWT_SECRET=
  • CLOUDINARY_CLOUD_NAME=
  • CLOUDINARY_API_KEY=
  • CLOUDINARY_API_ESCRET=

Containerized by -

👤   Mayank Purohit

Main Author and Major Thanks to -

👤   Mohamed Elashmawy

📝   License

  • This project is MIT licensed.