This is my solution to the Job listings with filtering challenge on Frontend Mentor.
-
Link to Vanilla Solution
- Accessible HTML
- CSS Tailwind ❤️
- React.js with hooks
- GitHub action for automatically deploying project to GitHub pages.
- Responsive design
- 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
- Example:
- Testing with Cypress, also maybe add Cypress to CI with Github actions https://docs.cypress.io/guides/guides/continuous-integration.html#Setting-up-CI