Introduction & Platform Overview
Relevant source files
The following files were used as context for generating this wiki page:
Monarch Property Management is a comprehensive, enterprise-grade property management platform designed to streamline real estate operations through high-performance technology and a robust design system. The platform serves as a centralized hub for property managers, tenants, and vendors, providing tools for project assignment, financial tracking, real-time communications, and secure data management.
Sources: README.md:1-10, src/pages/Sitemap.tsx:10-20
The platform is built on a modern stack featuring React 18, TypeScript, and Supabase, emphasizing professional standards such as WCAG 2.2 AA accessibility compliance and enterprise-level security via PostgreSQL Row-Level Security (RLS).
Sources: README.md:55-70, src/design-system/README.md:10-20
Core Platform Architecture
The Monarch platform utilizes a multi-tenant architecture designed for scalability and high performance. The system is split into three primary functional areas: Frontend, Backend-as-a-Service (BaaS), and Professional Integrations.
Architectural Components
| Component | Technology | Role |
|---|---|---|
| Frontend Framework | React 18 / Vite | Core application logic and build optimization |
| Language | TypeScript | Type-safe development across the stack |
| Styling | Tailwind CSS | Utility-first styling with a custom design system |
| Backend/Database | Supabase (PostgreSQL) | Auth, real-time data, and secure storage |
| Infrastructure | Edge Functions | Serverless logic and third-party integrations |
| Payments | Stripe | Automated invoicing and secure transactions |
Sources: README.md:84-105, src/design-system/README.md:40-50
System Data Flow
The following diagram illustrates the high-level data flow between the client interface and the secure backend infrastructure.
The platform leverages Row-Level Security (RLS) to ensure that data access is restricted based on user roles (Admin, Vendor, Tenant).
Sources: README.md:30-40, DEPLOYMENT_GUIDE.md:10-25
Functional Portals
The platform is partitioned into specialized portals based on user roles, ensuring a tailored experience and strict access control.
- Property Manager Portal: Focuses on the dashboard overview, tenant management, and project tracking.
- Vendor Portal: Handles onboarding, RFQ (Request for Quote) systems, contract management, and payout history.
- Admin Portal: Provides oversight for user management, system audit logs, and security monitoring.
- Public/Tenant Interface: Includes property browsing, amenities showcases, and news/blog updates.
Sources: src/pages/Sitemap.tsx:35-85
Monarch Design System
The visual and interactive layer of the platform is governed by the Monarch Design System, which uses a token-driven approach to maintain consistency.
Visual Foundations
Visual properties are defined in a centralized tokens.json file, serving as the "single source of truth" for the application. This includes:
- Semantic Colors: Success (Sage Green), Warning (Amber), Error (Red), and Info (Sky Blue) colors are all WCAG AA compliant.
- Typography: Utilizes 'Inter' for sans-serif UI and 'Playfair Display' for serif headings.
- Surface Palette: A warm off-white palette (
--background: 40 25% 97%) for light mode and deep charcoal (--background: 0 0% 8%) for dark mode.
Sources: src/design-system/README.md:15-30, src/index.css:8-50
Theming Logic
The platform implements an enhanced ThemeProvider that detects system preferences and manages manual overrides while preventing a "Flash of Unstyled Content" (FOUC).
Performance & Optimization Strategies
Monarch is optimized for high performance, targeting a 95+ Lighthouse score through several critical strategies.
- LCP Optimization: Critical images like hero backgrounds are preloaded in the
index.htmlfile usingfetchpriority="high". - Resource Hints: Early connections to Supabase and Google Fonts are established via
preconnectanddns-prefetchhints. - Code Splitting: The platform uses lazy loading for non-critical resources and components.
- Database Hardening: Performance indexes are implemented in the PostgreSQL database to improve query speeds by 10-100x for vendor and tenant data.
Sources: index.html:5-20, README.md:120-130, DEPLOYMENT_GUIDE.md:150-165
Conclusion
Monarch Property Management is a production-ready ecosystem combining enterprise-grade security with high-performance frontend components. By leveraging a token-driven design system and a hardened Supabase backend, the platform provides a scalable solution for property lifecycle management, from initial RFQs to long-term tenant relations and automated financial payouts.
Sources: README.md:1-5, src/pages/DesignSystemShowcase.tsx:250-270