This is a solution to the GitHub Jobs API challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Unfortunately, Github Jobs was deprecated, so the challenge was renamed to "Devjobs web app", and now it offers a json file with some data instead of the API. My solution is still making requests to Github Jobs API - but it's mocked with MSW library, which uses a service worker for intercepting requests and sending back data from the json file.
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- View all jobs currently live on the GitHub Jobs API
- Be able to click a job from the index page so that they can read more information and apply for the job
- Bonus: Have the correct color scheme chosen for them based on their computer preferences.
- My custom webpack template
- React, React Router
- Redux toolkit
- JSS (styling)
- Jest and React Testing Library
- MSW (mocking the API)
- Code quality tools:
- Conventional commits, Commitlint
- ESLint, Prettier
- Husky & Lint Staged (for linting & testing staged files before a commit)
- CI and deploy to Github Pages
This project used to be a part of my frontend practice monorepo. Since I moved it to a separate repo I was also practicing:
- Github Flow (using Issues, PRs; task management in Github Projects)
This is the most complex project I've been doing so far. Some of the things I've learned:
- integration testing of React components
- how to mock/stub modules, functions, properties in Jest
- the "toolkit" part of Redux
- how to set up and use JSS with theming
This time I wrote all the tests after coding the whole website, so next time I want to focus on TDD. Thinking about how your component/module/function will be used while writing tests will help design them.
- React App src structure by Tania Rascia
- React Testing Library docs
- WAI-ARIA cheatsheet
- Github Actions CI codelab
- Codeclimate - additinal code quality checks
- Depfu - sends PRs with dependencies updates, supports grouped updates
- Community Slack