This document provides a comprehensive overview of how the Solana App Kit codebase is organized. Understanding this structure will help you navigate the project efficiently and know exactly where to make changes for your specific needs.
Root Directory Overview solana-app-kit/ ├── src/ # Mobile app source code ├── server/ # Backend server ├── android/ # Android-specific files ├── ios/ # iOS-specific files ├── docs/ # Documentation ├── scripts/ # Build and utility scripts ├── App.tsx # Main app component ├── package.json # Dependencies and scripts └── Configuration files # Various config files Monorepo Structure : The kit combines mobile app, backend server, and documentation in a single repository for easier development and maintenance
Mobile App Structure (src/) The mobile application is organized into several key directories, each serving a specific purpose:
Core Features
Modules
Screens
Shared Resources
Assets
src/core/src/core/ ├── chat/ # AI chat integration ├── dev-mode/ # Development tools and debugging ├── profile/ # User profile management ├── shared-ui/ # Reusable UI components └── thread/ # Social feed and threading Purpose : Core features are central to the app’s functionality and provide shared capabilities across multiple screens and modules.src/modules/src/modules/ ├── data-module/ # Blockchain data fetching ├── meteora/ # Meteora protocol integration ├── moonpay/ # MoonPay fiat on-ramp ├── nft/ # NFT functionality ├── pump-fun/ # Pump.fun integration ├── raydium/ # Raydium DEX integration ├── solana-agent-kit/ # AI agent integration ├── swap/ # Token swapping ├── token-mill/ # Token creation and management └── wallet-providers/ # Wallet connection providers Purpose : Each module encapsulates a specific protocol or feature, making the codebase modular, maintainable, and allowing you to use only what you need.src/screens/src/screens/ ├── Common/ # Shared screens │ ├── intro-screen/ # App introduction │ ├── login-screen/ # Authentication │ └── launch-modules-screen/ # Feature selection └── sample-ui/ # Example implementations ├── chat/ # Chat interface examples └── Threads/ # Social feed examples
Common Screens Shared across features - intro, login, and module selection screens
Sample UI Example implementations showing how to use core features and modules
Purpose : Screens define the user interface and navigation flow, providing the main entry points for different app features.src/shared/src/shared/ ├── config/ # App configuration ├── context/ # React Context providers ├── hooks/ # Custom React hooks ├── mocks/ # Mock data for development ├── navigation/ # Navigation configuration ├── services/ # API and blockchain services ├── state/ # Redux store and state management ├── types/ # TypeScript type definitions └── utils/ # Utility functions
Configuration App settings and environment configuration
Context React Context providers for global state
Hooks Custom React hooks for reusable logic
Navigation Navigation setup and routing configuration
State Management Redux store and state management slices
Types TypeScript definitions for type safety
Purpose : Shared resources provide common functionality and maintain consistency across the entire application.src/assets/src/assets/ ├── images/ # Image files ├── svgs/ # SVG graphics ├── colors.ts # Color palette └── typography.ts # Typography system
Images Static image files for app branding and UI
SVGs Scalable vector graphics for icons and illustrations
Colors Color palette definitions for consistent theming
Typography Typography system for consistent text styling
Purpose : Centralized asset management and design system definitions ensure visual consistency.Backend Server Structure (server/) The backend server provides essential API endpoints and services:
Show 🗄️ Server Directory Structure
server/ ├── src/ │ ├── controllers/ # Request handlers │ ├── routes/ # API endpoint definitions │ ├── service/ # Business logic │ ├── db/ # Database configuration │ ├── types/ # TypeScript interfaces │ └── utils/ # Server utilities ├── package.json # Server dependencies └── .env.example # Environment template Purpose : The server handles blockchain operations, data persistence, external API integrations, and provides enhanced functionality for the mobile app. iOS Directory
Android Directory
ios/ios/ ├── SolanaAppKit/ # Main iOS project │ ├── Info.plist # iOS app configuration │ ├── AppDelegate.mm # iOS app delegate │ └── Images.xcassets/ # iOS app icons and images ├── Podfile # CocoaPods dependencies └── SolanaAppKit.xcworkspace # Xcode workspace iOS Development : Requires macOS and Xcode for building and testing on iOS devices
android/android/ ├── app/ │ ├── src/main/ # Main Android source │ ├── build.gradle # App-level build configuration │ └── proguard-rules.pro # Code obfuscation rules ├── gradle/ # Gradle wrapper └── build.gradle # Project-level build configuration Android Development : Works on any platform with Android Studio and Java/Kotlin support
Configuration Files Key configuration files in the root directory:
App.tsx Main React Native component and app initialization entry point
package.json Project dependencies , scripts, and metadata configuration
app.config.js Expo configuration for builds, deployment, and app settings
babel.config.js JavaScript compilation configuration and plugin setup
metro.config.js Metro bundler configuration for React Native builds
tsconfig.json TypeScript compiler configuration and type checking rules
.env.local Environment variables (not in repo, created during setup)
mint.json Documentation configuration for this documentation site
Module Architecture Pattern Each module follows a consistent, well-defined structure:
Module Structure
Example Module Export
module-name/ ├── components/ # UI components specific to this module ├── hooks/ # Custom hooks for module functionality ├── screens/ # Screens specific to this module ├── services/ # API and blockchain services ├── types/ # TypeScript interfaces ├── utils/ # Utility functions ├── index.ts # Public API exports └── README.md # Module documentation
This pattern ensures:
Consistency Similar organization across all modules makes navigation predictable
Encapsulation Module internals are contained with clean public interfaces
Reusability Clean public APIs make modules easy to integrate and reuse
Maintainability Easy to understand and modify with clear separation of concerns
Data Flow Architecture Understanding how components connect and data flows through the application:
Component Hierarchy
Screens import and use Components from modules for UI composition
State Management
Components use Hooks for state management and business logic
External Operations
Hooks call Services for API interactions and blockchain operations
Utility Functions
Services use Utils for common operations and data processing
Type Safety
Everything uses Types for TypeScript type safety and IntelliSense
Data Flow Diagram Development Workflow Understanding the structure helps with common development tasks:
Show 🔧 Adding New Features
Create or extend modules in src/modules/ for protocol integrationsAdd components within the relevant module’s components/ directoryCreate hooks for business logic in the module’s hooks/ directoryUpdate module exports in index.ts to expose new functionality
Modify components within relevant modules for feature-specific UIUpdate shared components in src/core/shared-ui/ for common elementsAdjust styles using the design system in src/assets/Test across platforms to ensure consistent appearance
Add screens to src/screens/ organized by feature areaUpdate navigation configuration in src/shared/navigation/Add routing for deep linking and navigation flowsTest navigation on both iOS and Android platforms
Extend services in modules for protocol-specific integrationsAdd shared services in src/shared/services/ for common APIsUpdate types to include new API response interfacesAdd error handling and status management
Update Redux slices in src/shared/state/ for global stateAdd module-specific state using local hooks when appropriateImplement persistence for important user dataTest state synchronization across components Best Practices
Module Independence Keep modules loosely coupled to maintain modularity and testability
Shared Code Put common functionality in src/shared/ for reusability across modules
Type Safety Define interfaces in module types/ directories for better developer experience
Export Consistency Use index.ts files for clean public APIs and easier imports
Documentation Update module READMEs when making changes to keep docs current
Testing Write tests for critical business logic in services and hooks
Next Steps Now that you understand the repository structure, explore these guides:
