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.
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-schemein CSS.
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- mongoDB Atlas
- Axios
- React Query
- React Hook Form
- A Modern CSS Reset
- A Complete Guide to Flexbox
- A Complete Guide to Grid
- Persistent Layout Patterns in Next.js
- Next.js Docs: Layouts
- Set up Light and Dark Theme in React
- Pure CSS Custom Checkbox Style
- useWindowSize Hook
- How to use Variable in a Regular Expression in JavaScript
- Fast and Efficient Pagination in MongoDB
- MongoDB Pagination, Fast & Consistent
- Filtering Data With React-Query Library
- React Query 3: A Guide to Fetching and Managing Data
- MongoDB Aggregation: How to get total records count?
- Get a count of total documents with MongoDB when using limit
- Website - www.richardcyrus.com
- Frontend Mentor - @richardcyrus