- Local Development
- Production Build
- Testing
- Contributing
- Continuous Integration
- Component based design
- Styling
- Strong typing
- Languages And Tools
Clone the project and install it using the command below.
yarn install
Run the project by using the command below.
yarn start
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
yarn build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
yarn test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
This application makes it easy to write clean code by formatting and linting using Husky. On commits, which are initiated using the git command git cz Husky runs a pre-commit script. It formats and lints the code to the AirBnb standard to ensure code quality. On push, Husky runs the pre-push script to update the CHANGELOG.md, listing all conventional commits, bumping the version and pushing.
I created a github action when a pull request is made to the main branch, the application is built and tested. Ideally there would be multiple CI yml files to protect branches and ensure there is a smooth pipeline from local development to production.
The application was built with compoment based design. The idea is to reuse components where possible and to make the pages respond to the properties passed into them.
The idea was to only create the necessary amount of components and to pass state around when needed. Context stores were not created to reduce complexity due to the small scope of the project.
Styling was achieved with CSS. MUI was used as a component library to bootstrap components such as buttons, textfields, and pagination.
While not a requirement, I utilized typescript to understand the shape of properties that components are consuming. During development this allowed me to understand errors and using intellisense, I was able to predict what was necessary when building portions of the application.
This application was built using HTML, CSS, React (Typescript).
