720 lines
14 KiB
Markdown
720 lines
14 KiB
Markdown
# 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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```javascript
|
|
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
|
|
export default defineConfig({
|
|
plugins: [react()],
|
|
})
|
|
```
|
|
|
|
**Step 3: Create tailwind.config.js**
|
|
|
|
```bash
|
|
npx tailwindcss init -p
|
|
```
|
|
|
|
Then update `tailwind.config.js`:
|
|
|
|
```javascript
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {},
|
|
},
|
|
plugins: [],
|
|
}
|
|
```
|
|
|
|
**Step 4: Create postcss.config.js**
|
|
|
|
```javascript
|
|
export default {
|
|
plugins: {
|
|
tailwindcss: {},
|
|
autoprefixer: {},
|
|
},
|
|
}
|
|
```
|
|
|
|
**Step 5: Create index.html**
|
|
|
|
```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**
|
|
|
|
```javascript
|
|
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**
|
|
|
|
```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`:
|
|
|
|
```json
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vite build",
|
|
"preview": "vite preview"
|
|
}
|
|
```
|
|
|
|
**Step 10: Test the setup**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```jsx
|
|
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**
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Expected: Build succeeds (may warn about unused component)
|
|
|
|
**Step 3: Commit**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```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**
|
|
|
|
```jsx
|
|
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**
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Expected: Build succeeds
|
|
|
|
**Step 4: Commit**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```jsx
|
|
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**
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Expected: Build succeeds
|
|
|
|
**Step 3: Commit**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```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**
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Expected: Open http://localhost:5173, see banner with confetti, gallery placeholder
|
|
|
|
**Step 3: Build for production**
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Expected: Build succeeds, creates `dist/` folder
|
|
|
|
**Step 4: Commit**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```nginx
|
|
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**
|
|
|
|
```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**
|
|
|
|
```bash
|
|
docker build -t cmsn-b-linh:test .
|
|
```
|
|
|
|
Expected: Build succeeds
|
|
|
|
**Step 5: Test Docker run**
|
|
|
|
```bash
|
|
docker run -p 8080:80 cmsn-b-linh:test
|
|
```
|
|
|
|
Expected: Open http://localhost:8080, see the app working
|
|
|
|
**Step 6: Commit**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
mkdir -p k8s
|
|
```
|
|
|
|
**Step 2: Create k8s/deployment.yaml**
|
|
|
|
```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**
|
|
|
|
```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**
|
|
|
|
```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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
mkdir -p public/images
|
|
touch public/images/.gitkeep
|
|
```
|
|
|
|
**Step 2: Update roasts.json with instructions**
|
|
|
|
```json
|
|
[
|
|
{
|
|
"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**
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Expected: Build succeeds
|
|
|
|
**Step 4: Final Docker test**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```bash
|
|
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**
|
|
|
|
```markdown
|
|
# 🎂 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
|
|
|
|
1. Add images to `public/images/` folder
|
|
2. Update `public/roasts.json` with image filenames and Vietnamese captions
|
|
3. Rebuild and redeploy
|
|
|
|
## Docker Build
|
|
|
|
```bash
|
|
docker build -t cmsn-b-linh:latest .
|
|
```
|
|
|
|
## Kubernetes Deployment
|
|
|
|
1. Push image to your registry:
|
|
```bash
|
|
docker tag cmsn-b-linh:latest your-registry/cmsn-b-linh:latest
|
|
docker push your-registry/cmsn-b-linh:latest
|
|
```
|
|
|
|
2. Update `k8s/deployment.yaml` with your registry image
|
|
|
|
3. Apply manifests:
|
|
```bash
|
|
kubectl apply -f k8s/
|
|
```
|
|
|
|
4. 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**
|