Skip to content
Submitted over 2 years ago

Devjobs web app built with reactjs and styled-components

Salym Akhmedov•170
@salymk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Devjobs web app
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

  • José Manuel Díaz•50
    @jmarellanesPosted over 2 years ago

    Hiya Salym and good job with this challenge! Replying your question: I think you can use a variable to store the result of the filter method and then use an if statement or a ternary operator to display the <NotFound /> component (or whatever you called) or use the map method with the result of the filter, example:

    const formattedJobs = data.filter(// rest of the code);
formattedJobs.length === 0 ? <Not Found /> : formattedJobs.map(// rest of the code);
    0
    Salym Akhmedov•170
    @salymkPosted over 2 years ago

    @jmarellanes Thank you, I will give this a try.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord