chaulmark/chrishaulmark-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
chrishaulmark-website/cline_docs/techContext.md
TheMaddax 85ed3cce2c Update NAD and KAD leadership references to reflect completed terms 
- Updated Hero component to show former positions
- Updated biography page with specific end dates (NAD: Jan 2025, KAD: July 2025)
- Updated Deafhood service page to reflect past experience
- Updated timeline components with term dates
- Updated Memory Bank documentation
- All references now accurately reflect Chris's leadership history
2025-09-17 08:48:34 -06:00

2.6 KiB
Raw Permalink Blame History

Tech Context

Technologies Used

Core Framework

  • Next.js: 14.1.0 (App Router)
  • React: 18.3.1
  • TypeScript: 5.7.2
  • Node.js: Required 20 or higher

Styling & UI

  • TailwindCSS: 3.4.15 (utility-first CSS)
  • Framer Motion: 11.12.0 (animations)
  • Lucide React: 0.462.0 (icons)
  • React Icons: 5.3.0 (additional icons)

Backend & Services

  • Upstash Redis: 1.34.3 (rate limiting & caching)
  • NodeMailer: 6.9.16 (email functionality)
  • XSS: 1.0.14 (security/sanitization)
  • Validator: 13.9.0 (input validation)

Maps & Visualization

  • React Simple Maps: 3.0.0 (geographic visualization)
  • TopoJSON Client: 3.1.0 (map data processing)

Development Tools

  • pnpm: 9.14.4 (package manager)
  • PostCSS: 8.4.49 (CSS processing)
  • Autoprefixer: 10.4.20 (CSS vendor prefixes)
  • TypeScript Types: Complete type definitions for all dependencies

Development Setup

Prerequisites

  • Node.js 20 or higher
  • pnpm package manager
  • Docker (for containerized development)

Environment Configuration

Required environment variables:

  • Email Configuration: Gmail SMTP settings for NodeMailer
  • Redis Configuration: Upstash Redis connection details
  • Security Settings: Various SMTP and security configurations

Development Commands

pnpm dev          # Start development server
pnpm build        # Build for production
pnpm start        # Start production server
pnpm lint         # Run ESLint

Docker Setup

  • Development: docker-compose.dev.yml with hot reloading
  • Production: Dockerfile with optimized build
  • Volume Mounting: Efficient development workflow

Technical Constraints

Performance

  • Image optimization through Next.js Image component
  • Code splitting via Next.js App Router
  • Efficient client-side navigation
  • Optimized Docker builds for production

Security

  • Content Security Policy implementation
  • XSS protection on all inputs
  • Rate limiting on API endpoints
  • Secure environment variable management
  • CORS policies properly configured

Accessibility

  • Responsive design (mobile-first)
  • Semantic HTML structure
  • Proper image alt texts
  • Focus management for interactive elements

Browser Support

  • Modern browsers supporting ES2020+
  • Progressive enhancement approach
  • Graceful degradation for older browsers

Deployment Architecture

  • Containerization: Docker-based deployment
  • Environment Separation: Different configs for dev/prod
  • Static Assets: Optimized through Next.js build process
  • API Routes: Serverless functions via Next.js API routes