Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xxidbr9/ajaib-interview-test
Ajaib interview test for Senior Web Engineer by Nando
https://github.com/xxidbr9/ajaib-interview-test
Last synced: about 22 hours ago
JSON representation
Ajaib interview test for Senior Web Engineer by Nando
- Host: GitHub
- URL: https://github.com/xxidbr9/ajaib-interview-test
- Owner: xxidbr9
- Created: 2022-07-31T06:12:04.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2022-08-02T02:25:00.000Z (about 2 years ago)
- Last Synced: 2024-04-23T21:33:08.229Z (5 months ago)
- Language: TypeScript
- Homepage: https://xxidbr9.github.io/ajaib-interview-test
- Size: 2.49 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# AJAIB INTERVIEW TEST PROJECT (Senior Web Engineer)
This is, Ajaib Interview test for role (Senior Web Engineer) - By Nando
See hosted project : https://xxidbr9.github.io/ajaib-interview-test
## Project Purpose
This is a project example of an user list that from [API](https://randomuser.me/documentation) store with state management, and meet all the functionality requirements.
## Goals
- [x] Debounce search
- [x] Sort Functionality (click sort in every table column),
- [x] Reset Filter Functionality
- [x] Using state management
## Tools
- React v18
- Typescript
- Ant Design (Base on the example UI)
- Webpack v5
- Brotli for compression,
- Babel
- Redux
- Redux saga
- Redux Toolkit
- Husky
- Eslint
- Jest
- Commitlint
- React Testing Library
- Axios
- [More](./package.json)
## HOW TO RUN
#### Install all dependency
```bash
yarn
```
#### Run in Development mode
```bash
yarn dev
```
#### Build the Project
```bash
yarn build
```
#### Serve the project in Production (using serve)
```bash
yarn serve
```
#### TODO : Serve the project in Production (using Docker Compose)
```bash
docker-compose up
```
## Technical Answer
Find the Answered Question in [Google Docs](https://docs.google.com/document/d/1l05DPZr9z-DVmfXf-jOt2Zm6FIKgWty12Y09WIlJC8k/edit?usp=sharing)
```
https://docs.google.com/document/d/1l05DPZr9z-DVmfXf-jOt2Zm6FIKgWty12Y09WIlJC8k/edit?usp=sharing
```
## PRESENTATION
Take a look at the presentation [Google Slide](https://docs.google.com/presentation/d/1G5OyXL8jqz9vICtrEvgqtUGy3q0caUJwMvVnWPKcQXs/edit?usp=sharing)
## BONUS
- This project use Webpack v5, it will be easily expose and consume a module federation for Micro-frontend
- Brotli for compression, can reduce 60% bundle size when serve it to user, use with [ngx_brotli](https://github.com/google/ngx_brotli) and serve in NGINX, reduce 60% assets size
- Github action for CICD [action file](./.github/workflows)
- Test all Development PR [see example](https://github.com/xxidbr9/ajaib-interview-test/pull/14)
- Great Web performance (base on lighthouse)
## TODO
- [ ] Build the project using docker and inside NGINX
- [ ] Test all file