Project Structure

Munza’s project architecture was thoughtfully organized to promote clarity, scalability, and ease of maintenance. The application is divided into functional modules, with a clear separation of concerns between UI components, business logic, API services, and state management. At the top level, we have directories for components (reusable UI pieces like buttons, modals, and forms), pages (corresponding to site routes like Home, Dashboard, and Studio), services (wrappers around API calls to Supabase, RunwayML, and others), and utilities (helper functions and shared logic).

Each page component is responsible for rendering its section of the UI and interacting with services as needed. API services handle all communication with external systems and abstract away the complexities of request formatting, error handling, and authentication. The state of the application is managed using React hooks, with custom hooks designed to encapsulate common patterns like authentication checks, video fetches, and form submissions. The codebase is fully typed with TypeScript, providing strong guarantees about code correctness and helping us catch bugs early during development.