# Revamped GitHub Jobs Website Using Design From Frontend Mentor ## 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](https://frontendmentor.io). The website is available at [jobs.bhanuteja.dev](https://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](https://cdn.hashnode.com/res/hashnode/image/upload/v1602873265135/MUxaADqq-.png) #### Light Mode ![Loading Home Page - Light Mode](https://cdn.hashnode.com/res/hashnode/image/upload/v1602873271367/LbfOD_4Gc.png) ### Home Page #### Desktop (Dark Mode) ![Home Page - Dark Mode](https://cdn.hashnode.com/res/hashnode/image/upload/v1602873396082/vTgrrs8m9.png) #### Desktop (Light Mode) ![Home Page - Light Mode](https://cdn.hashnode.com/res/hashnode/image/upload/v1602873404790/nvP5BMxO-.png) #### Tab/iPad (Dark Mode) ![tab-dark.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602873953189/LHgnDyQ0g.png) #### Tab/iPad (Light Mode) ![tab-light.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602874022009/shdOPkvyG.png) #### Mobile (Dark Mode) ![mobile-dark.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602874106777/iLiRmKoP3.png) #### Mobile (Light Mode) ![mobile-light.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602874124192/9r5dShQt6.png) ### Job Details Page #### Desktop (Dark Mode) ![desktop-dark-job-details.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602876131894/zoGTwdC0e.png) #### Desktop (Light Mode) ![desktop-job-details.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602876146307/3lYvtC0AB.png) ### Mobile - Filters ![Mobile - Filters](https://cdn.hashnode.com/res/hashnode/image/upload/v1602875782094/cfO7KCi1e.gif?auto=compress) ### 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](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) and [React Query](http://react-query.tanstack.com/) ### Dark Mode - I used [Tailwind CSS](https://tailwindcss.com)'s inbuilt dark mode support to achieve this. - Check [this pr](https://github.com/tailwindlabs/tailwindcss/pull/2279) 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](https://nordicapis.com/10-free-to-use-cors-proxies/). But, the only one that worked for me then was [allOrigins](https://allorigins.win/). ### 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 the` Load 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](https://tailwindcss.com/docs/animation) 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](https://github.com/pbteja1998/github-jobs-api) ### What's Next The next article will be part of the [My Review of Kent C. Dodds's EpicReact.Dev](https://hashnode.com/series/epic-react-ckfv4gidh08efu9s1408v8tgp) series. It will be the fifth article in the series. To know more, go to the link below. %[https://hashnode.com/series/epic-react-ckfv4gidh08efu9s1408v8tgp] #### Until Next Time 👋 --- You might also like the following articles that I wrote: - [React Fundamentals: Understanding JSX](https://blog.bhanuteja.dev/react-fundamentals-understanding-jsx) - [Introduction to React Raw APIs](https://blog.bhanuteja.dev/epic-react-react-fundamentals-part-1) - [How I Gave A Modern Look For HackerNews Feed](https://blog.bhanuteja.dev/how-i-gave-a-modern-look-for-hackernews-feed) - [Javascript You Need To Know For React](https://blog.bhanuteja.dev/epic-react-javascript-you-need-to-know-for-react) - [Create Your Own Super Simple URL Shortener](https://blog.bhanuteja.dev/create-your-own-super-simple-url-shortener) - [Why you should start using HSL color format](https://blog.bhanuteja.dev/why-you-should-start-using-hsl-color-format) - [Embed Youtube Videos into Your Markdown Editor](https://blog.bhanuteja.dev/embed-youtube-videos-into-your-markdown-editor) - [Babel Plugin To Remove Console Logs In Production](https://blog.bhanuteja.dev/babel-plugin-to-remove-console-logs-in-production) - [Create Custom Markdown Parser](https://blog.bhanuteja.dev/create-custom-markdown-parser) --- 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](https://blog.bhanuteja.dev) by hitting the **Subscribe** button at the top of the page. You can also follow me on Twitter [@pbteja1998](https://twitter.com/pbteja1998). %%[newsletter]