AirOut — Respiratory & Wellness Platform
The Architecture
AirOut operates at the intersection of respiratory health and emotional wellness — a space where clinical precision and empathetic UX must coexist. The platform needed to serve two distinct user types simultaneously: patients seeking guided self-care tools, and clinicians needing a professional scheduling and profile layer.
The architecture decision that defined the entire project was the decoupled frontend-backend split. The Next.js (TSX) frontend and the NestJS backend run as independent services — communicating via a typed REST API. This separation allowed each layer to scale, deploy, and be maintained independently. The NestJS backend handles authentication (JWT-based), doctor profile management, appointment CRUD, symptom log persistence, and care plan delivery. The Next.js frontend consumes these via API routes, keeping the client lean and fast.
Doctor discovery was built as a search-and-filter system — users can locate verified lung specialists by specialty, availability, and location. Each specialist has a structured profile page with credentials, availability slots, and the ability to book directly. Appointment state is managed server-side in the NestJS layer with real-time slot conflict prevention.
The breathing and wellness session module required careful UX architecture — sessions are progressive, gamified with subtle engagement mechanics, and trackable over time. Symptom logging is structured (not free-text) to allow pattern detection and care plan alignment.
Frontend performance was maintained via Tailwind CSS utility-first styling — zero runtime CSS overhead — and Next.js App Router for granular loading and streaming. The health data sensitivity meant all API communication was secured with HTTPS and role-based access control enforced at the NestJS guard layer.
Strategic Methodology
Architecture-first. The decoupled NestJS + Next.js split was the strategic anchor — it gave the client a backend that could eventually power a mobile app without rebuilding the API. Frontend was designed patient-first: every flow (discovery → booking → session → tracking) was mapped as a user journey before a single component was written. Clinical data was treated as a first-class concern — typed DTOs, validated inputs, and role-based guards from day one.
Engineering Challenges
- Designing a decoupled architecture where the Next.js frontend and NestJS backend are independently deployable — including handling CORS, environment-specific API base URLs, and JWT token flow across the boundary.
- Building real-time appointment slot conflict prevention on the NestJS side — concurrent booking attempts for the same doctor slot required atomic DB operations to avoid double-booking without a WebSocket layer.
- Structured symptom tracking with enough flexibility to support multiple respiratory conditions (asthma, COPD, anxiety-linked breathing) while keeping the UI non-clinical and approachable for non-medical users.
- Implementing role-based access control (RBAC) in NestJS guards to differentiate patient, doctor, and admin permissions — all within a single API surface without route proliferation.
- Delivering gamified breathing sessions that feel progressive and engaging without introducing JS-heavy animation libraries that would compromise Lighthouse performance scores on a health platform.
Project Impact
"Engineered a production health-tech platform from the ground up — decoupled frontend and backend, real-time doctor discovery, appointment booking, and guided breathing experiences that bridge clinical care with emotional wellness."
Core Arsenal
Technical Log.
A high-fidelity breakdown of the build's architectural achievements and performance markers.
Synthesis
"Built a production health-tech platform — Next.js TSX frontend decoupled from a NestJS REST API backend with guided sessions, verified doctor discovery, appointment booking, symptom tracking, and care plans for respiratory and mental wellness users."
Hard Evidence
First project in the portfolio with a fully decoupled frontend-backend architecture — Next.js on Vercel, NestJS as a standalone REST API service.
Role-based access control (RBAC) implemented at the NestJS guard layer — patients, doctors, and admins operate on the same API with zero route duplication.
Appointment booking engine with server-side slot conflict prevention — concurrent requests handled atomically to eliminate double-booking.
Symptom tracking module structured as typed, condition-aware forms — enabling pattern detection and alignment with doctor-issued care plans.
Gamified breathing sessions designed for retention — progressive difficulty, session history, and subtle engagement mechanics without heavy animation libraries.