TAN PHAM
developingdesigning
Full-stack application// 2025

Japan International School

Developed and maintained the Japan International School website using Next.js, Tailwind CSS, and shadcn/ui, delivering a clean, modern, and responsive interface. Built a self-hosted Strapi CMS and deployed the full system using Docker on a VPS with a self-hosted PostgreSQL database. Set up an optimized Nginx web server, implemented automated backup scripts, and performed ongoing maintenance, including system cleanups and performance tuning. Ensured a stable, secure, and scalable infrastructure for both content management and daily site operations.

Overview

The primary directive was to create a modern, high-performance web presence for an international school while strictly adhering to a data sovereignty mandate: no sensitive data could be stored on third-party cloud services. This requirement necessitated a complex self-hosted infrastructure, further constrained by limited server hardware (2GB RAM) and the need to support seamless bilingual (English/Japanese) content delivery.

Strategic Technical Decisions

1. Next.js (Front-End Framework)

  • Decision Rationale: Chosen for its hybrid rendering capabilities, specifically Static Site Generation (SSG), which decouples the front-end speed from the back-end’s resource usage. Utilized React for a component-driven, modern, and maintainable user interface.
  • Strategic Value Highlighted: Performance Efficiency: Achieves high speed and SEO scores while minimizing server-side load on resource-constrained hardware.

2. Strapi & PostgreSQL (CMS & Database)

  • Decision Rationale: Self-hosted and containerized to meet the client's strict data sovereignty requirements, avoiding vendor lock-in and third-party data storage. PostgreSQL was selected for its proven stability and ACID compliance.
  • Strategic Value Highlighted: Data Sovereignty: Directly addresses a critical client security and compliance mandate by maintaining full control over all database assets.

3. Tailwind CSS & shadcn/ui (Styling)

  • Decision Rationale: Used for rapid, consistent component development and delivering a clean, modern, and highly responsive UI that adapts flawlessly to different devices, essential for parent/guardian communication.
  • Strategic Value Highlighted: Development Velocity & UX: Ensures a modern, consistent, and fast mobile user experience.

Key Contributions & Infrastructure Delivery

  • Full-Stack Development: Delivered a bilingual (English/Japanese), fully responsive school website using Next.js, leveraging static paths for core content to achieve maximum loading speed.
  • Secure Self-Hosting with Docker: Orchestrated the entire system—Next.js, Strapi CMS, and PostgreSQL—using Docker on a Virtual Private Server (VPS). This ensured isolated, reproducible environments despite the hardware limitations.
  • Infrastructure Automation: Configured Nginx for optimized web serving and caching. Designed and implemented automated, self-hosted backup scripts and a routine maintenance plan (including system cleanups and performance tuning) to guarantee data integrity and system stability against the risks of self-hosting.
  • Integrated Google Services: Secured and integrated Google Calendar using a Service Account to embed real-time school events. This integration provided essential, dynamically updated information without exposing private API keys or sensitive data.
  • CMS Functionality Extension: Configured Strapi to handle advanced internal searches and securely manage the storage of administrative application files, extending the CMS's utility beyond basic content.

Measured Outcome

The project was delivered on time and established a stable, secure foundation:

  • Performance: Achieved over 90 on Google Lighthouse for performance and accessibility, ensuring maximum visibility and user satisfaction.
  • Stability: Maintained a stable, secure, and easily backed-up infrastructure running efficiently within the 2GB memory limit.
  • Security: Successfully implemented the zero-third-party-data mandate, providing the client with full confidence and ownership over their data.

Similar Projects

Full-stack application

Australia Investment Capital System

Developed the Ausbiz Capital platform using Next.js with a fully content-managed architecture powered by Sanity CMS and Supabase. Implemented data ingestion pipelines to process stock analysis files delivered via FTP as Excel spreadsheets, converting and storing them efficiently in Supabase for fast querying and display. Built modular React components, optimized performance, and ensured a seamless flow between CMS-driven content and dynamic financial data. Contributed to creating a reliable, scalable foundation for real-time investment insights and improved editorial workflows.

Full-stack application

Nutrition and dish builder web application

Developed and maintained the Macrofriendly Food platform using React and Next.js, implementing a scalable frontend architecture with dynamic routing and server-side rendering. Integrated a REST API powered by Strapi to manage application content and connected to WordPress endpoints to fetch orders, nutrition data, and dish information. Built and deployed the full application on DigitalOcean, using Docker and Docker Compose to containerize services and ensure a consistent, reliable production environment. Contributed to improving performance, content workflows, and overall user experience through efficient API design and maintainable, modular UI components.

Web application

Web3 Landing Page Web Application

Developed key features for Toshimon, a Web3-enabled application built with React and Next.js, focusing on performance, SEO, and a smooth user experience. Implemented a statically generated architecture to ensure fast load times and reliable delivery across devices. Contributed to integrating blockchain interaction flows, creating modular UI components, and optimizing site structure for search visibility and scalability.