[WIP] Finalize project specifications for Architex Axis

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Architex Axis - Complete Project Specification

Project Overview

Architex Axis is a modern, feature-rich project management platform built specifically for architecture and design firms. It provides role-based dashboards for administrators, freelancers, and clients, enabling seamless collaboration, time tracking, file management, and project oversight.

The platform features a comprehensive shadcn/ui migration with modern React architecture, Firebase backend, and production-ready infrastructure.

Table of Contents

1. Project Overview
2. Project Architecture
3. Technology Stack
4. Project Structure
5. Configuration Files
6. Database Schema
7. API Services
8. UI Components
9. Authentication & Authorization
10. Core Features
11. Development Setup
12. Deployment
13. Testing Strategy
14. Performance Optimizations
15. Accessibility Features
16. Security Considerations
17. Monitoring & Analytics
18. Future Enhancements
19. Conclusion

Project Architecture

Frontend Architecture

• Framework: React 18.2.0 with TypeScript 5.2.2
• Build Tool: Vite 5.0 with optimized chunking
• Routing: React Router 6.22 with role-based routing
• State Management: React Context API with custom hooks
• UI Library: shadcn/ui (Radix UI primitives + Tailwind CSS)
• Styling: Tailwind CSS 3.3.5 with custom design system
• Icons: Lucide React + Tabler Icons

Backend Architecture

• Database: Firebase Firestore (NoSQL)
• Authentication: Firebase Auth
• File Storage: Firebase Storage + Cloudinary
• Real-time: Firebase real-time listeners
• Security: Firebase Security Rules

Development Tools

• Linting: ESLint with TypeScript rules
• Testing: Vitest + React Testing Library + Playwright
• Code Quality: Prettier, Stylelint
• Performance: Custom performance monitoring utilities

Technology Stack

Core Dependencies

{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "typescript": "^5.2.2",
  "vite": "^5.4.20",
  "@radix-ui/react-*": "Various versions",
  "tailwindcss": "^3.3.5",
  "firebase": "^12.4.0",
  "react-router-dom": "^6.22.0",
  "react-hook-form": "^7.62.0",
  "zod": "^4.1.0",
  "recharts": "^3.1.2",
  "date-fns": "^4.1.0"
}

Development Dependencies

{
  "@types/node": "^20.10.0",
  "@types/react": "^18.2.37",
  "@types/react-dom": "^18.2.15",
  "@vitejs/plugin-react": "^4.1.1",
  "vitest": "^1.6.1",
  "playwright": "^1.43.1",
  "eslint": "^8.53.0",
  "typescript-eslint": "^8.40.0"
}

Project Structure

architex-axis/
├── public/                          # Static assets
│   ├── vite.svg
│   └── [other static files]
├── src/
│   ├── api/                        # API integration layer
│   │   └── timers/                 # Timer API endpoints
│   ├── components/                 # React components
│   │   ├── ui/                     # shadcn/ui components
│   │   ├── admin/                  # Admin-specific components
│   │   ├── freelancer/             # Freelancer components
│   │   ├── client/                 # Client components
│   │   ├── auth/                   # Authentication components
│   │   ├── charts/                 # Chart components
│   │   ├── dashboard/              # Dashboard components
│   │   ├── file/                   # File management
│   │   ├── files/                  # Enhanced file management
│   │   ├── messaging/              # Messaging system
│   │   ├── mobile/                 # Mobile optimizations
│   │   ├── navigation/             # Navigation components
│   │   ├── performance/            # Performance monitoring
│   │   ├── profile/                # User profile components
│   │   ├── project/                # Project management
│   │   ├── theme/                  # Theme system
│   │   └── timer/                  # Timer components
│   ├── contexts/                   # React Context providers
│   │   ├── modules/                # Context modules
│   │   ├── AppContext.tsx          # Main app context
│   │   └── TimerSyncContext.tsx    # Timer synchronization
│   ├── demo/                       # Demo pages
│   ├── demos/                      # Additional demos
│   ├── hooks/                      # Custom React hooks
│   ├── lib/                        #...

</details>



<!-- START COPILOT CODING AGENT TIPS -->
---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click [here](https://survey3.medallia.com/?EAHeSx-AP01bZqG0Ld9QLQ) to start the survey.