Job listings with filtering using Next.js as a learning project

In this challenge, my main goal was to learn and work with multiple technologies I've been wanting to learn for a while. I learned/used the following technologies:

• Framework: Next.js
• Styling: Styled Components
• State Management: Redux Toolkit with Thunks (async reducers)
• API Response Validation: Zod
• Component & E2E testing: Cypress
• Layout Animation: Framer Motion

I learned many new things while setting up different parts of the project and working with these technologies (like Redux Toolkit using Immer under the hood for keeping the state immutable while allowing for mutable state update logic) and I have written multiple blog posts about what I thought would be useful to others as well as myself in the future:

• Preventing the Layout Shift Caused by Scrollbars
• Using Styled-Components with Next.js v13 (TypeScript)
• Testing the Redux Store using Cypress in Next.js (TypeScript)

I look forward to learning and working with RTK Query which is based on Thunks in a future project.

P.S. For the data, I set up a Next.js API endpoint and fetched the data from it. I've also modified the CORS headers so you can use it in your project as well if you want to practice with data fetching:

• API Endpoint: https://joblistings-rashidshamloo.vercel.app/api