Frontend Quiz is a interactive quiz application that test and enhance knowledge in key areas of frontend development, focusing on JavaScript, CSS, HTML, and accessibility principles.
Built With
- React
- TypeScript
- TailwindCSS
- Vite
- React Router
- Node.js
- Express.js
- Postgres
What I Learned
Routing
This was my first project using the new React Router API. I liked the API design of constructing your routes in the top level file. I did have to handle dynamic routes and load different questions based on the route. For example, the route was setup like /quiz/:quizId and I would get the quizId param and I would use the loader function to access the param and retrieve the questions from the db.
Accessibility
I wanted to make sure that the application was accessible to keyboard users. So, I had the answers in the form of a radio group. This would allow the user to toggle through the answers using the arrow keys. I did have to modify the radio button to look like an answer and not the native presentation. I also, placed the radio elements within a form element, so that the user can select an answer by hitting the enter key. In other words, this application can be utilized without a pointer device like a mouse.
Backend
For my backend, I used Express.js and Node.js to setup my server and I used node-postgres to communicate with the DB. For my routes, I used validation middleware using ZOD to ensure that the correct format was being sent. Any routes not defined were resolved with a error handler middleware that resulted in a 404. I also used helmet, just to provide some security to my API.
Isolated Monorepo
For this project, I decided to seperate the frontend and backend in their seperate folders. This was a little confusing because I had to figure out how to host this project. What I was going to do initially was host the two parts on a single server and use some proxy to communicate between the two. However, I decided to host the backend on Railway and the frontend on Vercel. I think this is a good choice because my db is also hosted on Railway, so the backend and the server are in close proximity. And with Vercel, I can take advantage of their edge deployments.