nelsonlaidev/nelsonlai.dev — Gitpedia

<div align="center"> <a href="https://nelsonlai.dev"> <picture> <source media="(prefers-color-scheme: dark)" srcset="public/images/dark-header.png"> <img alt="Project Cover" src="public/images/light-header.png"> </picture> </a> <h1 align="center"> nelsonlai.dev </h1> <img src="https://img.shields.io/badge/Next.js-000000.svg?style=for-the-badge&logo=Next.js&labelColor=000" alt="Framework" /> <img src="https://img.shields.io/github/languages/top/nelsonlaidev/nelsonlai.dev?style=for-the-badge&labelColor=000" alt="Language" /> <img src="https://img.shields.io/github/license/nelsonlaidev/nelsonlai.dev?style=for-the-badge&labelColor=000" alt="License" /> </div>

Welcome to my personal blog and portfolio website! This repository contains a modern Next.js application where I share my thoughts, projects, and insights.

Features

Core Technologies

Next.js 16 with App Router
TypeScript with strict configuration
Tailwind CSS for styling
MDX for content
Drizzle ORM
I18n for internationalization support

UI/UX

Base UI for accessible UI components
Responsive design
Light/Dark mode
Image zoom in blog posts
Shiki for code syntax highlighting
Motion for animations
Table of contents for blog posts

Blog Features

Comment system
Like functionality
Post view counter
Blog post search
RSS feed
Sitemap

Performance & SEO

Lighthouse score of nearly 100
SEO optimized with meta tags and JSON-LD
Dynamic open graph images using next/og

Development Experience

Vitest for unit testing
Playwright for E2E testing
ESLint configuration
Prettier code formatting
Lefthook
Conventional commit

Authentication & Data

Better Auth
Redis caching
Upstash for API rate limiting
t3-env for environment variables
Umami Analytics

Email Templates

Comment Notification

Reply Notification

Getting Started

Prerequisites

Node.js >= 24
bun >= 1.3
Docker
Visual Studio Code with recommended extensions
Optionally React Developer Tools

Project Structure

nelsonlai.dev/
├── public/           # Static assets (images, fonts, videos)
├── src/
│   ├── app/          # Next.js app router pages
│   ├── components/   # React components
│   ├── constants/    # Application constants
│   ├── content/      # MDX blog posts and content
│   ├── contexts/     # React contexts
│   ├── db/           # Database schema and migrations
│   ├── emails/       # Email templates
│   ├── hooks/        # Custom React hooks
│   ├── i18n/         # Internationalization
│   ├── lib/          # Utility libraries
│   ├── mdx-plugins/  # Custom Rehype and Remark plugins
│   ├── orpc/         # oRPC API routes
│   ├── styles/       # Global styles
│   ├── tests/        # Unit and E2E tests
│   └── utils/        # Utility functions
├── docker-compose.yml
└── package.json

Development

To run this project locally, you need to set up the development environment.

Setup

Clone the repository:

bash
git clone https://github.com/nelsonlaidev/nelsonlai.dev

Navigate to the project directory:

bash
cd nelsonlai.dev

Install dependencies using bun:

bash
bun install

Environment Setup

Copy .env.example to .env.local and update the environment variables as needed.

bash
cp .env.example .env.local

Run required services using Docker:

bash
docker compose up -d

Run the database migrations:

bash
bun db:migrate

Seed the database:

bash
bun db:seed

Run the app:

bash
bun dev          # Run the development server
# or
bun email:dev    # Run the email preview server separately

The services will be available at the following URLs:

Service	URL
App	`localhost:3000`
React Email	`localhost:3001`
Cosmos	`localhost:3002`
Database	`localhost:5432`
Redis	`localhost:6379`
Redis serverless	`localhost:8079`

Available Scripts

bash
# Development
bun dev               # Start development server
bun email:dev         # Run email preview server
bun cosmos            # Start Cosmos component playground

# Build & Production
bun run build         # Build for production (includes cosmos:export)
bun start             # Start production server
bun analyze           # Analyze bundle size

# Quality & Testing
bun check             # Run all quality checks (lint, typecheck, format, etc.)
bun lint              # Run ESLint
bun typecheck         # Run TypeScript type checking
bun format            # Format code with Prettier
bun knip              # Find unused dependencies/exports
bun test:unit         # Run unit tests
bun test:e2e          # Run Playwright E2E tests

# Database
bun db:migrate        # Run database migrations
bun db:seed           # Seed the database
bun db:push           # Push schema changes directly to DB
bun db:reset          # Reset database
bun db:studio         # Open Drizzle Studio