Mission Control

Central hub for activity, tasks, goals, and tools. Built for TopDogLabs to track the journey toward financial independence through iOS app development.

Live URL: https://mission-control-rho-pink.vercel.app

Features

Dashboard

• Real-time KPI cards with live data from Supabase
• Mission statement banner
• Activity statistics
• Upcoming events
• Mission progress tracking

Tasks Overview

• Status breakdown (Open, In Progress, Review, Done)
• High priority and overdue task counts
• Recently updated and completed tasks
• Quick actions to Gantt Board

Projects

• Active sprint tracking
• Sprint progress visualization
• Project health cards with color-coded status
• Per-project task statistics

Calendar

• Google Calendar integration
• Event listing with time-based grouping
• Calendar selector
• Today's summary

Documents

• Markdown document management
• Folder organization
• Tag-based filtering
• Grid and list view modes
• Preview with syntax highlighting

Tools

• Calculator with full keyboard support
• Timer with start/stop/reset
• Password generator
• Quick links manager

Mission

• Progress dashboard for key metrics:
  • Freedom Progress (completed tasks)
  • iOS Portfolio (app count)
  • Side Hustle Revenue
  • Travel Fund
• Milestones timeline
• Next steps from high priority tasks
• Core values display

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui + Radix UI
• State: Zustand (client), Server Components (server)
• Database: Supabase
• Deployment: Vercel

Project Structure

mission-control/
├── app/                    # Next.js app router
│   ├── (routes)/          # Page components
│   ├── api/               # API routes
│   ├── error.tsx          # Global error boundary
│   ├── not-found.tsx      # 404 page
│   ├── loading.tsx        # Global loading state
│   ├── layout.tsx         # Root layout
│   ├── metadata.ts        # SEO metadata
│   └── sitemap.ts         # XML sitemap
├── components/
│   ├── ui/                # shadcn/ui components
│   ├── layout/            # Layout components (sidebar, etc)
│   ├── activity/          # Activity feed components
│   └── calendar/          # Calendar components
├── hooks/                 # Custom React hooks
├── lib/
│   ├── data/              # Data fetching functions
│   ├── supabase/          # Supabase client utilities
│   └── utils.ts           # Utility functions
├── types/                 # TypeScript types
└── public/                # Static assets

Key Improvements (Phase 9)

Performance

• Added loading states for all pages
• Implemented optimized skeleton screens
• Added loading.tsx for each route
• Configured optimizePackageImports for faster builds
• Added caching headers for static assets

Error Handling

• Global error boundary with error.tsx
• Custom SupabaseError class with error codes
• Safe wrapper for Supabase operations
• Retry mechanisms for failed requests
• User-friendly error messages

Accessibility

• Skip link for keyboard navigation
• ARIA labels on interactive elements
• aria-current="page" for active navigation
• Focus-visible styles for keyboard users
• Reduced motion support
• Semantic HTML structure

SEO & PWA

• Comprehensive metadata configuration
• Open Graph and Twitter card support
• robots.txt for crawlers
• sitemap.xml generation
• manifest.json for PWA support
• Security headers (X-Frame-Options, etc)

Developer Experience

• TypeScript strict mode
• Custom hooks for common patterns
• Utility hooks (useDebounce, useLocalStorage, etc)
• Proper error handling throughout
• Build-time type checking

Environment Variables

# Required
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

# Optional
NEXT_PUBLIC_GOOGLE_CLIENT_ID=  # For Calendar integration
NEXT_PUBLIC_MISSION_CONTROL_URL=
NEXT_PUBLIC_GANTT_BOARD_URL=
NEXT_PUBLIC_BLOG_BACKUP_URL=
NEXT_PUBLIC_GITEA_URL=
NEXT_PUBLIC_GITHUB_URL=
NEXT_PUBLIC_VERCEL_URL=
NEXT_PUBLIC_SUPABASE_SITE_URL=
NEXT_PUBLIC_GOOGLE_URL=
NEXT_PUBLIC_GOOGLE_CALENDAR_URL=
NEXT_PUBLIC_GOOGLE_CALENDAR_SETTINGS_URL=

Website URLs are centralized in lib/config/sites.ts and can be overridden via the optional variables above.

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Deployment

The app deploys automatically to Vercel on push to main:

npm run build && vercel --prod

Related Projects

• Gantt Board: https://gantt-board.vercel.app (Task management)
• Blog Backup: https://blog-backup-two.vercel.app (Daily digest)

License

Private - TopDogLabs