Skip to content

Unveiling the Directory Structure

AppLaunchKit 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 AppLaunchKit 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 specific to Expo development. This directory houses environment variables, configuration mechanism for Supabase connection details, and other Expo-specific settings. It also contains storybook setup for Expo. View the detailed structure of Expo app.

  • apps/next: Contains the codebase for your Next.js app, including Next.js specific components, logic, and configuration files tailored for Next.js development. 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. View the detailed structure of Next.js app.

  • apps/supabase: While Supabase offers a cloud-hosted option, for development purposes, you can leverage the Supabase CLI to set up a local instance on your machine. This directory contains the complete setup for local development. View the detailed structure of local Supabase setup.

packages directory

The heart of code reusability in AppLaunchKit lies within the packages directory. It stores reusable components, UI elements, hooks (custom React functions), utility functions, configurations, and assets that can be seamlessly integrated into both your Expo and Next.js apps. View the detailed structure of packages directory.

Understanding the Relationships

  • Each app directory apps/expo, apps/next, and apps/supabase manages its own configurations, environment variables and platform-specific functionalities.
  • Both client apps, Expo and Next.js, import and utilize the reusable components, assets, hooks, utilities etc. stored within the packages directory. This promotes code sharing and reduces 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 the need to write the same code for both Expo and Next.js apps, saving development time and effort.
  • Improved Maintainability: A centralized location for shared components simplifies maintenance and ensures consistency across the codebase.
  • Clear Separation of Concerns: Separate app directories with individual configurations promote better organization and maintainability 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.

By understanding the AppLaunchKit directory structure, you can effectively navigate the codebase, leverage code reusability, and build your universal app with efficiency.