# Customer repository structure

Learn about the structure of your GitHub customer repository.

## Structure of the GitHub customer repository

A commercetools Frontend's GitHub customer repository has the following structure.

```txt title="Structure of the GitHub customer repository"
└── packages
    └── PROJECT_NAME
        ├── backend
        ├── frontend
        └── types
```

### packages folder

The `packages` folder contains the folders of all your commercetools Frontend projects. Each project folder has the following structure.

```txt title="Structure of a project folder"
├── backend
│   └── Contains the extensions.
├── frontend
│   └── Contains the Frontend components.
└── types
    └── Contains the type definitions.
```

The `backend` folder contains the examples from documentation and the following.

| File / Folder | Content |
| :--- | :--- |
| `index.ts` | Code for [data sources](/frontend-development/development-concepts.md#data-sources), [actions](/frontend-development/development-concepts.md#actions), and the [dynamic page](/frontend-development/development-concepts.md#dynamic-pages) handler |
| `commercetools/` | Code for the [extension for commercetools commerce APIs](/frontend-development/using-the-commercetools-extension.md) |
| `webpack/` | Webpack configuration for all [environments](/frontend-studio/using-environments-in-the-studio.md) |
| `schemas/` | Data source and dynamic page [schemas](/frontend-development/schemas.md) |

The `frontend` folder contains the following.

| File / Folder | Content |
| :--- | :--- |
| `components/` | `commercetools-ui` library |
| `frontastic/` | `tastics/`, `lib/`, and `provider/` folders |
| `frontastic/tastics/` | [Frontend components](/frontend-development/development-concepts.md#components) used in the Studio |
| `frontastic/lib/` | Helper functions |
| `frontastic/provider/` | React Context provider |
| `helpers/` | Helper functions and React hooks for Frontend components |
| `styles/` | Custom stylesheets |
| `public/` | Public assets like icons and images |
| `frontastic/hooks/` | Custom hooks |
| `sdk/` | Contains files related to the Frontend SDK and integrations |

The `types` folder contains the TypeScript type definitions used in the project.

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Integrating commercetools Frontend with a CMS](/frontend-development/integration-of-frontend-with-headless-cms.md)
- [Next page: Requirements for project setup](/frontend-development/project-set-up.md)
- [Search documentation and API specs](/search.md)