Submitted over 2 years ago

Devjobs web app built with reactjs and styled-components

Salym Akhmedov• 170

@salymk

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Devjobs web app

HTML
CSS
JS

4advanced

View challenge

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

@jmarellanes

Posted 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);

Salym Akhmedov• 170

@salymk

Posted over 2 years ago

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

Please log in to post a comment

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