isabella232 / fe-dev-challenge-a

Frontend Dev Challenge A

Job listings with filtering

The challenge

Your challenge is to build out this job listing page 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 layout for the site in desktop and/or mobile resolutions
• See hover states for all interactive elements on the page
• Filter job listings based on the categories

Filtering

Option 1

Filter job listings based on the categories using the HTML data- attribute. In this option, you'd use the hardcoded content that already exists in the index.html file.

The categories are:

• Role: Frontend, Backend, Fullstack
• Level: Junior, Midweight, Senior
• Languages: Python, Ruby, JavaScript, HTML, CSS
• Tools: React, Sass, Vue, Django, RoR (Ruby on Rails)

So, if a job listing has the following categories Frontend, Junior, JavaScript, React your HTML data attributes would look like this data-role="frontend" data-level="junior" data-languages="javascript" data-tools="react".

Option 2

Use the data.json file to pull the data and then dynamically add the content.

To add a filter, the user needs to click on the tablets on the right-side of the listing on desktop or the bottom on mobile. For each filter added, only listings containing all selected filters should be returned.

Where to find everything

Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design. Implementing either design is fine.

The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

You will find all the required assets in the /images folder. The assets are already optimized.

There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.

Project requirements

Feel free to use any workflow, libraries, or frameworks that you feel comfortable with.

1. Create a fork of this repo on GitHub.
2. Create your application, implementing the features described above.
   • View the layout for the site in desktop and/or mobile resolutions
   • See hover states for all interactive elements on the page
   • Filter job listings based on the categories
3. Bonus points for:
   • Unit Tests
   • Responsive design
   • Hosting the app for preview
   • Thorough README doc
   • Well commented code
   • Good organization

Deploying your project

As mentioned above, there are many ways to host your project for free. Our recommend hosts are:

• GitHub Pages
• Vercel
• Netlify

You can host your site using one of these solutions or any other provider you trust. Read more about recommended and trusted hosts.

Create a custom README.md

We strongly recommend overwriting this README.md with a custom one. We've provided a template inside the README-template.md file in this starter code.

The template provides a guide for what to add. A custom README will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like.

Once you've added your information to the template, delete this file and rename the README-template.md file to README.md. That will make it show up as your repository's README file.

Submitting your solution

Provide your technical recruiter contact with a link to your fork or add any recommended reviewers to your fork.

Have fun building! 🚀