All solutions

I had a lot of fun building this project. I tried some new technologies in this project, like styled-components and Material-UI. I loved using styled-components; the most significant benefit I got from using it was maintaining my styles. It was a breeze finding the CSS that was affecting my components, and also, I could delete styles from one component, and it would not affect other components. Another benefit I got was automatic vendor prefixing, meaning I didn't have to worry about what my project would look like on other browsers.

Please give me feedback on:

• Accessibility
• HTML structure
• Loading state I'm using for react-query. Using it in these components:
  • Job: https://github.com/salymk/devjobs-web-app/blob/develop/src/components/Job/Job.js
  • Jobs: https://github.com/salymk/devjobs-web-app/blob/develop/src/components/Jobs/Jobs.js

Need help with:

• I'm using react-query to fetch data from data.json. One big challenge I have is showing 'No Jobs for [user input]' when users search for a job that does not exist.
  • I have a useJobs hook that I'm using to fetch the jobs, you can find it here: https://github.com/salymk/devjobs-web-app/blob/develop/src/hooks/useJobs.js
    • I need help with showing that message in this component: Jobs: https://github.com/salymk/devjobs-web-app/blob/develop/src/components/Jobs/Jobs.js

Things I want feedback on:

• Semantic HTML
• Organized CSS
• Any accessibility issues
• How was my implementation of dark mode

What methodologies are you guys using to organize your CSS?

I hit all of the requirements and user expectations. One thing that's not working correctly is my layout on tablet(768px) and tablet plus(1024). It keeps breaking on the bottom, the button is overflowing. How do I fix this?

How do I change the image overlay color?