Quick Start & Local Setup
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
This guide provides the necessary technical instructions for setting up and initializing the Monarch Property Management platform. The system is an enterprise-grade property management application built with a React frontend and a Supabase backend, utilizing a token-driven design system for visual consistency and Row-Level Security (RLS) for data protection.
The scope of this setup covers frontend environment configuration, backend database hardening through migrations, and verification of core systems including security and performance metrics. Developers should ensure they have access to the Supabase dashboard and the GitHub repository before proceeding.
Sources: DEPLOYMENT_GUIDE.md:14-23, index.html:26-30
Environment Configuration
The application requires specific environment variables to communicate with the Supabase backend. These are categorized into public client variables and restricted server keys.
Essential Variables
| Variable | Scope | Description |
|---|---|---|
VITE_SUPABASE_URL | Client | The API endpoint for the Supabase project. |
VITE_SUPABASE_PUBLISHABLE_KEY | Client | The anonymous public key for client-side queries. |
SUPABASE_SERVICE_ROLE_KEY | Server-Only | High-privilege key for admin tasks. NEVER expose to client. |
Sources: DEPLOYMENT_GUIDE.md:120-130, src/utils/testUtilities.ts:255-265
Development Workflow
The local development environment relies on Node.js and the Vite build tool. The application utilizes a "Design Token" approach where visual properties are centralized in a JSON specification.
Project Initialization
- Dependency Management: Install the required packages using
npm install. - Design System Sync: The system uses
tokens.jsonas the single source of truth for colors, spacing, and typography. Rebuild CSS usingnpm run devornpm run buildafter updating tokens. - Local Server: Launch the development server using
npm run dev.
Sources: src/design-system/README.md:15-30, DEPLOYMENT_GUIDE.md:135-140
Design System Architecture
The following diagram illustrates how design tokens flow from the specification into the application components.
The design system ensures that all visual properties, including motion and accessibility standards, are enforced through a centralized ThemeProvider.
Sources: src/design-system/README.md:40-55
Backend Hardening & Database Setup
A critical part of the setup involves the "Backend Hardening" phase, which implements security policies and performance optimizations.
Migration Steps
- Database Backup: Before applying migrations, create a backup named
pre-hardening-backup-YYYY-MM-DDvia the Supabase dashboard. - SQL Execution: Run the migration script located at
supabase/migrations/20251019_backend_hardening.sql. This script creates performance indexes and helper functions. - Verification: Run
scripts/verify_deployment.sqlto confirm that 8 indexes were created and 15+ RLS policies are active.
Sources: DEPLOYMENT_GUIDE.md:58-95
Data Flow & Security
The system enforces role-based access control (RBAC) through Supabase RLS policies.
Authentication involves distinct roles: admin, vendor, and tenant, each redirected to specific dashboards upon successful login.
Sources: DEPLOYMENT_GUIDE.md:148-155, src/App.tsx:165-170
Health & Performance Testing
The project includes a suite of test utilities in src/utils/testUtilities.ts to verify the environment post-setup.
Verification Commands
Developers can use the runHealthCheck() and runAllTests() functions to programmatically verify the local environment.
| Test Type | Function | Validation Criteria |
|---|---|---|
| RLS Policy | testRLSPolicies() | Confirms audit logs are hidden and user data is isolated. |
| Performance | measurePagePerformance() | Ensures FCP < 1.8s and TTFB < 600ms. |
| Rate Limiting | testAuthRateLimit() | Verifies that consecutive failed logins trigger blocks. |
| Env Var | validateEnvironment() | Checks for missing VITE_ prefixed variables. |
Sources: src/utils/testUtilities.ts:100-115, src/utils/testUtilities.ts:250-280
Conclusion
By following these setup procedures, developers establish a production-ready environment that adheres to Monarch Property Management's standards for security and performance. Key steps include the strict configuration of environment variables, the application of backend hardening migrations, and the utilization of the token-driven design system for frontend development. Re-running health checks is recommended after any significant configuration change.
Sources: DEPLOYMENT_GUIDE.md:300-315, src/design-system/README.md:120-130