An open API service indexing awesome lists of open source software.

https://github.com/jakwakwa/fm-githubjobsapi-challenge

A Frontend Mentor challenge I completed to build out a job board using data file [ previously the GitHub Jobs API ] and get it looking as close to the design as possible.
https://github.com/jakwakwa/fm-githubjobsapi-challenge

challenge challenge-project frontend-mentor job-board practice

Last synced: 7 months ago
JSON representation

A Frontend Mentor challenge I completed to build out a job board using data file [ previously the GitHub Jobs API ] and get it looking as close to the design as possible.

Awesome Lists containing this project

README

          

# Frontend Mentor - GitHub Jobs API

![Design preview for the GitHub Jobs API coding challenge](./preview.jpg)

## Getting Started

IMPORTANT: use node version: v15.14.0

install packages: `npm install`

run local dev host: `npm run dev`

## Welcome! 👋

I built this project as a solution from the [Frontend Mentor](https://www.frontendmentor.io) - [GITHUB API challenge.](https://www.frontendmentor.io/challenges/github-jobs-api-93L-NL6rP)

## Noteworthy Frontend Technology Used

- ReactJS
- Material UI
- Styled Components

## Live Solution of completed challenge:

[view here - hosted with Netlify](https://loving-panini-64028a.netlify.app/)

## The challenge Brief I received

Your challenge is to build out this jobs board using the [GitHub Jobs API](https://jobs.github.com/api) data and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- View all jobs currently live on the GitHub Jobs API
- Be able to click a job from the index page so that they can read more information and apply for the job
- **Bonus**: Have the correct color scheme chosen for them based on their computer preferences. _Hint_: Research `prefers-color-scheme` in CSS.

## Community Sponsors

A massive thank you to our community sponsors!

- [Hack for NF](https://bit.ly/fem-bemyapp) is a perfect opportunity to write code, contribute to an amazing cause, meet others, and have fun all at the same time! The hackathon starts October 2nd and runs through to November 13th. Datasets, mentor support, and input from patients are all provided. There's also \$40K USD in prizes and grants up for grabs!
- [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into!
- [Zero to Mastery](https://bit.ly/fem-ztm) is an incredible learning resource for all things web development. Led by Andrei Neagoie, the courses are really high-quality content and cover a wide range of in-demand skills.