Landmark Technology DevOps Demo

A comprehensive DevOps teaching platform demonstrating modern containerization, orchestration, and CI/CD practices with a beautiful 1970s retro-futurist design.

Features

Beautiful Web Interface: 1970s retro-futurist design with burnt orange gradient
Message Board: Interactive data entry with real database persistence
State Indicator: Visual demonstration of ephemeral vs. persistent storage
Complete DevOps Stack: Docker, Kubernetes, CI/CD, Terraform

Technology Stack

Frontend: React 19, Tailwind CSS 4, TypeScript
Backend: Express 4, tRPC 11, Node.js 22
Database: MySQL 8.0
Testing: Vitest
Build Tool: Vite, esbuild
Package Manager: npm

Prerequisites

Before getting started, ensure you have the following installed:

Node.js 18+ - Download from nodejs.org (npm comes with Node.js)
Docker & Docker Compose (optional, for containerization topics)
MySQL 8.0 (optional, for local database without Docker)

Installation & Setup

Step 1: Clone and Install Dependencies

# Clone the repository
git clone https://github.com/yourusername/landmark-devops-demo.git
cd landmark-devops-demo

# Install dependencies with npm
npm install

Step 2: Configure Environment Variables

# Copy the example environment file
cp .env.example .env

# Edit .env with your values (optional for local development)
# Default values are pre-configured for local development

The default .env includes:

NODE_ENV=development - Development environment
DATABASE_URL=mysql://landmark:landmark123@localhost:3306/landmark_devops - Local MySQL connection

Build Instructions

Development Build

For local development with hot module reloading:

# Start the development server
npm run dev

The application will start on http://localhost:3000 with automatic reload on file changes.

Production Build

To create an optimized production build:

# Build the application
npm run build

# Start the production server
npm run start

The production build includes:

Optimized React frontend bundled with Vite
Compiled Express backend with esbuild
Tree-shaking and minification
Output in dist/ directory

Build Process Explained

The build process consists of two stages:

Frontend Build (Vite)
- Compiles React components
- Bundles CSS with Tailwind
- Optimizes JavaScript
- Output: dist/client/
Backend Build (esbuild)
- Compiles TypeScript to JavaScript
- Bundles dependencies
- Creates standalone server
- Output: dist/index.js

Testing

Run All Tests

# Run test suite with Vitest
npm test

Run Tests in Watch Mode

# Watch for file changes and re-run tests
npm test -- --watch

Run Specific Test File

# Run tests for a specific file
npm test -- server/auth.logout.test.ts

Test Coverage

# Generate coverage report
npm test -- --coverage

Example Test File

The project includes an example test in server/auth.logout.test.ts:

import { describe, expect, it } from "vitest";
import { appRouter } from "./routers";
import { COOKIE_NAME } from "../shared/const";

describe("auth.logout", () => {
  it("clears the session cookie and reports success", async () => {
    // Test implementation
  });
});

Database Setup

Local MySQL Setup (Without Docker)

If you prefer to run MySQL locally without Docker:

# Install MySQL (macOS with Homebrew)
brew install mysql

# Start MySQL service
brew services start mysql

# Create database and user
mysql -u root -e "CREATE DATABASE landmark_devops;"
mysql -u root -e "CREATE USER 'landmark'@'localhost' IDENTIFIED BY 'landmark123';"
mysql -u root -e "GRANT ALL PRIVILEGES ON landmark_devops.* TO 'landmark'@'localhost';"
mysql -u root -e "FLUSH PRIVILEGES;"

# Update DATABASE_URL in .env
DATABASE_URL=mysql://landmark:landmark123@localhost:3306/landmark_devops

Docker MySQL Setup

Using Docker Compose for database:

# Start only the database service
docker-compose up db

# In another terminal, run the application
npm run dev

Running the Application

Development Mode

# Terminal 1: Start the development server
npm run dev

# Terminal 2 (optional): Start database with Docker
docker-compose up db

Access the application at http://localhost:3000

Production Mode

# Build the application
npm run build

# Start the production server
npm run start

Type Checking

Verify TypeScript types without building:

# Run TypeScript type checker
npm run check

Code Formatting

Format code with Prettier:

# Format all files
npm run format

Project Structure

landmark-devops-demo/
├── client/                      # React frontend
│   ├── src/
│   │   ├── pages/              # Page components
│   │   │   ├── Home.tsx        # Landing page
│   │   │   └── MessageBoard.tsx # Message board
│   │   ├── components/         # Reusable UI components
│   │   ├── lib/                # Utilities and helpers
│   │   ├── App.tsx             # Main application
│   │   ├── main.tsx            # React entry point
│   │   └── index.css           # Global styles
│   ├── index.html              # HTML template
│   └── public/                 # Static assets
├── server/                      # Express backend
│   ├── routers.ts              # tRPC procedure definitions
│   ├── db.ts                   # Database helpers
│   ├── auth.logout.test.ts     # Example test
│   └── _core/                  # Framework internals
├── drizzle/                     # Database schema
│   └── schema.ts               # Table definitions
├── docker/                      # Docker documentation
│   └── README.md               # Docker guide
├── k8s/                         # Kubernetes manifests
│   ├── 01-namespace.yaml
│   ├── 02-configmap-secret.yaml
│   ├── 03-deployment.yaml
│   ├── 04-service.yaml
│   ├── 05-statefulset.yaml
│   └── README.md
├── .github/workflows/           # GitHub Actions
│   ├── ci-cd.yml
│   └── README.md
├── .circleci/                   # CircleCI
│   └── config.yml
├── terraform/                   # Infrastructure as Code
│   ├── main.tf
│   ├── variables.tf
│   ├── outputs.tf
│   └── README.md
├── Dockerfile                   # Container image
├── docker-compose.yml           # Multi-container setup
├── Jenkinsfile                  # Jenkins pipeline
├── .env.example                 # Environment variables
├── package.json                 # Dependencies
├── tsconfig.json                # TypeScript config
├── vite.config.ts               # Vite config
└── README.md                    # This file

Docker - Independent Topic Teaching

The Docker setup supports teaching Docker as separate topics:

Topic 1: Basic Docker (Dockerfile Only)

Learn containerization with a simple Dockerfile:

# Build the Docker image
docker build -t landmark-devops:latest .

# Run the container (requires external MySQL)
docker run -p 3000:3000 \
  -e DATABASE_URL=mysql://landmark:landmark123@host.docker.internal:3306/landmark_devops \
  landmark-devops:latest

# Access the application
# http://localhost:3000

Teaching Points:

Image layers and caching
Dockerfile syntax
Container ports and networking
Environment variables
Running containers

Topic 2: Docker Compose (Multi-Container Orchestration)

Learn container orchestration with Docker Compose:

# Start all services (app + database)
docker-compose up

# View running services
docker-compose ps

# View logs
docker-compose logs -f

# Stop services
docker-compose down

Teaching Points:

Service orchestration
Container networking
Volume management
Environment configuration
Service dependencies
Multi-container applications

Topic 3: Docker Image Optimization

Learn image optimization techniques:

# Check image size
docker images landmark-devops:latest

# View image layers
docker history landmark-devops:latest

# Build with BuildKit for better caching
DOCKER_BUILDKIT=1 docker build -t landmark-devops:latest .

Kubernetes Deployment

Deploy to Kubernetes cluster:

# Apply all Kubernetes manifests
kubectl apply -f k8s/

# Verify deployment
kubectl get pods -n landmark-devops

# Port forward to access
kubectl port-forward svc/landmark-app-lb 3000:80 -n landmark-devops

# Access the application
# http://localhost:3000

See k8s/README.md for detailed Kubernetes instructions.

CI/CD Pipelines

Three CI/CD implementations are provided:

GitHub Actions (.github/workflows/ci-cd.yml)
CircleCI (.circleci/config.yml)
Jenkins (Jenkinsfile)

See .github/workflows/README.md for detailed pipeline instructions.

Infrastructure as Code

Deploy to AWS with Terraform:

cd terraform
terraform init
terraform plan
terraform apply

See terraform/README.md for detailed Terraform instructions.

Troubleshooting

Port Already in Use

# Find process using port 3000
lsof -i :3000

# Use different port
PORT= 3001

Database Connection Failed

# Check if MySQL is running
docker-compose ps

# Start database
docker-compose up db

# Verify connection
mysql -u landmark -p -h localhost landmark_devops

Build Failures

# Clear cache and reinstall
rm -rf node_modules npm run-lock.yaml
npm run install

# Check TypeScript errors
npm run check

# Run build again
npm run build

Tests Failing

# Run tests with verbose output
npm run test -- --reporter=verbose

# Run specific test file
npm run test server/auth.logout.test.ts

DevOps Topics Covered

Topic	File/Directory	Teaching Focus
Docker	`Dockerfile`, `docker-compose.yml`	Containerization, image building, multi-container apps
Kubernetes	`k8s/`	Orchestration, deployments, services, state management
GitHub Actions	`.github/workflows/ci-cd.yml`	CI/CD automation, GitHub integration
CircleCI	`.circleci/config.yml`	CI/CD pipelines, workflow orchestration
Jenkins	`Jenkinsfile`	Declarative pipelines, job orchestration
Terraform	`terraform/`	Infrastructure as code, AWS provisioning
Node.js	`server/`, `package.json`	Backend development, Express, tRPC
React	`client/`, `vite.config.ts`	Frontend development, component architecture
Database	`drizzle/schema.ts`	Schema design, ORM, migrations

Teaching Workflow

Lesson 1: Local Development

Clone repository
Install dependencies (npm run install)
Start development server (npm run dev)
Explore the application
Run tests (npm run test)

Lesson 2: Docker Basics

Review Dockerfile
Build image (docker build -t landmark-devops:latest .)
Run container (docker run -p 3000:3000 landmark-devops:latest)
Discuss image layers and caching

Lesson 3: Docker Compose

Review docker-compose.yml
Start services (docker-compose up)
Explore multi-container networking
Discuss service dependencies

Lesson 4: Kubernetes

Review Kubernetes manifests
Deploy to cluster (kubectl apply -f k8s/)
Explore pods, services, deployments
Discuss state persistence

Lesson 5: CI/CD Pipelines

Review pipeline configuration
Trigger pipeline (push to main)
Monitor build stages
Discuss automation benefits

Lesson 6: Infrastructure as Code

Review Terraform configuration
Plan deployment (terraform plan)
Deploy infrastructure (terraform apply)
Discuss infrastructure automation

License

MIT

Support

For questions or issues, refer to the specific topic README files:

Docker: docker/README.md
Kubernetes: k8s/README.md
CI/CD: .github/workflows/README.md
Terraform: terraform/README.md

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.circleci		.circleci
cicd		cicd
client		client
docker		docker
drizzle		drizzle
k8s		k8s
patches		patches
server		server
shared		shared
terraform		terraform
.dockerignore		.dockerignore
.gitignore		.gitignore
.gitkeep		.gitkeep
.prettierignore		.prettierignore
.prettierrc		.prettierrc
Dockerfile		Dockerfile
Jenkinsfile		Jenkinsfile
README.md		README.md
components.json		components.json
docker-compose.yml		docker-compose.yml
drizzle.config.ts		drizzle.config.ts
package-lock.json		package-lock.json
package.json		package.json
todo.md		todo.md
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Folders and files

Latest commit

History

Repository files navigation

Landmark Technology DevOps Demo

Features

Technology Stack

Prerequisites

Installation & Setup

Step 1: Clone and Install Dependencies

Step 2: Configure Environment Variables

Build Instructions

Development Build

Production Build

Build Process Explained

Testing

Run All Tests

Run Tests in Watch Mode

Run Specific Test File

Test Coverage

Example Test File

Database Setup

Local MySQL Setup (Without Docker)

Docker MySQL Setup

Running the Application

Development Mode

Production Mode

Type Checking

Code Formatting

Project Structure

Docker - Independent Topic Teaching

Topic 1: Basic Docker (Dockerfile Only)

Topic 2: Docker Compose (Multi-Container Orchestration)

Topic 3: Docker Image Optimization

Kubernetes Deployment

CI/CD Pipelines

Infrastructure as Code

Troubleshooting

Port Already in Use

Database Connection Failed

Build Failures

Tests Failing

DevOps Topics Covered

Teaching Workflow

Lesson 1: Local Development

Lesson 2: Docker Basics

Lesson 3: Docker Compose

Lesson 4: Kubernetes

Lesson 5: CI/CD Pipelines

Lesson 6: Infrastructure as Code

License

Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages