Home / Projects / An & Joel's Wedding Website

An & Joel's Wedding Website

Metadata

  • Type: Wedding & Travel Guide
  • Industry: Wedding, Travel
  • 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.