Bilingual Japan International School Platform

What constraints shaped the school platform?

The school needed English and Japanese content, a CMS for non-technical staff, and control over sensitive administrative data. The production server had only 2GB of RAM, so the architecture also had to keep runtime memory use predictable.

The data rule applied to sensitive and administrative records. Public event information could still come from Google Calendar through a service account, while private files and CMS data remained on infrastructure controlled by the school.

How did I build the bilingual frontend?

I built the public website with Next.js, React, Tailwind CSS, and shadcn/ui. Core content routes used static generation so most page delivery did not depend on a live CMS request. This reduced load on the small server and kept public pages available if the CMS was temporarily busy.

The content model supported English and Japanese fields without duplicating the entire page structure. Shared React components rendered both languages while preserving consistent navigation, spacing, and responsive behavior.

How did self-hosting work on a 2GB VPS?

I containerized Next.js, Strapi, and PostgreSQL with Docker and placed Nginx in front of the application. Nginx handled web traffic and caching, while the containers kept application dependencies isolated.

Operating within 2GB required practical limits rather than theoretical capacity:

• static generation for public content;
• controlled container memory use;
• scheduled cleanup of unused Docker resources;
• database and uploaded-file backups;
• routine monitoring and maintenance.

I also configured Strapi for internal search and administrative file handling. Google Calendar events were fetched with a service account so credentials stayed on the server.

What results were measured?

At delivery, my Lighthouse checks recorded scores above 90 for performance and accessibility on the tested public pages. The complete application stack ran within the 2GB VPS limit, including Next.js, Strapi, PostgreSQL, and Nginx.

The most important outcome was operational: school staff could manage bilingual content, the public site remained inexpensive to host, and sensitive records stayed on the school-controlled system. The Lighthouse figures are delivery-time engineering measurements; they are not a guarantee for every page or future deployment.