For this project I was tasked to to apply knowledge of React to build an eCom store.
This was the first project at Noroff using React and CSS modules. I started off with the design in Figma and then I made the eCom store using React and CSS modules.
The Homepage should have a list of all the products. There should be a look-ahead search bar that filters products when typing in a product name. Clicking on a product should take a user to an individual product page.
The header should contain a nav bar as well as a Cart icon component that acts as a button as well as displays the current number of items in the cart.
The individual product page should display data for a single product. There should be an Add to cart button which, upon clicking, adds the product to the cart. The product page should display the title of the product, the description and the image. There should also be reviews listed for the product, if there are any. You should display the price of the product. Calculate what this discount is and display it on the page.
Clicking on the Cart icon will load the Cart page, which will list all of the products as well as a total. The Cart page will have a Checkout button. Clicking this Checkout button then goes to a Checkout success page.
The Checkout success page will display a message to the user notifying them that their order was successful. There should also be a link that lets a user go back to the store. The cart must be cleared if the user gets to the Checkout success page.
There will be a contact page which will contain a contact form with the following fields.
- Homepage
- Individual product page
- Cart page
- Checkout success page
- Contact page
- CSS modules
- React
- (Figma)
- Clone the repo:
git clone git@github.com:VeronicaOS/frameworks.git- Install the dependencies:
npm install
To run the app, run the following commands:
npm run startIf you would like to contribute to my project please make sure to create a new branch, push changes and open a pull request so I can review the code.