- Name: Haikel Ilham Hakim
- College: ISB Atma Luhur
- Major: Informatics Engineering
You are asked to create a basic Booking and ride cars website (single-page application) with React. We provide you with a web page wireframe to follow and the requirements for each page below. Improve this wireframe with your own design and style. You are allowed to create your own assumption but you should write it in the readme.
- You should implement state management e.g Redux. => In this case, I use jotai instead of Redux.
- You should implement react hooks useState.
- You should implement react hooks useEffect.
- You should implement react hooks useRef.
- You should implement unit test with Jest and Enzyme. Coverage min 50%.
- You should implement a hybrid application SSR and a CSR page is a big plus.
- You should implement amp pages is a big plus.
In this test, I use:
- Next JS appDir for Frontend Framework.
- Typescript as main Language.
- Tailwind CSS for CSS Framework.
- Shadcn/ui for UI Components(since the deadline is only 2x24, I want to focusing more on finishing requested features).
- Jotai for State Management.
- Both SSR and CSR techniques.
├── components.json
├── next.config.js
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── prettier.config.js
├── public
│ └── images
│ └── docs
├── README.md
├── src
│ ├── app
│ │ ├── favicon.ico
│ │ ├── my-book
│ │ ├── vehicle
│ │ │ └── [slug]
│ │ └── wishlist
│ ├── components
│ │ └── ui
│ │ └── typography
│ ├── features
│ ├── hooks
│ ├── lib
│ ├── store
│ └── types
├── __tests__
│ ├── home
│ ├── my-book
│ ├── vehicle
│ └── wishlist
├── tsconfig.json
└── turbo.json
- Clone this repo.
- Install all deps. I use pnpm, so I can type
pnpm install. - After that, type
pnpm run devand see the result inhttp://localhost:3000