PRODUCT ENGINEERING

APPA

Official website for a private healthcare academy Next.js SSG on cPanel.

YEAR

2025

ROLE

Designed • Developed • Shipped

STACK

Next.jsReactTypeScriptTailwind CSSFramer MotioncPanel

01/PROBLEM → SOLUTION

02/SYSTEM ARCHITECTURE

How the system fits together

  1. Prospective Student
  2. Next.js Application
  3. Contact Form
  4. Next.js API Route
  5. SMTP / Email Service
  6. Academy Administration
DRAG / SWIPE TO PAN DIAGRAM↔
Prospective StudentBROWSERcPanel Web ServerHTTPS / HOSTINGNext.js ApplicationSTATIC / SSR PAGESUI ComponentsREACTTailwind CSSRESPONSIVE STYLINGFramer MotionINTERACTIVE ANIMATIONSContact FormUI COMPONENTNext.js API RouteFORM PROCESSINGSMTP / Email ServiceLEAD DELIVERYAcademy AdministrationEMAIL INBOX

Drag to pan or Hover to trace or Click to inspect

03/KEY ENGINEERING DECISIONS

Static Pre-rendering

SSG serves prebuilt HTML, so program and admission pages load without client-side render work.

API-Routed Forms

Contact submissions pass through a Next.js API route for validation before SMTP dispatch.

cPanel Hosting

Deployed on cPanel HTTPS hosting to keep the academy’s stack simple and self-managed.

04/IMPACT & TAKEAWAYS

Deployed in Production. Live and maintained at appa.ma since 2025.

Primary Digital Front. Serves as the academy’s main touchpoint for prospective students and families.

SEO & Accessibility. Built around SEO, accessibility, and responsive design per the brief.