Submitted
Job listings with filtering using React && Tailwindcss
#react#react-query#tailwind-css#framer-motion
Buhenz• 30
@Buhenz
Design comparison
Reports
Accessibility report (73)
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">warning
All page content should be contained by landmarks
<img class="logo-mobile" src="./images/photosnap.svg" alt="Logo for Photosnap">warning
All page content should be contained by landmarks
<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap">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>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%]">warning
All page content should be contained by landmarks
<img class="logo-mobile" src="./images/manage.svg" alt="Logo for Manage">warning
All page content should be contained by landmarks
<div class="flex flex-wrap items-center justify-start mt-3 md:flex-nowrap">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>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%]">warning
All page content should be contained by landmarks
<img class="logo-mobile" src="./images/account.svg" alt="Logo for Account">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>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>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%]">warning
All page content should be contained by landmarks
<img class="logo-mobile" src="./images/myhome.svg" alt="Logo for MyHome">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>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>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%]">warning
All page content should be contained by landmarks
<img class="logo-mobile" src="./images/loop-studios.svg" alt="Logo for Loop Studios">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>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>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%]">warning
All page content should be contained by landmarks
<img class="logo-mobile" src="./images/faceit.svg" alt="Logo for FaceIt">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>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>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%]">warning
All page content should be contained by landmarks
<img class="logo-mobile" src="./images/shortly.svg" alt="Logo for Shortly">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>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>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%]">warning
All page content should be contained by landmarks
<img class="logo-mobile" src="./images/insure.svg" alt="Logo for Insure">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>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>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%]">warning
All page content should be contained by landmarks
<img class="logo-mobile" src="./images/eyecam-co.svg" alt="Logo for Eyecam Co.">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>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>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%]">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">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>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>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%]">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
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!