Skip to content

Directory Structure

Directory Structure

This document provides an overview of the main directories and files in our project structure.

Root

  • /backend: Backend applications and services.
  • /frontend: Frontend applications and shared resources (monorepo).

Backend Applications (/backend)

  • /supabase: Local setup for Supabase with auth, db, and storage setup.
  • /express: Node.js backend application using Express framework with auth, db, and storage setup.
  • /firebase: Local setup for Firebase for edge functions only.

Frontend Monorepo (/frontend)

The frontend uses a monorepo structure to manage multiple applications and shared resources efficiently.

Applications (/apps)

  • /expo: React Native application built with Expo
    • Includes mobile-specific components and screens
    • Utilizes shared packages from the monorepo
  • /next: Next.js web application
    • Contains web-specific pages and components
    • Leverages server-side rendering capabilities of Next.js

Shared Packages (/packages)

  • /assets: Common assets like images, fonts, and icons
  • /components: Reusable UI components
    • Designed to work across both web and mobile platforms
  • /config: Configuration files and environment variables
  • /hooks: Custom React hooks for shared functionality
  • /utils: Utility functions and helper methods
  • /modules: Feature-based modules (explained in detail below)

Module Structure

Each module in /frontend/packages/modules follows a consistent structure. However, the specific components within each module may vary based on its purpose and functionality. A module might include all of the following elements or only a subset, tailored to its specific requirements:

  • /assets: Module-specific images, icons, etc.
  • /components: UI components exclusive to the module
  • /constants: Module-specific constant values and enumerations
  • /contexts: React contexts for state management within the module
  • /hooks: Custom hooks related to the module’s functionality
  • /providers: Service providers and API integrations
  • /store: State management (e.g., Redux slices, MobX stores)
  • /types: TypeScript interfaces and type definitions

Key Modules

  • /init: Handles providers initialization and setup
  • /auth: Manages authentication and authorization
  • /user-profile: Manages user profile and settings
  • /file-upload: Handles file upload functionality across the app
  • /notifications: Handles notifications functionality across the app

Configuration Files

  • package.json: Defines dependencies and scripts for the project
  • tsconfig.json: TypeScript compiler options and path aliases
  • .eslintrc.js: ESLint rules for maintaining code quality
  • .prettierrc: Prettier settings for consistent code formatting

Benefits of This Structure

  1. Scalability: Easy to add new modules or applications as the project grows
  2. Code Reusability: Shared packages reduce duplication across apps
  3. Consistency: Standardized module structure promotes maintainability
  4. Separation of Concerns: Clear boundaries between different parts of the application
  5. Easier Testing: Modular structure facilitates unit and integration testing
  6. Flexible Deployment: Can deploy web and mobile apps independently
  7. Plug-N-Play: Easy to add more modules as you grow or remove the ones you don’t need

This architecture is designed to support large-scale applications with multiple platforms while promoting code sharing and maintainability.