Skip to content

CA-G12/E-Commerce-Team-4

Repository files navigation

E-Commerce-Team-4

E-Commerce project built with react.js, node.js.

Live link

You cans check the website out from HERE.

User journey

  • When the user first opens the website, he/she will find the landing page, inside the landing page, the user will find a header, an image landing section, categories section, products section, and a footer.
  • Inside the header, the user will find a logo, a search icon, account icon, and cart icon.
    • When the user clicks on the search icon, a search bar will appear and the user can search for specific products by their names.
    • When the user clicks on the cart icon, the website will go to server page.
  • In the categories section, when the user clicks on any category, the products of this category will appear on the products section below.
  • In the products section, the default products the user will find in the section is general products with load more button to load more products. The user can filter the products from the sidebar and the results can be shawn on the products section.
  • In the footer, the user will find some static data about the website.
  • In the login page, the user can log in to his account by providing the email and the password of his account.
  • In the signup page, the user can sign up to his account by providing the username, his name, the email, the password, confirming the password, country and the address of his to create an account.
  • In the cart page, the user will find his products which he selected to buy.
  • In the product page, the user will find the product he clicked on this page.

User stories

  • As a user, I should be able to search for products.
  • As a user, I should be able to select a category to filter the products depending on this category.
  • As a user, I should be able to see the default general products on the main page.
  • As a user, I should be able to filter the products depending pon the filter criteria i chose.
  • As a user, I should be able to load more products when I click load more data.
  • As a user, I should be able to see the static data on the footer of the landing page.
  • As a user, I should be able to login to my account
  • As a user, I should be able to create new account
  • As a user, I should be able to add products to the cart if I'm signed in.

Project installation

Screenshot from 2022-09-26 15-23-34

  • If you are a git user, you can click the code drop-down menu as illustrated in the picture above and copy the link to clone the repo.
  • Now go to your terminal and type: git clone <the link here> and then the repo will be cloned to your local machine.
  • By now you have to open your IDE -I recommend VSCode- and open the project.
  • to open a live version from your local machine project, you can run the script npm i, this will download the dependencies and devDependencies, then run the command num run dev to open a hot server. By now you can go to you localhost:3000 to see the project.
  • If you don't have git in you command line, you can download the project as a zip file.
  • Happy Coding!🤞

Technologies we used

  • Node.js
  • Express framework.
  • Joi validation library.
  • bcrypt hashing library.
  • JWT library.
  • Compression module.
  • Helmet module.
  • Browser cookies.
  • PG module.
  • Jest testing library.
  • Supertest testing library.
  • React.js
  • React Router.
  • create-react-app module.
  • React scripts.
  • Eslint.

Figma design

landing1

landing2

landing3

product

cart

login

signup

Team members

About

E-Commerce project built with react.js, node.js.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •