React.js + TypeScript + Redux + Firebase | Job Listings with Filtering

Hi All!

Without further ado:

• The app is built with React.js and TypeScript.
• Styles are added using SCSS.
• Data is fetched from a Firebase database.
• React Redux is responsible for overall state management - there are two separate reducers for rendering the jobs list and handling filters.

Core functionalities description:

• Users can view animated loading components while the data is fetched from Firebase - to fully showcase it, the fetching function is embedded inside of a setTimeout() (I would not do it in a professional app).
• Users will receive an error message if the data fails to be loaded.
• Once the data is loaded, users can apply filters in three ways: a) by typing in a value in the input and pressing enter; b) browsing through available filters list and pressing enter; c) clicking on an available filter from the list.
• Users will receive an appropriate feedback if there are no filters that would match the provided value.
• Users will receive an appropriate feedback if there are no job listings that would match chosen filter rules.
• Users will receive an error if they are trying to submit an empty or incorrect value.
• It is impossible to submit two identical filters.
• Users can view optimal layout for the site, depending on their device's screen size.
• Users can custom focus and hover styles.
• The app is fully accessible - it is possible to move through the entire app using only keyboard and trigger the same events as with mouse.
• For better UI, I implemented a custom scrollbar.

As always, I'll be happy to hear any feedback or suggestions.

Happy Coding! 🎃👻