An & Joel's Wedding Website

Metadata

• Type: Wedding & Travel Guide
• Industry: Wedding, Travel
• Live URL: https://anandjoel.wedding
• Timeline: 2023
• Role: Full Stack Developer
• Team Size: Solo Developer
• Languages: English, Vietnamese
• Stack: Next.js, Tina CMS, GraphQL, TypeScript
• Status: Production

A sophisticated wedding website built with Next.js that showcases wedding events and serves as a comprehensive guide to Vietnamese restaurants and locations.

Technology Stack

• Frontend Framework: Next.js (React)
• Content Management: Tina CMS
• Data Layer: GraphQL
• Language: TypeScript
• Styling: CSS with PostCSS

Project Structure

Content Organization

content/
├── event/          # Wedding event content
└── pages/          # Static page content
    ├── all.md      # English content
    └── all.vi.md   # Vietnamese content

Media Assets

Wedding Events Photos

• Morning Ceremony
• Evening Reception
• Getting Ready Sessions
• Group Photographs
• After Party Moments
• Wedding Details & Decorations

Restaurant & Location Guide

Organized by major Vietnamese cities:

• Saigon
• Hanoi
• Hoi An
• Da Lat
• Da Nang
• Sapa

Application Components

src/
├── app/                    # Next.js app router
│   ├── (admin)/           # Admin section
│   └── [locale]/          # Multilingual routes
├── components/            # React components
│   ├── common/           # Shared components
│   └── template/         # Page templates
└── libs/                 # Utilities & constants

Key Features

1. Multilingual Support

   • English and Vietnamese language options
   • Localized routing system

2. Content Management

   • Tina CMS integration
   • GraphQL-based content queries
   • Structured content organization

3. Interactive Elements

   • Animated images
   • Vietnam map visualization
   • Custom navigation components

4. Media Rich

   • Extensive photo galleries
   • Custom fonts
   • Animated graphics

5. Administrative Features

   • Protected admin section
   • Content management interface

Special Components

• AnimateImage: Enhanced image display with animations
• LangButton: Language switching functionality
• VietnamMap: Interactive map component
• BiteDetail: Restaurant/location information display

Asset Organization

public/
├── bites/              # Restaurant photos by city
├── event/             # Wedding event media
├── events/            # Additional event content
├── fonts/            # Custom typography
└── gif/              # Animated graphics

Development

The project uses modern web development practices:

• TypeScript for type safety
• Next.js App Router for routing
• PostCSS for CSS processing
• GraphQL for data queries
• Tina CMS for content management

Error Handling

Built-in error pages:

• 500.tsx: Server error page
• error.tsx: Generic error boundary

---

This website serves dual purposes:

1. A wedding memorabilia platform
2. A curated guide to Vietnamese cuisine and locations

The site combines personal celebration with travel guidance, creating a unique digital experience for wedding guests and travelers alike.