Initial Commit.

Author: Hau Cherng

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

README.md

@@ -0,0 +1,58 @@
+# 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.

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+}