Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Job listings with filtering using React && Tailwindcss

#react#react-query#tailwind-css#framer-motion
Buhenz 30

@Buhenz

Desktop design screenshot for the Job listings with filtering coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (73)
warning

Document should have one main landmark

<html lang="en">
Learn more
warning

Page should contain a level-one heading

<html lang="en">
Learn more
warning

All page content should be contained by landmarks

<img class="w-full h-[150px] bg-repeat-x bg-primary-color mb-8 max-md:hidden" src="./images/bg-header-desktop.svg" alt="waves">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/photosnap.svg" alt="Logo for Photosnap">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap">
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Senior Frontend Developer</p>
Learn more
warning

All page content should be contained by landmarks

<p>1d ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Full Time</p>
Learn more
warning

All page content should be contained by landmarks

<p>USA Only</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/manage.svg" alt="Logo for Manage">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap">
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Fullstack Developer</p>
Learn more
warning

All page content should be contained by landmarks

<p>1d ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Part Time</p>
Learn more
warning

All page content should be contained by landmarks

<p>Remote</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/account.svg" alt="Logo for Account">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap"><h3 class="font-bold text-md text-primary-color ">Account</h3><p class="bg-primary-color text-white font-bold ml-4 text-sm rounded-xl px-1.5 pt-[3px] md:ml-2">NEW!</p></div>
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Junior Frontend Developer</p>
Learn more
warning

All page content should be contained by landmarks

<p>2d ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Part Time</p>
Learn more
warning

All page content should be contained by landmarks

<p>USA Only</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/myhome.svg" alt="Logo for MyHome">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap"><h3 class="font-bold text-md text-primary-color ">MyHome</h3></div>
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Junior Frontend Developer</p>
Learn more
warning

All page content should be contained by landmarks

<p>5d ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Contract</p>
Learn more
warning

All page content should be contained by landmarks

<p>USA Only</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/loop-studios.svg" alt="Logo for Loop Studios">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap"><h3 class="font-bold text-md text-primary-color ">Loop Studios</h3></div>
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Fullstack developer</p>
Learn more
warning

All page content should be contained by landmarks

<p>1w ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Full Time</p>
Learn more
warning

All page content should be contained by landmarks

<p>Worldwide</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/faceit.svg" alt="Logo for FaceIt">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap"><h3 class="font-bold text-md text-primary-color ">FaceIt</h3></div>
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Junior Backend Developer</p>
Learn more
warning

All page content should be contained by landmarks

<p>2w ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Full Time</p>
Learn more
warning

All page content should be contained by landmarks

<p>UK Only</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/shortly.svg" alt="Logo for Shortly">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap"><h3 class="font-bold text-md text-primary-color ">Shortly</h3></div>
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Junior Developer</p>
Learn more
warning

All page content should be contained by landmarks

<p>2w ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Full Time</p>
Learn more
warning

All page content should be contained by landmarks

<p>Worldwide</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/insure.svg" alt="Logo for Insure">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap"><h3 class="font-bold text-md text-primary-color ">Insure</h3></div>
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Junior Frontend Developer</p>
Learn more
warning

All page content should be contained by landmarks

<p>2w ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Full Time</p>
Learn more
warning

All page content should be contained by landmarks

<p>USA Only</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/eyecam-co.svg" alt="Logo for Eyecam Co.">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap"><h3 class="font-bold text-md text-primary-color ">Eyecam Co.</h3></div>
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Fullstack Engineer</p>
Learn more
warning

All page content should be contained by landmarks

<p>3w ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Full Time</p>
Learn more
warning

All page content should be contained by landmarks

<p>Worldwide</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more
warning

All page content should be contained by landmarks

<img class="logo-mobile" src="./images/the-air-filter-company.svg" alt="Logo for The Air Filter Company">
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap"><h3 class="font-bold text-md text-primary-color ">The Air Filter Company</h3></div>
Learn more
warning

All page content should be contained by landmarks

<p class="my-2 text-sm font-bold cursor-pointer text-green-hover hover:text-primary-color md:text-base md:my-1 lg:text-lg xl:text-xl">Frontend Developer</p>
Learn more
warning

All page content should be contained by landmarks

<p>1mo ago</p>
Learn more
warning

All page content should be contained by landmarks

<p>Part Time</p>
Learn more
warning

All page content should be contained by landmarks

<p>Worldwide</p>
Learn more
warning

All page content should be contained by landmarks

<div class="flex flex-wrap md:justify-end md:mt-2 min-[900px]:basis-1/2 lg:basis-[60%]">
Learn more

Buhenz’s questions for the community

From the requirements that were in the challang I additionally added the following: I added sorting of job elements, if in the json file another job offer would get the status "featured" and, or "new" it will be sorted so that it is generated first. This is not done "rigidly" I took care of error handling, used modern methods such as generating a spinner when data is retrieved Using modern libraries, I added subtle animations on individual components to make the whole application behave more "smoothly."

Community feedback

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!