Revamped GitHub Jobs Website Using Design From Frontend Mentor

Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

Hello World 👋

Welcome to another project showcase. This time, I will be showing the GitHub Jobs project that I did very recently. The design is from FrontendMentor.Io. The website is available at jobs.bhanuteja.dev.

Let's start with some visuals of how the website looks like.

Loading Home Page

Dark Mode

Loading Home Page - Dark Mode

Light Mode

Loading Home Page - Light Mode

Home Page

Desktop (Dark Mode)

Home Page - Dark Mode

Desktop (Light Mode)

Home Page - Light Mode

Tab/iPad (Dark Mode)

tab-dark.png

Tab/iPad (Light Mode)

tab-light.png

Mobile (Dark Mode)

mobile-dark.png

Mobile (Light Mode)

mobile-light.png

Job Details Page

Desktop (Dark Mode)

desktop-dark-job-details.png

Desktop (Light Mode)

desktop-job-details.png

Mobile - Filters

Mobile - Filters

Features:

  • Dark Mode Support
  • Filters - text, location, full time.
  • Infinite Scrolling with Skeleton Loading
  • Responsive
  • Job Details Page

This website is made with Next.js, Tailwind CSS and React Query

Dark Mode

  • I used Tailwind CSS's inbuilt dark mode support to achieve this.
  • Check this pr for more details.
  • I then stored the user's dark mode preference in local storage. So, if the user sets the dark mode, and closes the browser. When he reopens it again, the website will be loaded in dark mode.

GitHub API

  • Recently GitHub added a strict CORS policy and we will not be able to request the resources from GitHub using a client.
  • So, I had to use a CORS proxy to fetch the data from GitHub Jobs API.
  • I tried every one of the proxies mentioned in this blog post. But, the only one that worked for me then was allOrigins.

Filters

Implementing this one was straight-forward. GitHub API itself supports the option to pass the filters as params, it then returns the filtered data.

Infinite Scrolling with Skeleton Loading

  • Used React Query's useMutation hook to do this.
  • Every time the user presses theLoad More button, a mutation is triggered to fetch the jobs from the next page.
  • I then combined the job data fetched from the next page with the current job data to show all the jobs up until then.

I used Tailwind CSS animations utilities to show the loading skeleton.

I made the source code for this project open source. You can take a look at it.

Tell me in the comments if you like me to dig deep into any of the things that I discussed in this article. I will be happy to do so.

Here is the repo 👉 pbteja1998/github-jobs-api

What's Next

The next article will be part of the My Review of Kent C. Dodds's EpicReact.Dev series. It will be the fifth article in the series. To know more, go to the link below.

Until Next Time 👋


You might also like the following articles that I wrote:


If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on Twitter @pbteja1998.

Miguel Brito's photo

Awesome post @pbteja1998!

I have a question about Frontend Mentor, do you recommend it for people who have only basic experience with CSS?

Bhanu Teja Pachipulusu's photo

@miguendes

Yes, absolutely. When I started doing challenges from Frontend Mentor, I only know very basic css. I have improved a lot by working on the challenges from Frontend Mentor. They have challenges with varying difficulty. I started doing the least difficult challenges first to get confidence.

Here are the challenges that I did so far. You can see that many of them are very basic for a person with good grasp on css.

frontend-mentor.bhanuteja.dev

They even have an amazing slack community to get help from if you are stuck.

Miguel Brito's photo

Bhanu Teja Pachipulusu nice, I'll take a look. I really suck at CSS and would like to learn enough to make simple design.

AbdulSamad Ayoade's photo

This is awesome Teja. I love it. Good job man