Frontend Mentor - Devjobs web app solution

This is a solution to the Devjobs web app 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
  • Useful resources
• Author

Overview

The challenge

To build out a jobs board using the provided data, trying to get your project looking as close to the reference design as possible.

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
• Be able to filter jobs on the index page by title, location, and whether a job is for a full-time position
• 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. Hint: Research prefers-color-scheme in CSS.

Screenshot

Links

• Solution
• Repository
• Live Site

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• TailwindCSS
• React - JS library
• Tanstack Start - React based framework
• Tanstack Query
• Tanstack Form

Useful resources

• A Modern CSS Reset
• A Complete Guide to Flexbox
• A Complete Guide to Grid
• Pure CSS Custom Checkbox Style
• useWindowSize Hook
• How to use Variable in a Regular Expression in JavaScript
• Filtering Data With React-Query Library

Author

• Website - www.richardcyrus.com
• Frontend Mentor - @richardcyrus