This is to share my experience of building a full-stack website in 2 months, back in 2022. This is neither a tutorial, nor a guide, but a mere journal of my work that I want to share with my fellow developers.

You can play around with the app, FE Quiz, here, or read its features here.

About

ITPEC FE is an exam on computer science knowledge. It is held twice a year and is in multiple-choice question format. I took the exam in 2022 and built a quiz app of the past exam questions while waiting for the exam results. I spent nearly 2 months designing, building, testing, and deploying the website, which became my first personal project with a significant real-world use case.

It serves over 1,500 questions from exams held between 2013 and 2022. Each question is also categorized into either of 9 chapters. Users can practice with random questions, questions from a particular exam, or questions that belong to particular chapters.

Tech Stack

• Design (UI, Database, System) - Figma, FigJam

• Frontend - TypeScript, JavaScript, React

• Backend - Java, SpringBoot

• Testing - Jest, JUnit

• Database - PostgreSQL

• Deployment - AWS (EC2, RDS), Digital Ocean, Vercel

Steps

1. Planning and Design

2. Data Collection

3. Backend APIs

4. Frontend Website

5. Deployment

Details

1. Planning and Design

First, I sketched the user flow and use cases of the application. Then, I listed the necessary API endpoints. Based on these, I modeled data entities with ER diagrams. Next, I designed the user interface. Finally, I drafted a schedule to collect data, build the backend and frontend, and deploy everything.

During the next steps, I had to adjust both the designs and the schedules several times, but these initial plans served as a roadmap throughout the entire project.

2. Data Collection

All past questions are publicly available on the ITPEC Website. However, they are exam question sheets in PDF format. I needed structured data to seed into my database and use them. So, I had to extract question/answer data from these PDF files.

My first idea was to convert the PDFs into .docx format, and then somehow extract the data. However, the resulting .docx files were sometimes inaccurate, and extracting data from those was not simple either. So, I decided to convert the PDFs to .txt format with the help of convert api.

Then, I coded file-iterating, string-manipulating Java programs to parse the .txt files and build a HashMap of questions and answers. It almost worked, but some characters with special encoding were not correctly displayed. I then tried BufferedReader and BufferedInputStreamReader (with FileReader and FileInputStreamReader) but to no avail. So, I switched to JavaScript and it worked much more smoothly.

After several hours of coding and debugging, I got a suite of programs that turned question sheet PDFs into JSON data. Using these, I jsonified all 19 question sheets.

Finally, I created a database and tables in PostgreSQL and seeded the data from the JSON files using JPA.

Backend

For the backend, I built RESTful APIs with Java (Spring Boot), along with Spring Data and Spring Security. Unit and integration tests were written with JUnit and Mockito.

The first two or three entities were the most challenging as I was trying to learn new technologies and use them at the same time. After getting the first few done, I could move forward with relative ease.

In a few days, I completed most of the endpoints. However, my schedule was off for quite a bit. I had other stuff to do besides the project, so I decided to focus on releasing the beta first. I skipped some features, especially those for the admin side of things. With that, I managed to complete all endpoints to make the core functionalities work.

For future development, I also wrote a simple API guide in Markdown. In hindsight, I think I should have used tools like Swagger to skip the manual work and allow for more flexibility.

After that came the security. Honestly, Spring Security was far from easy for me. I went through the official docs, as well as articles and videos all over the internet. Progress was really slow compared to other parts of the project. It took me around two weeks to learn Spring Security basics and implement a JWT-based authentication mechanism, but I got it functioning nicely in the end.

Frontend

I decided to build a single-page application with React. At that point, I had already developed a handful of React apps, so I decided to dig deeper into the React ecosystem while building this application.

For my learning, the official documentation has been very helpful and the articles on The Odin Project were also amazing. What I struggled with was testing. Although there are many guides and tutorials for React testing, there are so many variations of React and it is rarely straightforward to find the correct way to do things with a particular version of React.

In the end, thanks to projects like React Testing Library, I managed to build and test the frontend in a few weeks.

Deployment

First Deployment - 2022 November

Deploying the project was probably the most challenging part for me at that time. In retrospect, containerizing the programs with Docker might have made it simpler, but my knowledge of Docker was very limited at the time.

My first approach was to use a free trial of a cloud provider. I explored the options and chose Digital Ocean. I thought their UI was elegant and I had not used it yet, so I decided to give it a try.

Using its documentation and a few StackOverflow answers, I set up Apps, Droplets, and Databases. Configuration was simpler than that of AWS in my opinion, and I got my app up and running in a few hours.

After fine-tuning here and there, I released the beta version and invited a few friends to test-drive it. Apart from a few hiccups, it all seemed to work.

Around that time, exam results were out and I had to pay more attention to other things like relocating to Japan. As a result, I couldn't maintain the website for over a year and it was taken offline when the free trial of Digital Ocean expired.

Second Deployment - 2024 February

When I got to Japan and had some free time, I deployed the site once again. This time, I decided to go with the AWS free tier. However, the t2micro instance seemed unable to serve both my frontend and backend applications well.

Therefore, I run the backend APIs on an EC2 instance, and the frontend on Vercel. Some security configurations were required, but it worked with relative ease and FE Quiz was back online again.

Conclusion

Working on this project has been a very rewarding experience. Although there is still much room for improvement, I am glad to get the beta done. The code is not open-source yet, but, I would be happy to collaborate with anyone with a shared vision. Please feel free to reach out if the source code or the data set can be useful for you.

Thank you.