Folder Structure

I've tried to make the folder structure as simple as possible. It should be easy to understand and easy to navigate.

Interactive Folder Structure

This is an interactive tree view of mobile app folder structure. You can click on the folders to expand them.

• supersaas

• Assets: This folder contains the assets of the app such as images, fonts, etc.
• API: This folder contains the API files. We provide a basic API client and provider and you just need to create query and mutation for your modules.
• Components: This folder contains the components of the app. Mainly components used inside the app folder. The main purpose of components is to be more generic and can be used in any screens.
• Constants: This folder contains the constants of the app.
• Context: The context folder is crucial for state management. It contains React context providers, including AuthProvider.tsx for handling authentication state across the app.
• Utils: The utils folder contains helper functions and utility modules.
• Hooks: The hooks folder contains custom hooks for the app.
• Types: This folder contains the global types.
• Store: The store folder contains the state management logic for the app. We use Zustand for state management.
• App: The app folder is the heart of your application, containing the main screens and navigation structure. We are using expo router for routing and similar to nuxt.js, you can create layouts and nested layouts. Please check the expo router documentation for more information.
• Translations: This folder contains the translation resources files. We recommend using translation files even if you are not supporting multiple languages as it will help you to support multiple languages in the future and also help you to find all the strings in one place.