E-Commerce project built with react.js, node.js.
You cans check the website out from HERE.
- 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.
- 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.
- 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 commandnum run dev
to open a hot server. By now you can go to youlocalhost: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!🤞
- 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.