This is a solution to the Job listings with filtering challenge on Frontend Mentor.
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
- Solution URL: https://joelbyrd.github.io/job-listings/
- Live Site URL: https://github.com/joelbyrd/job-listings
-
React (18.3) - JS library
React is a solid tool for building frontend apps -- it's modern, mature, and powerful. With components, reducers, and state, it lets you create scalable UIs that don't fall apart the moment someone clicks something weird. -
TypeScript - Strongly-typed JavaScript
TypeScript is like JavaScript with a safety net. Because it is strongly-typed JavaScript, it makes sure you don't accidentally pass a banana where the code expects a car. No more guessing what your data should look like -- TypeScript keeps it clean and sane. -
Tailwind CSS - For styles
Tailwind CSS is a developer's best friend when it comes to styling. It's like playing with LEGO bricks -- quick to build and easy to customize. Plus, it pairs beautifully with a component-based architecture like React, making styling reusable and predictable. -
Vite - Frontend build tool
Vite is like Webpack's cool younger sibling -- super fast and doesn't need a ton of babysitting. It gets out of your way, so you can focus on building instead of waiting for the dev server to restart. -
Vitest - Testing framework
Vitest is Jest, but with a caffeine boost. Since I was already using Vite, Vitest was a no-brainer -- same familiar syntax, faster performance, and no “config rage.” It's simple, fast, and doesn't make testing feel like a chore. -
Mobile-first design
The app is designed with a mobile-first approach to ensure it looks great and works smoothly on all devices. It includes a sticky filter bar, making it easy to filter job listings as you scroll. -
Light/Dark modes
I implemented light and dark modes to enhance accessibility and user experience. It defaults to the user's system settings, respecting their preferences for brightness and contrast.