chore: initialize Vite + React + Tailwind project
This commit is contained in:
719
docs/plans/2026-03-11-birthday-roast-gallery.md
Normal file
719
docs/plans/2026-03-11-birthday-roast-gallery.md
Normal file
@@ -0,0 +1,719 @@
|
||||
# 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! Click để ăn confetti! ✨
|
||||
</p>
|
||||
<p className="mt-4 text-lg opacity-75">
|
||||
(Click anywhere for more confetti 🎊)
|
||||
</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 💖 for the birthday roast</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**
|
||||
Reference in New Issue
Block a user