Skip to main content

Folder Structure

Deciding on a folder structure is still a significant challenge for many developers in the development process. Let's take a look at the structure of a project started with dooboo-cli.

1. App Directory​

Capture Screen
img-folder-app

The App directory is an essential part of file-based routing. It can be understood as a collection of top-level components that compose each screen. This directory may include various tab routers that bundle the screens, but the basic concept remains the same.

2. Assets Directory​

Capture Screen
img-folder-assets

The Assets directory is where images, fonts, and other resources used in the app are gathered. It doesn't directly affect code execution but is crucial for managing the app's resources.

3. Src Directory​

The Src directory is responsible for the core functionalities of the app. It includes the store managing the app's state, providers enabling state changes, custom UI components, utility functions, and constants, strings, themes used in the app.

Capture Screen (apis, providers)
img-folder-src-1
  • The apis subdirectory seen in the above screen gathers codes for server communication in the app, utilizing fetch or axios.
  • The providers subdirectory is where providers used in the app are collected. Providers manage the app's state and enable state changes. They can be implemented using Redux, MobX, Recoil, etc.
Capture Screen (uis, utils)
img-folder-src-1
  • The uis subdirectory is where reusable components that go into the app directory are located. Not all reusable components need to be placed here; those commonly used across multiple screens can be stored here for efficiency.
  • The utils subdirectory gathers utility functions used in the app. This is for enhancing code reusability by centralizing necessary functionalities.