Frontend Mentor - GitHub Jobs API solution

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.

Overview

Challenge requirements

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.

Links

• Live Site
• Solution page on Frontend Mentor

My process

Built with

• 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)

What I learned

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

Continued development

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.

Useful resources

• 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