- Implement given design (
design.png) in HTML and CSS. - Try to come up with your own solution and do not use any CSS framework. The content can be hardcoded and you can use any font and images.
- The design is not responsive, but you can make it responsive if you want to.
- The design is responsive.
- Solution for non-mobile view is with HTML and CSS. (no JS)
- Solution for mobile view allows for JS. (as it is a bonus)
- The design is implemented using flexbox since it is easier to implement and maintain.
- Children within (
<body>) consist of (<header>) and (<main>) since there is no footer based on the design. - Used CSS variables for colors and font sizes. (for easy customization)
- Used JS for pagination during mobile view. (using jQuery)
- Clone the repository.
- Open
assignment1folder. - Open
index.htmlin a browser.
a. Desktop view:
b. Responsive view:
- A main page that show multiple products
- When product page is clicked, it will go to a separate product detail page
- Product detail page will have add to cart
- When "Add to cart button" is clicked, it will update the cart icon to have number of the product in the cart
- A cart page will list the products which are added to the cart
- Cart page will calculate the total amount needed to be paid
- Cart will allow the change of quantity and removal of products
- Use ReactJs for this assignment
- Use https://fakestoreapi.com for retrieval of products
Bonus
- Write meaningful test cases only on cart page using jest and react-testing-library.
- Persist data of shopping cart even when browser is closed and reopen.
- Beautify the UI using tailwindcss framework
- Surprise Us :)
- There are 3 pages in total:
- / (main page showing multiple products)
- / [slug] (separate product detail page)
- / cart (cart page)
Answer: Yes
- Use other libraries? i.e. Axios
Answer: Yes, free to use any libraries to achieve objective.
- Product page (
app/page.js),getData()async function was used to fetch data from the API and store it inproductsstate. Thenmap()to iterate through theproductsstate and display the data in the UI.
Tailwind gridwas used to display the products in a grid. So that the products are displayed in a responsive manner.
- Product Detail page (
app/product/[slug]/page.js), nextJS's[slug]feature was used to create dynamic routes. Async functiongetProduct()was also used to generate the product based on the slug. Page is an async function because it usesgetProduct()to fetch data from the API and store it indatastate. - Cart page (
app/cart/page.js), it uses useEffect to get the cart items from localStorage, it then usesobject.values()to get the values of the cartItems object, cartItems.reduce() and .map() to iterate through the cartItems, group them and display the data in the UI. Functions used within Cart page are:- calculateTotalPrice(): calculates the total price of the items in the cart
- increaseQuantity(): increases the quantity of the item in the cart
- decreaseQuantity(): decreases the quantity of the item in the cart
- clearCart(): clears the cart
- Navbar component (
app/components/navbar.js), it usesuseEffect()to get the cart items from localStorage and updates the cart icon with the number of items in the cart accordingly. - Footer component (
app/components/footer.js), it is a simple footer component. - Layout component (
app/layout.js), it is a simple layout component that wraps the children components (i.e. different pages).
- TailwindCSS was used for styling.
global.csswas used to import the tailwindcss styles and to add custom styles.- Mainly, Tailwind classNames were used to style the components.
- Grid was used to display the products page in a responsive manner.
- Flex and divs were mainly used in this project.
LocalStoragewas used to store the cart items.- Onload, the cart items are retrieved from localStorage and stored in the cartItems state.
- Any changes to the cartItems state will be saved to localStorage.
react-iconswas used for the icons used.jestandreact-testing-librarywas used for testing.react-simple-star-ratingwas used for the star rating withinapp/product/[slug]/page.js
# Clone the repository
git clone
# Open assignment2 folder
cd assignment2
# Install dependencies
npm i
# Run the development server
npm run dev
# Open http://localhost:3000 in a browserOpen http://localhost:3000 with your browser to see the result.
a. Products page:
b. Product Detail page:
c. Cart page:
