↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

inventory-application

eCommerce JavaScript

🛒   Shopping App 🛒

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

Shopping App, it started for The Odin Project practice
Started from here curriculum
The Code can be found 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:

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 😀

💻   Setup

To run this project, 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)

  ENV

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

Author

👤   Mohamed Elashmawy

📝   License

  • This project is MIT licensed.


↑