An immersive, JoJo-themed interactive birthday greeting platform – featuring custom audio-visual effects, "Za Warudo" time stop mechanics, and personalized messages.
Birthday Greetings is a unique web application designed to deliver birthday wishes in an unforgettable way. Inspired by the iconic "JoJo's Bizarre Adventure" series, the project features Dio Brando and his legendary stand, "The World."
The application focuses on high-quality UX/UI, cinematic transitions, and synchronized audio effects. It serves as both a personalized gift and a demonstration of modern web technologies like React 19 and NestJS working together to create a seamless, interactive experience.
Note
The MVP of this landing page was built from scratch in just one day. With additional refinements and polishing on the second day, the entire project was completed in a total of two days.
You can order a similar personalized greeting by sending an email to: [email protected].
What is needed for development:
- Theme
- Text
- Photos
- Good mood
- 🎭 Cinematic Opening – A dramatic introduction to set the mood for the greeting.
- 🕒 "Za Warudo" Time Stop – A signature interactive effect that stops time on the site, accompanied by classic audio and visual distortion.
- 🔊 Dynamic Audio System – Synchronized background music and sound effects with a custom mute/unmute control.
- 📖 Manga-Style Sections – Visual storytelling inspired by anime and manga aesthetics.
- ✉️ Greetings Engine – Messages are dynamically fetched from the backend, allowing for easy updates and personalization.
- ⚡ Modern UX – Built with performance in mind using skeleton loading, smooth scrolling, and responsive layouts.
Architecture: Client ↔ Server ↔ Database
- React 19 – Modern UI components and state management.
- TypeScript – Strict typing for reliability.
- Redux Toolkit – Efficient application state management.
- Vite – Fast development and build tool.
- CSS Modules – Scoped, maintainable styling.
- React Loading Skeleton – Polished loading states.
- NestJS – Robust, scalable Node.js framework.
- MongoDB (Mongoose) – Flexible data storage for greetings.
- Zod – Schema-based validation for API and environment.
git clone https://github.com/Sp1r1tual/birthday-greetings.gitcd serveryarn installCopy .env.example to .env and fill in the values:
PORT=5000
CLIENT_URL=http://localhost:5173
# MongoDB connection string (local or Atlas)
DB_URL=mongodb://localhost:27017/birthday-greetingsyarn devThe server will be available at http://localhost:5000.
cd clientyarn installCopy .env.example to .env and fill in the values:
VITE_API_URL=http://localhost:5000yarn devThe client will be available at http://localhost:5173.
All rights reserved by the author. If you plan to use, modify, or distribute this project, please contact the author for permission.
