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