MSS

The Problem ⛔

• When there is a seller who somehow wants to publish and display his own products, in a private and secure way, especially if the products have great information, details and classifications, and the buyer needs to be well acquainted with the products before he buys them.

The solution 💡

• We created a website similar to e-commerce websites. that showed Products in the WebSite in a creative way, the WebSite Provided of communication way to the saller in direct way, And Provided of Dashboard for the saller to manage in his Store.

User Stories 📖

Custmer who Visit Store

• As a Custmer, I want to see products in categorized, easy & understandable way.
• As a Custmer, I want to see product details and moving to related products in easy way.
• As a Custmer, I want to be able to add & remove products i care, to/from my cart.
• As a Custmer, I want to be able to saller in general or by take my cart info.

Saller who Own the Store

• As a Saller, I want to be able to add, edit, delete & show products.
• As a Saller, I want to be able to add, edit, delete & show products Attriputes.
• As a Saller, I want to be able to add, edit, delete & show slider products.
• As a Saller, I want to be able to add, edit, delete & show categories with subcategories.
• As a Saller, I want to be able to add, edit, delete & show Store Settings .
• As a Saller, I want to be able to add, edit, delete & show users can manage my store.
• As a Saller, I want to be able to add, edit Admin Info.

Prototype

Dashboard Prototype

SQL Scheme

How to Launch App Locally :-

• clone this repo by typing this command in the terminal:
  git clone https://github.com/Saeed99Madi/MSS-E-Commarce

• Run npm i to install the packages for the app as well as the client side packages.

Database Setup 📋

make sure you have installed PostgreSQL and pgcli - if you're working on linux

CREATE DATABASE {database name};
CREATE USER {user name} WITH superuser password {password}
ALTER DATABASE {database name} OWNER TO {user name};

• Test DB:
• Do the same as before but make sure to change the names.

• Run the following command in terminal to build your database directly after adding it in your environment variables

npm run buildDB

Environment variables:

Environment variables are one of the ways we keep our product safe. If you want to access our app locally you will need to add your own.

• create .env file
• add your Environment variables

DEV_DB_URL= # Your development PostgreSQL connect
DATABASE_URL= # Your production PostgreSQL connect
SECRET_TOKEN= # Your token Secret key

• add your client side Environment variable

REACT_APP_BASE_URL=http://localhost:8080/api/v1/

Start the App 🔌

To start the App Locally you can start the server First then start client-side or vice versa!

To run Server, In your terminal Type:

npm run dev then you should be able to go to (http://localhost:8080/)

To run client-side, In your terminal Type:

cd client => npm start then you will be able to run (http://localhost:3000/)

Now you can view the app live in the Browser!

Technologies 💻 :-

• BackEnd: Node JS & Express JS
• FrontEnd Dashoard: React JS
• FrontEnd Landing Page: Next Js
• Localisation: Next Translate
• Middlewares: Axios
• Database: PostgreSQL
• ORM library: Sequalize
• Libraries: Material UI

Team Members

• Said Madi
• Mahmoud Hammad
• Abdalhakim Abumusameh

Resources

• Node Js
• React Js
• Next Js
• Express
• Material UI