113 lines
2.9 KiB
Markdown
113 lines
2.9 KiB
Markdown
# Tech Context - Technologies & Setup
|
|
|
|
## Core Technologies
|
|
|
|
### Frontend Stack
|
|
- **Next.js**: 15.0.4 (React framework with App Router)
|
|
- **React**: 19.0.0 (UI library)
|
|
- **TypeScript**: Type-safe JavaScript
|
|
- **Tailwind CSS**: Utility-first CSS framework
|
|
- **Framer Motion**: Animation library
|
|
- **HeadlessUI**: Unstyled UI components
|
|
- **Lucide React**: Icon library
|
|
- **React Icons**: 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
|
|
```env
|
|
# 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
|
|
```bash
|
|
# Install dependencies
|
|
pnpm install
|
|
|
|
# Development server (Docker)
|
|
docker compose -f docker-compose.dev.yml up
|
|
|
|
# Development server (local)
|
|
pnpm dev
|
|
```
|
|
|
|
### Production Deployment
|
|
```bash
|
|
# 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
|