Capstone Project: Mastering the Modern Web Stack (HealthPulse Portal)

 

🚀 Capstone Project: Mastering the Modern Web Stack (HealthPulse Portal)

Welcome to the final frontier of your DevOps journey!

In our previous labs, we mastered the "Old Guard": Java, Maven, Jenkins, and Tomcat. But the industry is moving fast. Modern cloud-native applications are shifting toward leaner, faster, and more modular stacks.

Today, we are diving into the HealthPulse Portal—a production-grade React application designed to teach you how to bridge the gap between Frontend Development and High-End DevSecOps.

🏗️ The Core Architecture: The "Big Five"

Think of this stack as a high-performance engine. Each part has a specific role in ensuring the app is fast, secure, and easy to maintain.

1. Vite: The High-Speed Engine

What it replaces: Think of Vite as your Maven or Gradle, but optimized for the frontend.

The Difference: While Maven can be slow to compile, Vite is "instant." It uses Native ESM to start your development server in milliseconds.

DevOps Value: Faster build times in your CI/CD pipeline means faster feedback loops.

2. TypeScript: The Security Officer

What it is: JavaScript with "Rules."

The Difference: Vanilla JavaScript is like the Wild West. TypeScript is like Java—it requires you to define types (Strings, Integers, Objects).

DevOps Value: It catches bugs during the build phase before the code even reaches a SonarQube scan.

3. React 18: The Architect

What it is: A library for building UI "Components."

The Difference: Instead of one massive HTML file, everything is a small, reusable piece (e.g., LoginButton.tsx).

Analogy: If your app is a house, React is the blueprint that tells the browser how to assemble the rooms.

4. Tailwind CSS & shadcn/ui: The Styling Duo

Tailwind: Instead of writing massive .css files, you apply styles directly in your code (e.g., class="bg-blue-500").

shadcn/ui: This is your "Component Toolkit." Need a beautiful dashboard table? You don't build it from scratch; you pull it from shadcn.

🛠️ The DevOps Pipeline: How We Ship It

This is where your previous training shines. Even though the language has changed from Java to TypeScript, the Lifecycle remains the same.

The Multi-Stage Docker Build

In the Java world, we created a .war file. For HealthPulse, we use a Multi-Stage Dockerfile:

Stage 1 (Build): A Node.js container runs npm run build to create static files in a dist/ folder.

Stage 2 (Serve): We move those files into a lightweight Nginx container.

Why? This keeps our production image tiny and secure, drastically reducing the "attack surface."

Testing & Quality Gates

Vitest: Your new JUnit. It handles unit tests for your logic.

Playwright: This is "End-to-End" (E2E) testing. It opens a virtual browser and "clicks" buttons to ensure the user flow actually works.

SonarQube: Just like in Java, it scans your TypeScript for "Code Smells" and security vulnerabilities.

🔒 Infrastructure & Monitoring

Terraform: We use "Infrastructure as Code" (IaC) to build our AWS environment. No manual clicking!

Kubernetes (K3s): Our app lives in a cluster, managed by manifests you’ll find in the /kubernetes folder.

Datadog: Our "CCTV." If the /health endpoint returns an error, Datadog alerts us immediately.

🏁 Summary for Students

You aren't just building a website; you are building a production-grade, automated deployment machine.

• React/TS is the product.

• Vite/Docker is the packaging.

• Terraform/K8s is the warehouse.

• Jenkins/GitLab is the delivery truck.

Ready to start? Clone the repo, check the PROJECT-BRIEF.md, and run your first npm install. Let's build something great!