The app fetches CSV from a public spreadsheet and renders available time slots.
npm install
npm start- open http://localhost:3000
- React
- Typescript
- Styled components
- Vite
- Automated code style by Prettier
- Automated linting by Eslint based on Airbnb eslint config
- Static typing by Typescript
Husky and lint-staged modules hook to git and run automated checks locally on pre-commit.
Renovate bot provides automated updates for node deps for Github hosted repositories. I prefer Renovate to Dependabot, as the former can update multiple packages in a single PR thanks to its Noise reduction feature.
Editorconfig assures standardized file formatting across different code editors.
Github workflow checks.yml runs quality checks and tests the build on every push.
Vite is a next generation frontend tooling developed and maintained by Vue.js community.
- well maintained and being used as a default solution in a major framework
- takes advantage of fast Golang EcmaScript compiler and Rollup plugins ecosystem
- has minimal configuration
Vitest is a replacement for Jest for projects based on Vite. Migration from Jest to Vitest is seamless as the Vitest API is compatible with Jest.
Even though it may seem like an overkill for the task I decided to demonstrate my general approach for data fetching and advanced tooling for API emulation in browsers.
MSW library mocks backend and provides the same debugging experience as real API calls - inspect Network request in devtools. It also replaces fetch mocking in integration tests.
React-query is a library for managing server state, it uses the stale-while-revalidate caching strategy and replaces general purpose state management libraries like Redux.