/react-js-coding-test-level-2

Primary LanguageTypeScript

react-live-coding-test

Follow these steps

Application Setup (DO THIS FIRST)

  • Fork this repository into your GitHub account (You can create a GitHub account if you don't have one)
  • Clone the repository from your repository
  • Checkout main branch
  • Install dependencies
  • To start development use npm start

Project Overview

This project is about a frontend ecommerce application. the expected time to finish the project is around 12 hours (4 days, 3 hours each).

Required knowledge

  1. Tailwind
  2. Typescript
  3. NextJS
  4. Docker (BONUS)
  5. Any Free deployment platform Experience (Bonus)

we are open to any /components if it is needed in the test.

IMPORTANT

After implementing each feature for each test in the respective branch, create a Pull Request and merge to the main branch, then delete the merged branch.

First Test - Landing page

  1. create a new branch name - feature/landing-page
  2. create a clone of this page https://www.lazada.com.my/
  3. use this when product details is needed : https://fakestoreapi.com/
  4. this page should be in http://localhost:3000/

PS: clone as similiar as you can. As long as you are able to showcase your skill.

Second Test - Product listing

  1. create a new branch name - feature/product-listing
  2. use https://fakestoreapi.com/ as API for listing.
  3. create filterable, sortable and paginated table.
  4. the products can be filtered by categories - list of categories can be found at https://fakestoreapi.com/products/categories
  5. has floating button that when clicked, shows the current items in cart. (data is retained even if the page is refreshed).
  6. there will also be a quick buy button that redirects the user to receipts page.
  7. this page should be in http://localhost:3000/products

Third Test - Receipts page

  1. create a new branch name - feature/receipts based on feature/product-listing after you are done with second test.
  2. user will be redirected to this page once user click quick buy at http://localhost:3000/products
  3. user should be presented with a the items in the cart.
  4. user should be able to view a pie chart of the price of the items.
  5. user should be able to download a pdf of the receipts.
  6. this page should be in http://localhost:3000/receipts

Fourth test - Dashboard

  1. create a new branch name - feature/dashboard
  2. use https://randomuser.me/api/ as API for showing user profile.
  3. try to utilize every field in the result from the response.
  4. this page should be in http://localhost:3000/dashboard

Bonus

  1. Dockerize this application.
  2. Deploy this application online and share the link for viewing.