Quiz App (React + SCSS + Framer.Motion + Express.js)

What are you most proud of, and what would you do differently next time?

Hi everyone 👋,

Thanks for having a look at my project. I had a lot of fun with this one. 😁

As I'm currently learning and practicing React, my goal with this specific project was to practice using the 'useReducer' hook in React as opposed to using multiple useState hooks to manage the project. I was quite blown away with how much simpler the useReducer hook actually made creating a project of this type.

What I'm most proud of is seeing my progress with React in general, and how much more comfortable with the library, at least with a project of this scale. I also made the decision to try and create a 'mock api' with the json data provided, for which I used Express.js to serve the data. It wasn't necessary at all, but I decided to challenge myself to see if I could actually get it to work.

Overall, I'm proud that I could try to start working out of my comfort zone and expose myself to unfamiliar territory and try to actually make it work.

What challenges did you encounter, and how did you overcome them?

I didn't really have much of an issue getting the reducer to function. For the most part, it was purely troubleshooting natural errors that would occur during the dev process.

The biggest challenge I encountered was setting up the 'mock-api'. Initially I made use of 'json-server' to serve the data as a mock-api on my local, but realised this would not work the moment I pushed my project to Vercel.

I then attempted to setup an Express.js server in the same project directory (separated into frontend and backend) which again, worked on my local, but the moment I pushed the project to Vercel, the server would not run.

After a lot of backand forth, I eventually resorted to separating the frontend and the backend and hosted the backend on Vercel as it's own project, from which I could then use the Vercel project as an API to retrieve my data.

This was a huge headache, and I didn't really know how to troubleshoot issues I was experiencing but I learned a lot, even if the Express.js implementation was minor. 🫠

What specific areas of your project would you like help with?

I'm completely open to any and all feedback. Let me know if anything is broken or if there's something you would have done to simplify a specific process. 😊

Thanks again for having a look at my project. 😁