Javascript Frameworks - Course Assignment - Noroff

Home	Item
Contact	Cart

This is my javascript frameworks introductory course assignment project submission for the Frontend Development course at Noroff School of technology and digital media.

Table of Contents

• Brief
• Project Dev Stack
• Live Website Demo
• External Development

Brief

Work with the official Noroff API Documentation, plan, design and build a modern front-end eCom application.

Pages:

• Homepage.
• Individual product page.
• Cart page.
• Checkout success page.

Overarching Objectives:

1. The homepage should have a list of all the products.
2. There should be a look-ahead search bar that filters products when typing in a product name.
3. Clicking on a product should take a user to an individual product page.
4. 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.
5. There should be an Add to cart button which, upon clicking, adds the product to the cart.
6. The product page should display the title of the product, the description and the image. There should also be reviews listed for the product.
7. You should use the discountedPrice property to display the price of the product. If there is a difference between the discountedPrice and price properties then that means there is a discount for that product. Calculate what this dicount is and display it on the page.
8. The cart page will have a checkout button. Clicking this checkout button then goes to a checkout success page.
9. Checkout success page will display a message to the user notifying them that their order was successful.
10. The cart must be cleared if the user gets to the checkout success page.
11. There will be a contact page which will contain a contact form with the following fields. There must be form validation:
    • Full name (Minimum number of characters is 3, required)
    • Subject (Minimum number of characters is 3, required)
    • Email (Must be a valid email address, required)
    • Body (Minimum number of characters is 3, required)

Project Development Stack

The development stack used for this project:

• Javascript as the programming language.
• Tailwind as the styling CSS framework.
• React as the JS framework.
• React Router DOM for routing.

Live Website Demo

Website Link:

https://jade-paprenjak-6721a7.netlify.app/

External Development

1. Clone the repo through github app/website or use the CLI command:

git clone https://github.com/DrRuski/js-frameworks-ca.git

2. Install dependencies:

npm i

3. Start development server:

npm run dev