Home / Projects / Meraki Wedding Blog/Website

Meraki Wedding Blog/Website

Metadata

  • Type: Wedding Planning Platform
  • Industry: Wedding Planning
  • Live URL: merakiwedding.com
  • Timeline: 2023
  • Role: Full Stack Developer
  • Team Size: Solo Developer
  • Languages: English, Vietnamese
  • Stack: Next.js, TinaCMS, MySQL, TypeScript
  • Status: Production

A professional wedding planning website built with Next.js, featuring both client-facing content and administrative capabilities.

Technology Stack

  • Frontend Framework: Next.js
  • Content Management: TinaCMS
  • Styling: Tailwind CSS
  • Type Safety: TypeScript (partial)
  • Database: MySQL/Supabase
  • Containerization: Docker

Main Features

Client-Facing Features

  • Blog system with posts and categories
  • Gallery showcase with multiple layout options
  • Instagram feed integration
  • Contact form
  • Planning checklist (English & Vietnamese)
  • Services showcase
  • Kind Words (testimonials) section
  • About page
  • Multi-language support

Administrative Features

  • Content management interface
  • Gallery layout management
  • Blog post editor
  • Preview system

Project Structure

merakiwedding-blog/
├── components/         # Reusable UI components
├── meraki/            # Core business components
│   ├── components/    # Meraki-specific components
│   ├── sections/      # Page sections
│   └── templates/     # Page templates
├── pages/             # Next.js routing and pages
├── lib/               # Utilities and integrations
├── providers/         # Context providers
└── public/           # Static assets

Key Directories

Components

  • Reusable UI elements
  • Layout components
  • Meta components for SEO
  • Post and gallery components

Meraki Core

  • Business-specific components
  • Section templates
  • Page layouts
  • Gallery system with 26+ layouts

Library

  • API integrations
  • Database handlers
  • Instagram integration
  • Content management helpers

Public Assets

  • Professional branding assets
  • Custom icons
  • Banner images
  • Custom fonts
    • Commissioner
    • EB Garamond
    • Kinfolk
    • League Script
    • Prata
    • Roboto
    • Sweet Sans Pro

Gallery System

The project features a sophisticated gallery system with:

  • 26+ predefined layouts
  • Custom lightbox implementation
  • Responsive design
  • Multiple display options
  • Showcase capabilities

Backend Features

  • RESTful API routes
  • Instagram data integration
  • Contact form processing
  • Preview system for content
  • Database integration (MySQL/Supabase)
  • Content management with TinaCMS

Development

Prerequisites

  • Node.js
  • Docker (optional)
  • MySQL or Supabase account

Local Development

# Install dependencies
npm install

# Run development server
npm run dev

Docker Setup

# Build container
docker-compose build

# Run services
docker-compose up

SEO & Performance

  • Meta components for SEO optimization
  • Sitemap generation
  • Responsive images
  • Custom fonts with performance optimization
  • Mobile-specific assets

Content Management

The website uses TinaCMS for content management, providing:

  • Visual editing interface
  • Content preview
  • Blog post management
  • Gallery organization
  • Service updates

Deployment

The project includes configuration for:

  • Docker containerization
  • Nginx configuration
  • Netlify deployment

Additional Resources

The /docs directory contains documentation for:

  • New post creation
  • Plugin installation
  • GraphQL integration
  • Content management workflows