Developer Documentation

Complete architecture and development guide

Tech Stack

Frontend

  • • React 18 - UI framework with concurrent rendering
  • • TypeScript - Progressive type safety adoption
  • • Tailwind CSS - Utility-first styling
  • • Shadcn/ui - Accessible component library
  • • React Query - Server state management
  • • Framer Motion - Animation library

Backend

  • • Base44 BaaS - Backend platform
  • • Deno - Serverless runtime
  • • PostgreSQL - Database
  • • JSON Schema - Data validation
  • • OAuth - Authentication
Folder Structure
workgenius/
├── pages/                  # Routes (FLAT - no subfolders)
│   ├── Dashboard.jsx
│   ├── ClientManagement.jsx
│   └── TaskManager.jsx
│
├── components/
│   ├── ui/                # Shadcn components
│   ├── shared/            # Reusable components
│   ├── client/            # Client features
│   ├── sales/             # Sales features
│   ├── hooks/             # Custom hooks
│   ├── utils/             # Utilities
│   ├── routing/           # Route config
│   ├── security/          # Auth & permissions
│   └── types/             # TypeScript types
│
├── entities/              # JSON schemas
├── functions/             # Backend (Deno)
└── Layout.jsx             # App layout
Quick Reference

Common Hooks

  • • useAuth() - User authentication
  • • useEntityQuery() - Fetch entities
  • • useEntityMutation() - Update entities
  • • usePrefetch() - Preload data/code
  • • useDebounce() - Debounce values

Shared Components

  • • PageHeader - Page titles
  • • NavigationSidebar - Side navigation
  • • StatsGrid - Metric cards
  • • LoadingState - Loading UI
  • • EmptyState - Empty states