Frontend Development

Documentation for TendSocial's React frontend application.

Overview

The frontend is built with:

• React 19 with TypeScript
• Vite for development and builds
• TailwindCSS for styling
• React Router for navigation
• Zustand for state management

Documentation

Theming & Styling

• UI Theming - Theme system documentation:
  • CSS custom properties for colors
  • Theme switching (light/dark)
  • Component styling patterns

Project Structure

apps/frontend/src/
├── components/       # Reusable UI components
├── pages/            # Route pages
├── lib/              # Utilities and API client
├── hooks/            # Custom React hooks
├── types/            # TypeScript interfaces
└── styles/           # Global CSS

Key Patterns

Pattern	Usage
API Client	fetch with auth headers from localStorage
Auth State	Managed via React context + localStorage
Theme	CSS custom properties with .dark class toggle
Forms	Controlled components with Zod validation

Routes

The app uses three navigation tiers:

• /platform/* - Super Admin platform console
• /company/* - Company settings and management
• /user/* - Personal profile and settings

See Also

• Tech Stack - Full technology versions
• Contributing - Development setup