Habib & Geta Wedding Invitation Website

A modern, interactive wedding invitation and wedding registry website built in a monorepo structure.

made with love for our special day ✨

Technology Stack

Frontend

• Vite (React + TypeScript)
• Tailwind CSS
• Framer Motion
• Lucide Icons
• React Confetti
• Cloudflare Pages

Backend

• Bun runtime
• Hono framework
• TypeScript
• Cloudflare D1 database
• Cloudflare Workers

Features

• Modern & Elegant Design – Clean, stylish, and pleasing to the eye
• Fully Responsive Layout – Optimized for mobile, tablet, and desktop
• Background Music – Includes playback controls for a personal touch
• Interactive Wishes Section – Guests can send messages, stored directly in the database
• Smooth Animations – Seamless transitions and motion using Framer Motion
• Confetti Effects – Add a festive vibe to special moments
• Countdown Timer – Automatically counts down to the wedding day
• Google Maps Integration – Easily show the venue location
• Wedding Registry System – Guests can browse and reserve gifts
• Admin Panel
  • Manage guest lists & guest groups
  • Admin Panel for managing guests, registry items, and messages
  • Admin Panel for managing guests, registry items, and messages

Quick Start

Prerequisites

• Bun for package management
• Wrangler CLI for deployment
• Cloudflare account (for migration and deployment)

Backend Setup

see backend setup

Frontend Setup

see frontend setup

Deployment

Before deployment, authenticate wrangler to clouflare with wrangler login.

Backend Deployment

see backend deployment

Frontend Deployment

see frontend deployment

Access Wedding Pannel

Access the wedding panel, example :

http://localhost:3000/registry/secret-page/panel?t=your-access-key

Replace your-access-key with your API access key that you configured in the backend.

Project Structure

habibgeta-invitation/
├── app/                 # React frontend
│   ├── src/
│   ├── public/
│   └── package.json
├── api/                 # Hono backend
│   ├── src/
│   ├── wrangler.toml
│   └── package.json
└── README.md

Database Schema

The application uses Cloudflare D1 with tables for:

• Wishes
• Guest & Group management
• Wedding registry items & purchases
• Message templates

Credits

This project is an enhanced TypeScript version of the original work by @mrofisr. Thanks to him for the original work and inspiration!

It transforms the original static site into a fully functional web application with a backend side to support dynamic features like guest wishes and gift registry.

Original repository: mrofisr/islamic-wedding-invitation

License

This project is licensed for personal use only.
Commercial use is not permitted without explicit permission.

See LICENSE for more details.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Support

Give a star if this project helped you!

Closing Statement

May Allah, the Most Glorified and Exalted, grant us guidance and success, and make this project a lasting charity (amal jariyah).