gsg-g11 / e-store

Ecommerce website that allows users to buy Electronic products online

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)

e-store's Issues

Create confirmation component

Edit product

edit product

handle render delete and edit icons

Handle remove from Cart and clear cart

Create server error component

Create login component

Server Setup

Setup the server

Create icon component

product details component

Create a toaster

Create a toaster (popup which appears for an amount of time then disappears) that appears when

• a product is added to the cart.
• a product is updated.
• a product is deleted.

Create header component

Create a generic component for h1 headings

Add new product

Add new product

Handle edit product

Handle edit product endpoint and its database queries

Setup github actions workflows

use github actions postgresql and nodejs workflows

Create Cart component and its style

select component

Create products schema

Create products schema

Handle delete product

Handle delete product endpoint and its database queries

Create Info component

Containing info about the current page and different buttons based on the page

Handle add product

Handle add product endpoint and database queries

Create README.md File

Deploy setup

Get all products

Get all products from database

test database

Write tests for database queries

Create loader

Create loader

Create inputs component

Handle Errors

Errors:

• 404 error
• 500 error
• customized error

Search for product

Search for product

Create Navbar component

Create Navbar component

Create file structure

Files

• client
  • public
    • index.html
    • favicon.ico
  • src
    • components
      • files...
    • App.jsx
    • index.js
    • index.css
• server
  • index.js
  • app.js
  • __test__
    • routes.test.js
    • db.test.js
  • controllers
    • index.js
    • files...
  • database
    • config
      • connections.js
      • build
        • build.js
        • init.sql
        • fakeData.sql
    • queries
      • index.js
      • files...
  • routes
    • index.js
  • utils
    • validation
      • index.js
    • error
      • CustomErr.js
      • index.js
    • index.js

Packages

Dev Dependencies

• nodemon
• cross-env
• eslint
• jest
• supertest

Dependencies

• express
• joi
• dotenv
• compress
• cors
• pg
• react-router-dom

Create Homepage and products components

Create product component in the homepage

Create addProduct form component

Add to Cart function

Database setup

Setup the database

Delete product

Delete product

Create 'page not found' component

Create page not found component

Refactore and code organize

Filter products

Filter products based on category and price

test routes

Write tests for server endpoints

Get specific product

Get a specific product from the database

Handle seller login

Create generic button and its style