Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/codewithalamin/job-listings-with-filtering

Filter jobs based on role, level, languages, and tools. Build with HTML, CSS, and Vanilla JavaScript.
https://github.com/codewithalamin/job-listings-with-filtering

codepapa360 css front-end-development frontend frontend-mentor html javascript job-listings job-listings-filter joblisting sass vanilla-javascript vite vitejs web-development

Last synced: 5 days ago
JSON representation

Filter jobs based on role, level, languages, and tools. Build with HTML, CSS, and Vanilla JavaScript.

Awesome Lists containing this project

README

        

# Job listings with filtering


Challenge from [Frontend Mentor](https://www.frontendmentor.io/challenges)

[🚀Live Demo](https://job-listings-with-filtering-alamin.vercel.app)
||
[💡Frontend Mentor](https://www.frontendmentor.io/solutions/job-listings-with-filtering-custom-retouch-Lv6k8-oauf)


![Status](https://img.shields.io/badge/Status-Completed-success)
![version](https://img.shields.io/github/package-json/v/CodeWithAlamin/job-listings-with-filtering)
![License](https://img.shields.io/badge/License-MIT-blue)


This app filters jobs by role, level, languages, and tools. It receives data from a local JSON file and manipulates it conditionally to provide the most relevant results. This project was a great way to practice filtering methods, and later upgrading it to TypeScript (starting from version 2.0.0) further enhanced type safety and maintainability.

![Screenshot](./screenshots/job-listings-with-filtering-preview-CodeWithAlamin.png)

## Key Features

Users should be able to:

- Filter job listings based on the categories
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page

## Built with

- TypeScript
- Sass
- HTML5
- Mobile-first workflow
- [Vite](https://vitejs.dev/) - A JavaScript module bundler and development server.

## Installation

- Clone this repo:

```sh
git clone https://github.com/CodeWithAlamin/Job-listings-with-filtering.git
```

- Install dependencies:

```sh
npm install
```

- Build command:

```sh
npm run build
```

- Live server:

```sh
npm start
```

## Author

👤 Alamin

- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)

Feel free to contact me with any questions or feedback!

## Acknowledgments

This project was inspired by the "IP Address Tracker" challenge from Frontend Mentor. Special thanks to Frontend Mentor for providing the design and specifications for this project.

## License

This project is licensed under the [MIT](https://github.com/CodeWithAlamin/Job-listings-with-filtering/blob/main/LICENSE.md) License - see the LICENSE file for details.

```

```