sapphire-idea

byOm Kalyankar

Build me a full-stack 3D birthday surprise website for my girlfriend with the following complete specification: ───────────────────────────────────────── 🎯 PROJECT GOAL ───────────────────────────────────────── A stunning, immersive birthday surprise website that she will open on her birthday. It should feel magical, personal, and emotional — with smooth 3D animations, music, photos, and videos of her/us together. ───────────────────────────────────────── 🎨 FRONTEND (React + Three.js or React Three Fiber) ───────────────────────────────────────── - Full-screen 3D landing scene with floating hearts, stars, and rose petals animated in 3D space using Three.js or React Three Fiber - A dramatic "Birthday Reveal" intro: the screen starts dark, then slowly illuminates with particle explosions and her name appearing in glowing 3D text - A 3D photo gallery: photos displayed on rotating 3D cards/frames floating in space, user can click/drag to browse - A video section: cinematic full-screen video player with fade-in animations - A "Our Journey" 3D timeline: scroll through milestones like "First date", "First trip together", etc. displayed on a 3D ribbon/road that the user walks through - A love letter section: text appears letter by letter with a typewriter animation, on a parchment-style card - A 3D cake with animated candles — clicking it triggers a confetti/fireworks explosion and plays "Happy Birthday" music - Smooth GSAP-powered page transitions between sections - Background: animated gradient aurora or starfield - Autoplay ambient romantic background music (soft piano/lo-fi) with a mute button - Mobile responsive with touch gestures for 3D gallery Tech stack: React, Three.js or @react-three/fiber, @react-three/drei, GSAP, Framer Motion, Tailwind CSS ───────────────────────────────────────── 🔧 BACKEND (Node.js + Express) ───────────────────────────────────────── - REST API with the following endpoints: - POST /api/upload — upload photos and videos (multipart/form-data) - GET /api/media — fetch all uploaded photos and videos - DELETE /api/media/:id — delete a specific media item - GET /api/messages — fetch love messages / timeline entries - POST /api/messages — add a new message or milestone - GET /api/settings — fetch site config (her name, birthday date, color theme) - POST /api/settings — update site config - JWT-based authentication so only the boyfriend (admin) can upload/manage content - An admin dashboard (separate /admin route) where the boyfriend can: - Upload photos and videos before her birthday - Write love letters and timeline entries - Set her name, birthday date, and site color theme - Preview the site as she will see it - Rate limiting and input validation on all routes Tech stack: Node.js, Express.js, Multer (file uploads), JWT, bcrypt, express-validator ───────────────────────────────────────── 🗄️ DATABASE (MongoDB or PostgreSQL) ───────────────────────────────────────── - Media table/collection: id, filename, url, type (photo/video), caption, uploadedAt, order - Messages table/collection: id, title, body, date, emoji, order - Settings table/collection: herName, birthdayDate, primaryColor, accentColor, sitePassword - Users table: id, username, hashedPassword, role - Use Mongoose (MongoDB) or Prisma ORM (PostgreSQL) - Store uploaded files in /uploads folder on server OR integrate with Cloudinary for cloud storage ───────────────────────────────────────── 🔐 ADMIN PANEL (React, separate route /admin) ───────────────────────────────────────── - Login page for boyfriend with username + password - Dashboard with tabs: Media Manager | Love Letters | Timeline | Settings | Preview - Drag-and-drop photo/video uploader with progress bars - Rich text editor for love letters (use Quill or TipTap) - Reorder media items with drag-and-drop - Toggle: "Site is live" / "Site is locked" (so she can't access it early) - One-click "Copy shareable link" button ───────────────────────────────────────── ✨ SPECIAL EFFECTS & ANIMATIONS ───────────────────────────────────────── - Fireworks explosion on page load using canvas-confetti - Floating 3D hearts using Three.js particle system - Parallax scrolling on all sections - Glitch/shimmer effect on her name in the hero - Photo cards flip on hover to reveal captions - 3D rotating globe/heart shape made of her photos - Countdown timer (if birthday is in the future): "X days until your special day" - On the actual birthday: automatic confetti rain all day ───────────────────────────────────────── 🌐 DEPLOYMENT ───────────────────────────────────────── - Frontend: Vercel or Netlify - Backend: Railway or Render - Database: MongoDB Atlas (free tier) or Supabase (PostgreSQL) - Provide a complete README with setup instructions, env variables, and deployment steps - Include a .env.example file ───────────────────────────────────────── 📁 FOLDER STRUCTURE ───────────────────────────────────────── Organize as a monorepo: /client → React frontend /server → Node.js backend /admin → Admin panel (can be part of /client with protected routes) README.md .env.example docker-compose.yml (optional) ───────────────────────────────────────── 🎁 FINAL NOTES ───────────────────────────────────────── - Make the code production-ready with error handling and loading states - Use placeholder content (sample photos, sample messages) so it works out of the box - Add comments in code explaining each major section - The site should work perfectly on both desktop and mobile - Performance: lazy load all images and videos, use suspense boundaries in React Generate the complete codebase with all files.