Skip to content

Sp1r1tual/birthday-greetings

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

Birthday Greetings

An immersive, JoJo-themed interactive birthday greeting platform – featuring custom audio-visual effects, "Za Warudo" time stop mechanics, and personalized messages.


Birthday Greetings


About the Project

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.


Order a Greeting 🎁

You can order a similar personalized greeting by sending an email to: [email protected].

What is needed for development:

  • Theme
  • Text
  • Photos
  • Good mood

Key Features

  • 🎭 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.

Tech Stack

Architecture: Client ↔ Server ↔ Database

Frontend

  • 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.

Backend

  • NestJS – Robust, scalable Node.js framework.
  • MongoDB (Mongoose) – Flexible data storage for greetings.
  • Zod – Schema-based validation for API and environment.

Local Development Setup

1. Clone the repository

git clone https://github.com/Sp1r1tual/birthday-greetings.git

Server

2. Navigate to server directory

cd server

3. Install dependencies

yarn install

4. Configure environment variables

Copy .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-greetings

5. Start the server

yarn dev

The server will be available at http://localhost:5000.

Client

6. Create a new terminal and navigate to client directory

cd client

7. Install dependencies

yarn install

8. Configure environment variables

Copy .env.example to .env and fill in the values:

VITE_API_URL=http://localhost:5000

9. Start the client

yarn dev

The client will be available at http://localhost:5173.


License

All rights reserved by the author. If you plan to use, modify, or distribute this project, please contact the author for permission.

About

Bizzare greeting manga-landing with "Happy Birthday" for Wasilisk

Resources

Stars

Watchers

Forks

Contributors