chaulmark/finlion-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
finlion-website/cline_docs/techContext.md

3 KiB
Raw Permalink Blame History

Tech Context - Technologies & Setup

Core Technologies

Frontend Stack

  • Next.js: 16.0.10 (React framework with App Router)
  • React: 19.2.3 (UI library)
  • TypeScript: 5.9.3 (Type-safe JavaScript)
  • Tailwind CSS: 4.1.18 (Utility-first CSS framework)
  • @tailwindcss/postcss: 4.1.18 (PostCSS plugin for Tailwind v4)
  • Framer Motion: 12.23.26 (Animation library)
  • HeadlessUI: 2.2.9 (Unstyled UI components)
  • Lucide React: 0.561.0 (Icon library)
  • React Icons: 5.5.0 (Additional icon library)

Backend Stack

  • Next.js API Routes: Server-side API endpoints
  • Nodemailer: Email sending library
  • Upstash Redis: Cloud Redis for rate limiting
  • Node.js: Runtime environment

Development Tools

  • PNPM: 9.14.2 (Package manager)
  • ESLint: Code linting
  • PostCSS: CSS processing
  • Autoprefixer: CSS vendor prefixing
  • Docker: Containerization
  • Docker Compose: Multi-container orchestration

Environment Configuration

Required Environment Variables

# Email Configuration
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
GOOGLE_EMAIL=system@deafgain.org
GOOGLE_APP_PASSWORD=ojvlysraxwjriwzy
RECIPIENT_EMAIL=mark@finlion.com

# Redis Configuration
UPSTASH_REDIS_REST_URL=https://gusc1-resolved-jaybird-30779.upstash.io
UPSTASH_REDIS_REST_TOKEN=AXg7ASQgNDMzMDE0MTYtNWE0Ni00OTc3LThhYjktM2IxMzMxNGMyMzMxNWRiNGMyOGU2MjE0NGUyNTkwMTQyNmUxZTU2NzE4NDI=

Email Service Setup

  • Provider: Gmail SMTP
  • Authentication: Google App Password (not regular password)
  • Security: TLS encryption (port 587)
  • From Address: system@deafgain.org
  • Recipient: mark@finlion.com

Redis Setup

  • Provider: Upstash (cloud Redis service)
  • Purpose: Rate limiting for API endpoints
  • Configuration: REST API access via URL and token

Development Setup

Prerequisites

  • Node.js 18+
  • PNPM package manager
  • Docker and Docker Compose
  • Git

Local Development

# Install dependencies
pnpm install

# Development server (Docker)
docker compose -f docker-compose.dev.yml up

# Development server (local)
pnpm dev

Production Deployment

# Production build and run
docker compose up -d

Technical Constraints

Performance

  • Server-side rendering for SEO
  • Optimized images and assets
  • Efficient CSS with Tailwind

Security

  • Input validation and sanitization
  • Rate limiting on API endpoints
  • Environment variable protection
  • XSS prevention

Scalability

  • Containerized deployment
  • Redis for distributed rate limiting
  • Stateless API design

File Structure

  • Configuration Files: Root level (package.json, tsconfig.json, etc.)
  • Source Code: /src directory
  • Static Assets: /public directory
  • Docker: Multiple compose files for different environments
  • Documentation: /cline_docs directory

Build Process

  • TypeScript Compilation: Automatic via Next.js
  • CSS Processing: Tailwind CSS compilation
  • Asset Optimization: Next.js built-in optimization
  • Docker Build: Multi-stage builds for production