Betirement Website

A comprehensive digital ecosystem designed to establish Michael as a trusted authority on Bitcoin-powered early retirement. Built with Next.js 14, TypeScript, and Tailwind CSS.

Getting Started

Prerequisites

Node.js 20.x or higher
npm

Installation

Clone the repository
Install dependencies:

npm install

Copy the environment variables template:

cp .env.example .env.local

Fill in your environment variables in .env.local

Development

Run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Build

Create a production build:

npm run build

Start the production server:

npm run start

Code Quality

Run ESLint to check for code issues:

npm run lint

Format code with Prettier:

npm run format

Performance Testing

Run Lighthouse audit (requires production build):

# Run full performance audit
npm run perf

# Run Lighthouse on mobile
npm run lighthouse:mobile

# Run Lighthouse on desktop
npm run lighthouse:desktop

# Analyze bundle size
npm run analyze

# Test slow connection performance
npm run test:performance

See Performance Testing Guide for detailed information.

Available Scripts

Development

Script	Description
`npm run dev`	Start development server on http://localhost:3000
`npm run build`	Create optimized production build
`npm run start`	Start production server (requires build first)
`npm run lint`	Run ESLint to check code quality
`npm run format`	Format code with Prettier

Testing & QA

Script	Description
`npm run qa:all`	Run all QA tests (forms + checklist)
`npm run qa:forms`	Test form validation
`npm run qa:checklist`	Run QA checklist
`npm run qa:links`	Check for broken links
`npm run pre-launch`	Run comprehensive pre-launch checklist
`npm run pre-launch:prod`	Run pre-launch checklist on production

Performance

Script	Description
`npm run perf`	Run full performance audit
`npm run lighthouse:mobile`	Run Lighthouse audit (mobile)
`npm run lighthouse:desktop`	Run Lighthouse audit (desktop)
`npm run analyze`	Analyze bundle size
`npm run test:performance`	Test slow connection performance

Utilities

Script	Description
`npm run backup`	Create backup of all content
`npm run format`	Format code with Prettier
`npm run lighthouse`	Run Lighthouse audit on localhost
`npm run lighthouse:mobile`	Run Lighthouse audit for mobile
`npm run lighthouse:desktop`	Run Lighthouse audit for desktop
`npm run analyze`	Build and analyze bundle size
`npm run test:performance`	Test performance on slow connection
`npm run perf`	Run complete performance test suite

Tech Stack

Framework: Next.js 14.2+ (App Router)
Language: TypeScript 5.4+
Styling: Tailwind CSS 3.4+ with custom design system
Content: MDX for blog posts with syntax highlighting
Deployment: Netlify with automatic GitHub deployments
Email: ConvertKit API integration
Analytics: Vercel Analytics + Plausible Analytics

Project Structure

betirement-website/
├── src/
│   ├── components/         # React components
│   │   ├── ui/            # Reusable UI components
│   │   ├── sections/      # Page sections
│   │   ├── forms/         # Form components
│   │   └── layout/        # Layout components
│   ├── lib/               # Utility functions and API clients
│   ├── types/             # TypeScript type definitions
│   ├── config/            # Configuration files
│   │   ├── site.ts        # Site metadata
│   │   └── navigation.ts  # Navigation structure
│   └── data/              # Static data (JSON/MD)
│       ├── blog/          # Blog posts (Markdown)
│       ├── resources/     # Resource metadata
│       └── testimonials/  # Testimonials data
├── app/                   # Next.js App Router pages
├── public/                # Static assets
│   ├── images/           # Image files
│   ├── downloads/        # Downloadable resources
│   └── favicon/          # Favicon files
└── netlify/              # Netlify serverless functions (future)

Configuration

Site Configuration

Site metadata and settings are configured in src/config/site.ts:

Site name, title, and description
Social media links
Author information
SEO keywords

Navigation

Navigation structure is defined in src/config/navigation.ts:

Main navigation menu
Footer navigation sections
Dropdown menus

Environment Variables

See Environment Variables Documentation for detailed information.

Required environment variables (see .env.example):

YouTube API (Required):

YOUTUBE_API_KEY - YouTube Data API v3 key
YOUTUBE_CHANNEL_ID - Your YouTube channel ID

ConvertKit (Required):

CONVERTKIT_API_KEY - ConvertKit API key
CONVERTKIT_API_SECRET - ConvertKit API secret
CONVERTKIT_FORM_ID - Default form ID for subscriptions

Analytics (Required):

NEXT_PUBLIC_PLAUSIBLE_DOMAIN - Your domain for Plausible Analytics
NEXT_PUBLIC_SITE_URL - Production site URL

Social Media APIs (Optional):

INSTAGRAM_ACCESS_TOKEN - Instagram Basic Display API token
INSTAGRAM_USER_ID - Instagram user ID
TWITTER_BEARER_TOKEN - Twitter API v2 bearer token

See .env.example for a complete list of environment variables.

Features

Blog System

The blog system uses Markdown files with frontmatter for content management:

Location: src/data/blog/
Format: Markdown (.md) with YAML frontmatter
Features:
- Category and tag filtering
- Full-text search
- Reading time calculation
- Social sharing buttons
- SEO optimization
- Syntax highlighting for code blocks

See src/data/blog/README.md for detailed documentation on creating blog posts.

Video Library

Integration with YouTube Data API to automatically fetch and display videos:

Category filtering (6 categories)
Search functionality
Video detail pages with transcripts
ISR for fresh content

Components

Reusable UI components built with Tailwind CSS:

UI Components: Button, Card, Modal, Input
Section Components: Hero, Timeline, Featured Content
Content Components: Video Cards, Blog Cards, Resource Cards
Form Components: Email capture, Contact forms

Performance Optimization

The Betirement website is optimized for maximum performance with a target Lighthouse score of 90+. Key optimizations include:

Font Optimization: Automatic optimization with next/font/google
Image Optimization: WebP/AVIF conversion, responsive sizing, lazy loading
Code Splitting: Dynamic imports for heavy components
Caching: Aggressive caching for static assets
Bundle Optimization: Tree shaking and minification

Documentation

Performance Optimization Guide - Comprehensive performance documentation
Image Optimization Guide - Detailed image optimization instructions
Quick Performance Reference - Quick reference for developers

Testing Performance

# Build and test locally
npm run build
npm run start

# Run Lighthouse audit
npx lighthouse http://localhost:3000 --view

Mobile Responsiveness

The website is fully responsive and optimized for mobile devices with WCAG 2.1 AA compliance:

Touch Targets: Minimum 44×44px for all interactive elements
Typography: Responsive text sizing with 16px base (prevents iOS zoom)
Navigation: Hamburger menu with slide-out drawer on mobile
Forms: Mobile-optimized inputs with appropriate keyboard types
Video Players: Responsive aspect ratios and touch-friendly controls

Documentation

Mobile Responsiveness Guide - Comprehensive mobile documentation
Mobile Quick Reference - Quick reference for developers

Testing Mobile Responsiveness

Visit /mobile-test to see comprehensive mobile responsiveness testing including:

Device information display
Touch target size verification
Typography scaling
Form layouts
Grid responsiveness
Modal behavior
Video player testing

# Test on different viewports
npm run dev
# Open http://localhost:3000/mobile-test
# Resize browser or use device emulation

Deployment

The site is configured for automatic deployment to Netlify with CI/CD pipeline via GitHub Actions.

Quick Deployment

Production: Push to main branch → Automatic deployment to production
Preview: Open a pull request → Automatic preview deployment with unique URL
Rollback: Use Netlify dashboard to rollback to any previous deployment

Initial Setup

To set up deployment for the first time:

Connect to Netlify:
- Sign up at netlify.com
- Click "Add new site" → "Import an existing project"
- Connect your GitHub repository
- Configure build settings (already set in netlify.toml)
Configure Environment Variables:
- Go to "Site settings" → "Environment variables"
- Add all variables from .env.example
- See Deployment Guide for detailed instructions
Update Build Badges:
- Replace YOUR_USERNAME in the GitHub Actions badge URL
- Replace YOUR_SITE_ID and YOUR_SITE_NAME in the Netlify badge URL
- Find your Netlify site ID in "Site settings" → "General"

CI/CD Pipeline

The project includes GitHub Actions workflows for:

Linting: ESLint code quality checks
Type Checking: TypeScript type validation
Build Verification: Ensures production build succeeds
Deployment Status: Tracks Netlify deployment status

All checks must pass before merging pull requests.

Deployment Documentation

For comprehensive deployment instructions, see:

Deployment Guide - Complete deployment documentation
netlify.toml - Netlify configuration file

Monitoring

Build Status: Check GitHub Actions tab for CI/CD status
Deploy Status: Check Netlify dashboard for deployment logs
Performance: Monitor with Vercel Analytics and Plausible Analytics

API Endpoints

The Betirement website provides several API endpoints for dynamic functionality. See API Documentation for detailed information.

Available Endpoints

POST /api/subscribe - Subscribe to email newsletter via ConvertKit
GET /api/videos - Fetch YouTube videos with optional search
GET /api/videos/[id] - Get details for a specific video
GET /api/instagram - Fetch Instagram posts (placeholder)
GET /api/social/followers - Get social media follower counts (placeholder)

All endpoints include:

Rate limiting protection
CORS headers
Input sanitization
Error handling

Components

The project includes a comprehensive component library. See Component Documentation for detailed usage examples.

Component Categories

UI Components: Button, Card, Modal, Input, ErrorBoundary
Layout Components: Header, Footer, Navigation
Section Components: Hero, Timeline, Featured Content, Social Proof
Form Components: Email Capture, Contact Forms, Quiz
Content Components: Video Cards, Blog Cards, Resource Cards
Analytics Components: Analytics Provider, Performance Monitor
Social Components: Instagram Feed, Twitter Timeline, Social Share

Content Management

Blog Posts

Create blog posts using Markdown files in src/data/blog/. See Blog System Documentation for detailed instructions.

Content Guidelines

See Content Guidelines for:

Writing style and tone
SEO best practices
Image requirements
Formatting standards

Documentation

Comprehensive documentation is available in the docs/ directory:

Getting Started

Environment Variables - Complete environment variable reference
Component Usage - Component examples and patterns
API Documentation - API endpoint reference
Content Guidelines - Content creation guide

Deployment & Operations

Deployment Guide - Complete deployment documentation
Netlify Setup Guide - Quick Netlify setup instructions
Deployment Checklist - Pre and post-deployment checklist
CI/CD Guide - Continuous integration and deployment

Performance & Optimization

Performance Optimization - Performance best practices
Image Optimization Guide - Image optimization instructions
Quick Performance Reference - Quick reference guide
Performance Testing - Testing and monitoring

Accessibility & Mobile

Accessibility Guide - WCAG 2.1 AA compliance guide
Accessibility Checklist - Accessibility testing checklist
Mobile Responsiveness - Mobile optimization guide
Mobile Quick Reference - Mobile development reference

Security

Security Guide - Security best practices
Security Quick Reference - Security checklist

Contributing

This is a private project, but if you're working on the codebase, please follow these guidelines:

Code Style

Follow the existing code style
Use TypeScript for all new code
Run npm run lint before committing
Format code with Prettier (npm run format)

Git Workflow

Create a feature branch from main
Make your changes
Test thoroughly
Create a pull request
Wait for CI/CD checks to pass
Request review if needed

Commit Messages

Use conventional commit format:

feat: Add new feature
fix: Fix bug
docs: Update documentation
style: Format code
refactor: Refactor code
test: Add tests
chore: Update dependencies

Testing

Test on multiple browsers (Chrome, Safari, Firefox)
Test on mobile devices (iOS and Android)
Verify accessibility with screen readers
Check performance with Lighthouse

Troubleshooting

Common Issues

Build Fails:

Check Node.js version (20.x required)
Delete node_modules and .next, then npm install
Verify environment variables are set
Check for TypeScript errors

Images Not Loading:

Verify images are in public/ directory
Check image paths start with /
Ensure images are optimized (< 200KB)
Check Next.js Image component configuration

API Errors:

Verify environment variables are set correctly
Check API keys are valid
Review rate limits
Check network connectivity

Styling Issues:

Clear browser cache
Check Tailwind configuration
Verify CSS classes are correct
Inspect with browser DevTools

Getting Help

Check documentation in docs/ directory
Review error messages carefully
Search existing issues
Check Next.js documentation
Review component examples

Project Status

Completed Features

✅ Core website structure
✅ Blog system with Markdown
✅ YouTube video integration
✅ Email capture with ConvertKit
✅ Resources center
✅ Community portal (basic)
✅ Analytics integration
✅ SEO optimization
✅ Mobile responsiveness
✅ Accessibility features
✅ Security measures
✅ Performance optimization
✅ CI/CD pipeline
✅ Comprehensive documentation

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.github		.github
.kiro/specs/betirement-website		.kiro/specs/betirement-website
.vscode		.vscode
app		app
docs		docs
public		public
scripts		scripts
src		src
sub_agents		sub_agents
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
Betirement_Dev_Brief.md		Betirement_Dev_Brief.md
README.md		README.md
lighthouserc.json		lighthouserc.json
mdx-components.tsx		mdx-components.tsx
netlify.toml		netlify.toml
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Betirement Website

Getting Started

Prerequisites

Installation

Development

Build

Code Quality

Performance Testing

Available Scripts

Development

Testing & QA

Performance

Utilities

Tech Stack

Project Structure

Configuration

Site Configuration

Navigation

Environment Variables

Features

Blog System

Video Library

Components

Performance Optimization

Documentation

Testing Performance

Mobile Responsiveness

Documentation

Testing Mobile Responsiveness

Deployment

Quick Deployment

Initial Setup

CI/CD Pipeline

Deployment Documentation

Monitoring

API Endpoints

Available Endpoints

Components

Component Categories

Content Management

Blog Posts

Content Guidelines

Documentation

Getting Started

Deployment & Operations

Performance & Optimization

Accessibility & Mobile

Security

Contributing

Code Style

Git Workflow

Commit Messages

Testing

Troubleshooting

Common Issues

Getting Help

Project Status

Completed Features

Future Enhancements

License

About

Resources

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages