Frontend Mentor - Job listings with filtering solution

This is a solution to the Job listings with filtering challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Filter job listings based on the categories

Screenshot

full filtered

Links

• Solution URL: GitHub
• Live Site URL: vercel link

My process

Built with

• Semantic HTML5 markup
• Sass
• TypeScript
• React - JS library
• Redux - A Predictable State Container for JS Apps
• Vite - Next Generation Frontend Tooling

What I learned

I learned how to use TypeScript with redux

Continued development

I need to learn more redux / redux toolkit

Useful resources

• Vite svg - This article helped me to import svg as ReactComponent
• svgr-rollup - This article helped me to fix import problem when svg import' does not provide an export named 'reactcomponent'

Author

• Website - smth about me
• Frontend Mentor - @LikeKugi

Acknowledgments

I've just completed a front-end coding challenge from @frontendmentor! 🎉

You can see my solution here: https://www.frontendmentor.io/solutions/responsive-joblist-page-using-typescript-react-redux-vite-cbJb7wriJQ

Any suggestions on how I can improve are welcome!