What I Built
In high school, I built the website for the 134th Kinensai at Tokai Junior and Senior High School. It was a static site built with Nuxt 2 and Vuetify.
I asked an acquaintance for the design and started by placing the minimum announcements and social media links. I also added OGP, Twitter cards, and Google Analytics. Looking back, it is quite simple, but as my first website after having never touched web development, I think it turned out well.
What I Worked On
This was before generative AI existed, so I developed it with help from seniors and Google while knowing nothing about Nuxt, Vuetify, static generation, layout, OGP, or social embeds.
Layout, illustrations, and copy were handled by other members, and my role was to put them on the web. I received design requests and implemented them with Vuetify grids and cards. By today's standards, the component structure and CSS are rough, but at the time I thought publishing by the deadline mattered more than clean architecture.
Cloudflare Pages did not support SSR at the time, so I wrapped Google Forms as a contact form and placed it behind simple reCAPTCHA protection.
Surrounding Systems
Because COVID-19 was spreading at the time, the festival was held with full reservations. The reservation system used Vercel, Nuxt, and Vuetify, with Firebase Authentication and GCP IdP for auth. The backend used Azure Functions and Azure SQL Database, with Firebase Admin Java SDK performing bearer authentication.
QR codes were also tricky. The school did not have Wi-Fi that students could freely use, and it was hard to prepare always-connected devices, so each class received a tablet with entry information saved in a local DB. At the end of each day, the data was uploaded to Azure under an internet connection. Because of that, the QR codes apparently contained not only UUIDs but also MessagePack-encoded and encrypted information such as names and visitor types.
Those surrounding systems were mainly developed by a senior who was effectively my supervisor. I only helped with debugging, but having an excellent programmer nearby was a major source of motivation for me.
What Was Difficult Then
The high school festival website was built by somehow selecting a web person inside the executive committee and somehow producing a website. There was no specification document. We listened to many people, received help, and assembled the site little by little. I think I could handle it in a more organized way now, but at the time I was desperate just to ship something that worked. Even so, touching routing, static generation, responsive design, social embeds, and analytics in my first web project gave me a lot of confidence.
After Building It
Looking at it now, the implementation was not technically polished. Rather, there were many unorganized parts. Even so, the experience of building and publishing the official site for a school event ourselves had a major influence on my later development. Seeing classmates and visitors use a website I built taught me the reward of web development.
Link
kinensai.jp (this is the current website. It is different from the website I developed.)