ALapina/Job-listings-with-filtering-React

Filtering with React, CSS Tailwind

🚚 Job listings with filtering - React

Welcome! 👋

This is my solution to the Job listings with filtering challenge on Frontend Mentor.

🔗 Live Link / Demo Link:

• https://alapina.github.io/Job-listings-with-filtering-React

• Link to Vanilla Solution

  • JS Vanilla version

🛠 Technologies Used:

• Accessible HTML
• CSS Tailwind ❤️
• React.js with hooks
• GitHub action for automatically deploying project to GitHub pages.
• Responsive design

📚 Challenging parts:

1. In data.json there is element logo which contains path to the local file with svg image. But it's local url path and react don't want to render svg image from local file. So my solution - put image folder in public folder, edit data.json (remove first dot in every url) and add process.env.PUBLIC_URL to create correct absolute path to the svg image.
   • Example:<img src={process.env.PUBLIC_URL + logo} />
   • https://create-react-app.dev/docs/using-the-public-folder/
   • Another option is how to solve the problem with displaying a local svg image in react: https://forum.freecodecamp.org/t/display-image-from-local-json-js-object-using-react/408351/7

🐢 Stuff I would like to add later:

• Testing with Cypress, also maybe add Cypress to CI with Github actions https://docs.cypress.io/guides/guides/continuous-integration.html#Setting-up-CI