E-store

E-store is a E-commerce for selling electronic devices around the world, which makes it easy for the user to buy any product by just one click, at an affordable price globally with good quality.


View Demo · Figma Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. User Journey
3. User Stories
4. Getting Started
   • Prerequisites
   • Installation
5. Contributors

About The Project

(back to top)

Built With

• HTML5
• CSS3
• React.js
• Node.js
• Express.js
• PostgreSQL

(back to top)

User Journey

As a user:

• When opening the e-store website you'll be faced withhome page with all products.
• You can search for any product name by typing on search box.
• you can sort the products by category and price.
• You can buy and product by adding it in your cart by clickcart icon in the product card and.
• You can check all your products and its price by cart page, You can visit it by clicking on Go To Cart in information section.
• In your cart, you can increase/descrease the quentity of the product, and you can delete it and see the Total price of all products and you can back to the home pageby clickContinue Shopping in information section.
• when you click on any product photo, you will be faced withproduct page, you will see More accurate information like description for the product.
• While you're waiting for the data to load you'll see a loading screen which will disappear when the data is ready.
• If the search or category or your cart doesn't have any data, a message will appear informing you about it.

As a seller:

• When opening our website, you'll see a navbar containing a login button, click it and fill up your information and click the login button.
• When you're logged in, you'll see the avialable products, and a Add Product button.
• When clicking the Add Product button, you'll see a form, fill it and click the add button to add the new product.
• In the home page, you'll see products and inside the product card, there is a delete and edit button.
• When clicking the edit button, a form will appear which contains the previos information for this product, you can edit the information.
• When clicking the delete button, a confirmation popup will appear to confirm the delete process.

(back to top)

User Stories

• As a buyer, I can view existing products from the main page.
• As a buyer, I can filter products by price, by categories, and search by name.
• As a buyer, I can view products by moving to the product page.
• As a buyer, I can add products to my cart.
• As a buyer, I can navigate to the cart page and remove products or proceed to buy.
• As a seller, I can add products to the home page.
• As a seller, I can delete product from home page.
• If the seller, is not logged in, he can't add, edit, and delete a product.

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/GSG-G11/e-store.git

2. Install NPM packages

   npm install &&
   cd client...npm install

3. create .env file for your database, you can read example.env file for know what you need

4. open servers

   npm run dev &&
   cd client...npm start

(back to top)

Contributors

• Feel free to contact us @zaher-aa, @yousrakhaleel, @khaled-samy, @Fady-Alwazir

(back to top)