bontouch-assignment
A sample react assignment. Feel free to fork, copy and modify as needed.
Example
See https://bontouch-assignment.netlify.app for a look at the code live. 🚀
Usage
First install the dependencies:
npm installThen you can:
| Command | Description |
|---|---|
npm run start |
Run the website on http://localhost:3000 |
npm run build |
Build the production version inside /build |
npm run test |
Run the tests |
npm run tsc |
Run TypeScript type-checking |
npm run lint |
Run eslint |
npm run format |
Run prettier and eslint with --fix |
This projects uses TypeScript with create-react-app.
Explanation
It only runs thanks to:
- create-react-app to avoid messing up with webpack / eslint / typescript and the rest
- axios for the promise based HTTP client
- react-query for caching the return of axios and simplifying the fetch logic
- react-router for the declarative routing
- bootstrap v5 for the helper classes and the base styles
Attention was paid to:
- Minimizing layout shift with
<Delayed />component and image intrinsic ratio - Avoiding unnecessary requests with
lazyloading images and agressive caching - Responsive layouts from mobile to desktop
- Accessibility (skip-to-content, accessible labels, consistent focus, correct element usage...)
- Handling edge cases (directly loading descendent page, network errors)
- Animating the gallery (works even with resizing the browser)
Guidelines
- Prettier is used for style consistencies in all files
- ESlint is used for linting
- EditorConfig is used to enforce correct spacings on all files
- The above is enforced when you try to commit
- Commits should be in the form of:
<type>(<scope>): <subject>
<type>: build, ci, chore, docs, feat, fix, perf, refactor, revert, style, test
<scope>: the scope of the commit
<subject>: a short imperative subject
feat(search): Add focus to input field
chore(webpack): Migrate to webpack 2
test(react): Add carousel unit tests
See conventional commits.