https://github.com/jakegodsall/fm-devjobs-web-app
Solution to the Devjobs Web App Frontend Mentor challenge
https://github.com/jakegodsall/fm-devjobs-web-app
css-modules nextjs reactjs
Last synced: 5 months ago
JSON representation
Solution to the Devjobs Web App Frontend Mentor challenge
- Host: GitHub
- URL: https://github.com/jakegodsall/fm-devjobs-web-app
- Owner: jakegodsall
- License: mit
- Created: 2024-01-22T18:10:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-12T08:21:51.000Z (over 1 year ago)
- Last Synced: 2024-02-13T08:15:22.023Z (over 1 year ago)
- Topics: css-modules, nextjs, reactjs
- Language: JavaScript
- Homepage: https://jakegodsall-devjobs-web-app.netlify.app/
- Size: 271 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Devjobs Web App (Frontend Mentor)
This is a solution to the [Devjobs web app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/devjobs-web-app-HuvC_LP4l). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Overview
### The challenge
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.
### Screenshot
### What I've Learned
- The simplicity of constructing condition class names using [clsx](https://www.npmjs.com/package/clsx).
- Creating UI components with a `variant` design pattern for improved flexibility.
- Custom `
` using CSS counters.
- Using the context API along with CSS variables for theme preferences without overuse of props.
- Advanced filtering using forms with different layouts at different viewports.
### Links
- Live Site URL: [Netlify](https://jakegodsall-devjobs-web-app.netlify.app/)
## Author
- Website - [Jake Godsall](https://jakegodsall.com)
- Frontend Mentor - [@jakegodsall](https://www.frontendmentor.io/profile/jakegodsall)
- LinkedIn - [@godsalljake](https://www.linkedin.com/in/godsalljake/)
## License
This project is open source and available under the [MIT License](https://github.com/jakegodsall/fm-advice-generator/blob/main/LICENSE).