This document provides a comprehensive overview of all technologies, frameworks, libraries, and tools used in TendSocial.

Table of Contents

• Frontend Stack
• Backend Stack
• AI/ML Services
• Development Tools
• CI/CD
• Infrastructure

---

Frontend Stack (apps/frontend)

Core Framework

• React 19.2.1 - Modern UI library with latest concurrent features
• TypeScript 5.9+ - Type-safe development
• Vite 6.4.1 - Next-generation frontend build tool with HMR

UI & Styling

• Tailwind CSS 4.1.17 - Utility-first CSS framework
  • @tailwindcss/vite - Native Vite integration plugin
  • autoprefixer - Automatic vendor prefixing
  • postcss - CSS transformation pipeline
• Lucide React 0.554.0 - Beautiful & consistent icon library

State Management & Data Flow

• React Context API - Built-in state management for global app state
• Local State - Component-level state management with hooks

Drag & Drop

• @hello-pangea/dnd 18.0.1 - Accessible drag-and-drop for lists

Utilities

• JSZip 3.10.1 - Client-side ZIP creation for content export bundles

Package Manager

• pnpm 10.25.0 - Fast, disk space efficient package manager with workspaces support

---

Backend Stack (apps/backend)

Runtime & Framework

• Node.js 24.x - JavaScript runtime (ESM modules, Alpine Linux for Docker)
• Fastify 5.x - High-performance web framework
  • @fastify/cors - CORS support
  • @fastify/jwt - JWT authentication
  • @fastify/rate-limit - Rate limiting middleware
  • fastify-type-provider-zod - Type-safe route validation with Zod

Language

• TypeScript 5.6+ - Type-safe backend development

Database & ORM

• Prisma 7.x - Next-generation ORM with type safety
  • @prisma/client - Database client
  • @prisma/adapter-pg - Driver adapter for PostgreSQL
  • PostgreSQL - Primary database

Authentication & Security

• bcryptjs - Password hashing
• JWT - Token-based authentication via @fastify/jwt

Validation

• Zod 3.x - TypeScript-first schema validation

AI Services Integration

• @google/genai (latest) - Official Google Generative AI SDK
  • Text generation (Gemini 2.5 Flash)
  • Image generation (Imagen 4.0)

Web Scraping & Automation

• Puppeteer - Headless Chrome automation for:
  • HTML/CSS scraping from brand websites
  • Screenshot generation

Cloud Services

• @aws-sdk/client-s3 - AWS S3 SDK for file storage
  • Image uploads
  • Generated asset storage

Environment Management

• dotenv - Environment variable management

---

AI/ML Services

Google Cloud AI

Text Generation

• Model: gemini-2.5-flash
• Use Cases:
  • Brand analysis (voice, mission, values inference)
  • Content ideation (blog topics, campaigns)
  • Blog post writing (markdown with frontmatter)
  • Social media post generation (multi-platform)
  • Video script creation
  • Chat assistants (brand consultant, blog helper)

Image Generation

• Model: imagen-4.0-generate-001
• Use Cases:
  • Blog cover images
  • Social media graphics
  • Brand-consistent visual assets

---

Development Tools

Testing

• Vitest - Unit testing framework (replaces Jest)

Development Server

• tsx - TypeScript execution for development
• Turbo - Monorepo build system and task runner

Code Quality

• TypeScript Compiler - Type checking via tsc --noEmit

---

CI/CD

GitHub Actions

• Workflow: .github/workflows/ci.yml
• Triggers:
  • Push to main branch
  • Pull requests to main

Pipeline Stages

1. Test Job

• Runner: Ubuntu Latest
• Steps:
  1. Checkout code
  2. Install pnpm
  3. Setup Node.js 24
  4. Install dependencies (--frozen-lockfile)
  5. Generate Prisma Client
  6. Lint (type check via tsc)
  7. Run Tests

2. Build Job

• Docker Build:
  • Uses turbo prune for optimized monorepo builds
  • Builds backend image (tendsocial-api)
  • Builds frontend image (tendsocial-web)

---

Infrastructure

Production Requirements

Hosting

• Frontend: Cloud Run (Nginx container) or Vercel/Netlify
• Backend: Google Cloud Run (Node.js container)

Database

• Production: Neon (Serverless Postgres) or Google Cloud SQL

File Storage

• AWS S3 or Cloudflare R2

Secrets

• Google Secret Manager - Secure storage for API keys and database URLs

---

Package Managers & Workspaces

pnpm Workspace Configuration

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'

• apps/frontend: Frontend React app
• apps/backend: Backend Fastify API
• packages/types: Shared TypeScript definitions

---

Environment Variables

Frontend (apps/frontend/.env)

VITE_API_URL=http://localhost:4000
VITE_GOOGLE_API_KEY=your_gemini_api_key

Backend (apps/backend/.env)

DATABASE_URL="postgresql://..."
JWT_SECRET="your-secret-key"
GOOGLE_API_KEY="your-google-cloud-api-key"
AWS_ACCESS_KEY_ID="your-aws-key"
AWS_SECRET_ACCESS_KEY="your-aws-secret"
S3_BUCKET_NAME="tendsocial-assets"