Files

Khang Duy LAI d91fb0d411 first commit

2026-03-11 15:44:38 +01:00

14 KiB

Raw Permalink Blame History

Birthday Roast Gallery Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Build a birthday roast gallery website with photos, Vietnamese captions, confetti animation, and Kubernetes deployment manifests.

Architecture: Vite + React frontend with Tailwind CSS, served by Nginx in a minimal Alpine container. Multi-stage Docker build for small image size. Kubernetes manifests for Traefik ingress deployment.

Tech Stack: React 18, Vite, Tailwind CSS, canvas-confetti, nginx:alpine, Kubernetes

Task 1: Project Scaffold and Dependencies

Files:

Create: package.json
Create: vite.config.js
Create: tailwind.config.js
Create: postcss.config.js
Create: index.html
Create: src/main.jsx
Create: src/index.css
Create: .gitignore

Step 1: Initialize npm project and install dependencies

npm init -y
npm install react react-dom
npm install -D vite @vitejs/plugin-react tailwindcss postcss autoprefixer canvas-confetti

Step 2: Create vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Step 3: Create tailwind.config.js

npx tailwindcss init -p

Then update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Create postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Step 5: Create index.html

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Happy Birthday Linh! 🎂</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Step 6: Create src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Step 7: Create src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 8: Create .gitignore

node_modules
dist
.DS_Store
*.local

Step 9: Update package.json scripts

Add these scripts to package.json:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

Step 10: Test the setup

npm run dev

Expected: Dev server starts at http://localhost:5173 (will show error since App.jsx doesn't exist yet - that's ok)

Step 11: Commit

git init
git add .
git commit -m "chore: initialize Vite + React + Tailwind project"

Task 2: Create RoastCard Component

Files:

Create: src/components/RoastCard.jsx

Step 1: Create the RoastCard component

export default function RoastCard({ image, caption }) {
  return (
    <div className="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 bg-white">
      <div className="aspect-square overflow-hidden">
        <img
          src={`/images/${image}`}
          alt={caption}
          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
        />
      </div>
      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
        <p className="text-white text-sm md:text-base font-medium text-center">
          {caption}
        </p>
      </div>
    </div>
  )
}

Step 2: Verify syntax

npm run build

Expected: Build succeeds (may warn about unused component)

Step 3: Commit

git add src/components/RoastCard.jsx
git commit -m "feat: add RoastCard component with hover effects"

Task 3: Create RoastGallery Component

Files:

Create: src/components/RoastGallery.jsx
Create: public/roasts.json

Step 1: Create sample roasts.json

[
  { "image": "placeholder-1.jpg", "caption": "Thêm ảnh vào thư mục public/images/ nhé! 😄" },
  { "image": "placeholder-2.jpg", "caption": "Chỉnh caption trong public/roasts.json" }
]

Step 2: Create RoastGallery component

import { useState, useEffect } from 'react'
import RoastCard from './RoastCard'

export default function RoastGallery() {
  const [roasts, setRoasts] = useState([])

  useEffect(() => {
    fetch('/roasts.json')
      .then((res) => res.json())
      .then((data) => setRoasts(data))
      .catch((err) => console.error('Failed to load roasts:', err))
  }, [])

  return (
    <section className="max-w-7xl mx-auto px-4 py-12">
      <h2 className="text-3xl font-bold text-center mb-8 text-gray-800">
        📸 Bộ Sưu Tập "Huyền Thoại"
      </h2>
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
        {roasts.map((roast, index) => (
          <RoastCard
            key={index}
            image={roast.image}
            caption={roast.caption}
          />
        ))}
      </div>
    </section>
  )
}

Step 3: Test the build

npm run build

Expected: Build succeeds

Step 4: Commit

git add src/components/RoastGallery.jsx public/roasts.json
git commit -m "feat: add RoastGallery component with JSON config"

Task 4: Create BirthdayBanner Component with Confetti

Files:

Create: src/components/BirthdayBanner.jsx

Step 1: Create BirthdayBanner component

import { useEffect } from 'react'
import confetti from 'canvas-confetti'

export default function BirthdayBanner({ name = "Linh" }) {
  useEffect(() => {
    // Fire confetti on load
    const duration = 3 * 1000
    const animationEnd = Date.now() + duration
    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }

    function randomInRange(min, max) {
      return Math.random() * (max - min) + min
    }

    const interval = setInterval(function() {
      const timeLeft = animationEnd - Date.now()

      if (timeLeft <= 0) {
        return clearInterval(interval)
      }

      const particleCount = 50 * (timeLeft / duration)
      confetti({
        ...defaults,
        particleCount,
        origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
      })
      confetti({
        ...defaults,
        particleCount,
        origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
      })
    }, 250)

    return () => clearInterval(interval)
  }, [])

  const handleClick = () => {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 }
    })
  }

  return (
    <header
      className="relative bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white py-16 md:py-24 cursor-pointer overflow-hidden"
      onClick={handleClick}
    >
      <div className="absolute inset-0 bg-black/10"></div>
      <div className="relative z-10 max-w-4xl mx-auto text-center px-4">
        <h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce">
          🎂 Happy birthday {name}! 🎉
        </h1>
        <p className="text-xl md:text-2xl font-medium opacity-90">
          Chúc mừng sinh nhật!
        </p>
        <p className="mt-4 text-lg opacity-75">
          (Click để ăn pháo bông vào mồm 🎊)
        </p>
      </div>
    </header>
  )
}

Step 2: Test the build

npm run build

Expected: Build succeeds

Step 3: Commit

git add src/components/BirthdayBanner.jsx
git commit -m "feat: add BirthdayBanner with confetti animation"

Task 5: Create App Component and Integrate

Files:

Create: src/App.jsx

Step 1: Create App.jsx

import BirthdayBanner from './components/BirthdayBanner'
import RoastGallery from './components/RoastGallery'

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100">
      <BirthdayBanner name="Linh" />
      <RoastGallery />
      <footer className="text-center py-8 text-gray-500">
        <p>Made with 💩</p>
      </footer>
    </div>
  )
}

export default App

Step 2: Test locally

npm run dev

Expected: Open http://localhost:5173, see banner with confetti, gallery placeholder

Step 3: Build for production

npm run build

Expected: Build succeeds, creates dist/ folder

Step 4: Commit

git add src/App.jsx
git commit -m "feat: integrate all components in App"

Task 6: Create Docker Configuration

Files:

Create: Dockerfile
Create: nginx.conf
Create: .dockerignore

Step 1: Create .dockerignore

node_modules
dist
.git
*.md
.env*

Step 2: Create nginx.conf

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_min_length 1000;

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # SPA fallback
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Step 3: Create Dockerfile

# Build stage
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Runtime stage
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Step 4: Test Docker build

docker build -t cmsn-b-linh:test .

Expected: Build succeeds

Step 5: Test Docker run

docker run -p 8080:80 cmsn-b-linh:test

Expected: Open http://localhost:8080, see the app working

Step 6: Commit

git add Dockerfile nginx.conf .dockerignore
git commit -m "feat: add multi-stage Docker build with Nginx"

Task 7: Create Kubernetes Manifests

Files:

Create: k8s/deployment.yaml
Create: k8s/service.yaml
Create: k8s/ingress.yaml

Step 1: Create k8s directory

mkdir -p k8s

Step 2: Create k8s/deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: cmsn-b-linh
  labels:
    app: cmsn-b-linh
spec:
  replicas: 1
  selector:
    matchLabels:
      app: cmsn-b-linh
  template:
    metadata:
      labels:
        app: cmsn-b-linh
    spec:
      containers:
        - name: nginx
          image: cmsn-b-linh:latest  # Change to your registry
          imagePullPolicy: IfNotPresent
          ports:
            - containerPort: 80
          resources:
            requests:
              cpu: "50m"
              memory: "64Mi"
            limits:
              cpu: "100m"
              memory: "128Mi"

Step 3: Create k8s/service.yaml

apiVersion: v1
kind: Service
metadata:
  name: cmsn-b-linh
spec:
  selector:
    app: cmsn-b-linh
  ports:
    - port: 80
      targetPort: 80
  type: ClusterIP

Step 4: Create k8s/ingress.yaml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: cmsn-b-linh
  annotations:
    traefik.ingress.kubernetes.io/router.entrypoints: web
spec:
  rules:
    - host: cmsn-b-linh.duylai.duckdns.org
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: cmsn-b-linh
                port:
                  number: 80

Step 5: Commit

git add k8s/
git commit -m "feat: add Kubernetes manifests for Traefik ingress"

Task 8: Add Placeholder Images and Final Testing

Files:

Create: public/images/.gitkeep

Step 1: Create images directory

mkdir -p public/images
touch public/images/.gitkeep

Step 2: Update roasts.json with instructions

[
  {
    "image": "your-photo-1.jpg",
    "caption": "Thêm ảnh vào thư mục public/images/ và chỉnh caption tại đây! 😄"
  },
  {
    "image": "your-photo-2.jpg",
    "caption": "Xóa placeholder này sau khi thêm ảnh thật"
  }
]

Step 3: Final build test

npm run build

Expected: Build succeeds

Step 4: Final Docker test

docker build -t cmsn-b-linh:test . && docker run -p 8080:80 cmsn-b-linh:test

Expected: App works at http://localhost:8080

Step 5: Commit

git add public/images/.gitkeep public/roasts.json
git commit -m "chore: add placeholder for images"

Task 9: Add README with Deployment Instructions

Files:

Create: README.md

Step 1: Create README.md

# 🎂 Birthday Roast Gallery

A fun birthday meme website for roasting your friends with their best (worst) moments.

## Development

```bash
npm install
npm run dev

Adding Photos

Add images to public/images/ folder
Update public/roasts.json with image filenames and Vietnamese captions
Rebuild and redeploy

Docker Build

docker build -t cmsn-b-linh:latest .

Kubernetes Deployment

Push image to your registry:

docker tag cmsn-b-linh:latest your-registry/cmsn-b-linh:latest
docker push your-registry/cmsn-b-linh:latest

Update k8s/deployment.yaml with your registry image
Apply manifests:

kubectl apply -f k8s/

Access at: https://cmsn-b-linh.duylai.duckdns.org


**Step 2: Commit**

```bash
git add README.md
git commit -m "docs: add README with deployment instructions"

Summary

Task	Description
1	Project scaffold with Vite + React + Tailwind
2	RoastCard component
3	RoastGallery component with JSON config
4	BirthdayBanner with confetti
5	App integration
6	Docker multi-stage build
7	Kubernetes manifests (Traefik)
8	Placeholder images and final testing
9	README documentation

Total: 9 tasks, ~20-30 minutes

14 KiB Raw Permalink Blame History

Birthday Roast Gallery Implementation Plan

Task 1: Project Scaffold and Dependencies

Task 2: Create RoastCard Component

Task 3: Create RoastGallery Component

Task 4: Create BirthdayBanner Component with Confetti

Task 5: Create App Component and Integrate

Task 6: Create Docker Configuration

Task 7: Create Kubernetes Manifests

Task 8: Add Placeholder Images and Final Testing

Task 9: Add README with Deployment Instructions

Adding Photos

Docker Build

Kubernetes Deployment

Summary

14 KiB

Raw Permalink Blame History