---
title: Folder Structure
description: Folder structure of a newly scaffolded T3 App
---

import Diagram from "../../../components/Docs/FolderStructureDiagram.astro";
import Form from "../../../components/Docs/FolderStructureForm.astro";

Please select your packages to see the folder structure of a newly scaffolded app with those selections. Further down, you will find a description of each entry.

<Form />

<Diagram />
 
<div>

### `.gitignore`

The `.gitignore` file lists patterns for files or directories that Git should disregard when tracking changes, preventing them from being included in commits.

</div>

<div>

### `.prettierrc`

The `.prettierrc` file configures the settings for the Prettier code formatter in your project. It contains rules and options that define the code styling preferences, ensuring consistent and formatted code across the codebase,

</div>

<div>

### `app.json`

The `app.json` file serves as a configuration file for Expo projects, containing settings and metadata for the application. It defines various properties such as the app's name, version, and configuration options, akin to how the `package.json` file provides metadata and dependencies for a Node.js project.

</div>

<div>

### `babel.config.js`

The `babel.config.js` file is a configuration file for Babel, a JavaScript compiler used for transforming code. It defines settings and presets to control how JavaScript code is transpiled, similar to how the `webpack.config.js` file configures the behavior of the webpack module bundler in a project.

</div>

<div>

### `expo-env.d.ts`

The `expo-env.d.ts` file, typically a TypeScript declaration file in an Expo project, allows for custom TypeScript type definitions related to environment variables and configurations.

</div>

<div>

### `index.ts`

The `index.ts` file is often an entry point file in a TypeScript project, serving as the main file where the application starts. It may contain imports, exports, and initializations, akin to how the `index.js` file functions in a JavaScript project.

</div>

<div>

### `metro.config.js`

The `metro.config.js` file is a configuration file for Metro, the JavaScript bundler used in React Native projects. It allows developers to customize the bundling process, configure modules, and set up transformations, similar to how the `webpack.config.js` file works in a web development environment.

</div>

<div>

### `package.json`

The `package.json` file is a central configuration file in a Node.js project, defining metadata about the project and its dependencies.

</div>

<div>

### `tsconfig.json`

The `tsconfig.json` file is a configuration file for TypeScript projects, specifying compiler options, module resolution settings, and other TypeScript-related configurations.

</div>