Unveiling the Directory Structure

CloudNua Mobile embraces a well-organized monorepo structure to streamline development and maintain a single source of truth for your universal app's codebase. This document decodes the purpose of each directory and how they work together to empower your development process.

Overview

|-- apps/
|   |-- expo
|   |-- next
|   |-- supabase
|   |   |-- supabase // Supabase local setup
|   |   |-- .env
|   |   |-- .gitignore
|-- packages
|   |   |-- assets
|   |   |-- components
|   |   |   |-- primitives
|   |   |   |-- custom
|   |   |-- config
|   |   |-- hooks
|   |   |-- utils
|-- package.json
|-- .gitignore

Root Directory (Monorepo)

This directory serves as the central hub for your CloudNua Mobile project. It houses essential files for overall project management and monorepo specific setup.

apps directory

This is where platform-specific configurations and codebases reside.

• apps/expo: Contains the codebase for your Expo app, including Expo specific components, logic, and configuration files. This directory houses environment variables, configuration mechanism for Supabase connection details, and Expo-specific settings. It also contains storybook setup for Expo.

• apps/next: Contains the codebase for your Next.js app, including Next.js specific components, logic, and configuration files. This directory will also have its own configuration mechanism for Supabase connection details, and other Next.js-specific settings. It also contains storybook setup for Next.js.

• apps/supabase: Contains the complete setup for local development using the Supabase CLI to set up a local instance on your machine.

packages directory

The heart of code reusability in CloudNua Mobile lies within the packages directory. It stores reusable components, UI elements, hooks, utility functions, configurations, and assets that integrate into both Expo and Next.js apps.

Understanding the Relationships

• Each app directory manages its own configurations, environment variables and platform-specific functionalities.
• Both client apps import and utilize reusable components, assets, hooks, utilities stored within the packages directory, promoting code sharing and reducing redundancy.
• The root directory acts as the central hub for project-wide dependencies, tools, and other configurations.

Benefits of the Structure

• Reduced Code Duplication: The packages directory eliminates writing the same code for both Expo and Next.js apps.
• Improved Maintainability: A centralized location for shared components simplifies maintenance and ensures consistency.
• Clear Separation of Concerns: Separate app directories with individual configurations promote better organization for each platform-specific codebase.
• Efficient Project Management: The monorepo structure keeps your entire project's codebase in one place, simplifying version control and collaboration.