> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ön Yüz Komutları

## Faydalı Komutlar

### Uygulamayı Başlatma

```bash theme={null}
npx nx start twenty-front
```

### API graphql şemasına dayalı graphql şemasını yeniden oluştur

```bash theme={null}
npx nx run twenty-front:graphql:generate --configuration=metadata
```

VEYA

```bash theme={null}
npx nx run twenty-front:graphql:generate
```

### Kod Temizleme

```bash theme={null}
npx nx run twenty-front:lint # pass --fix to fix lint errors
```

## Çeviriler

```bash theme={null}
npx nx run twenty-front:lingui:extract
npx nx run twenty-front:lingui:compile
```

### Test

```bash theme={null}
npx nx run twenty-front:test # run jest tests
npx nx run twenty-front:storybook:serve:dev # run storybook
npx nx run twenty-front:storybook:test # run tests # (needs yarn storybook:serve:dev to be running)
npx nx run twenty-front:storybook:coverage # (needs yarn storybook:serve:dev to be running)
```

## Teknoloji Yığını

Proje temiz ve basit bir yığına sahip, minimum şablon koduyla.

**Uygulama**

* [React](https://react.dev/)
* [Apollo](https://www.apollographql.com/docs/)
* [GraphQL Codegen](https://the-guild.dev/graphql/codegen)
* [Jotai](https://jotai.org/)
* [TypeScript](https://www.typescriptlang.org/)

**Test**

* [Jest](https://jestjs.io/)
* [Storybook](https://storybook.js.org/)

**Araçlar**

* [Yarn](https://yarnpkg.com/)
* [Craco](https://craco.js.org/docs/)
* [Oxlint](https://oxc.rs/docs/guide/usage/linter.html)

## Mimari

### Rotalama

[React Router](https://reactrouter.com/) rotalamayı halleder.

Gereksiz [yeniden renderların](/tr/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) önlenmesi için tüm rotalama mantığı `PageChangeEffect` içindeki bir `useEffect`'te yer alır.

### Durum Yönetimi

[Jotai](https://jotai.org/) durum yönetimini ele alır.

Durum yönetimi hakkında daha fazla bilgi için [en iyi uygulamalar](/tr/developers/contribute/capabilities/frontend-development/best-practices-front#state-management) bölümüne bakın.

## Test

[Jest](https://jestjs.io/) birim testi aracı olarak kullanılırken [Storybook](https://storybook.js.org/) bileşen testleri için kullanılır.

Jest, esas olarak yardımcı programların test edilmesi için kullanılır ve bileşenlerin kendisi için değil.

Storybook, izole bileşenlerin davranışlarının test edilmesi ve tasarım sisteminin gösterilmesi için kullanılır.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.