---
# System prepended metadata

title: 10pct.PitchMaterials

---

![diagram](https://hackmd.io/_uploads/Bka5p2K7a.svg)
```text
apps
    ├── api
    │  ├── NestJS 10
    │  ├── Fastify 10
    │  └── Drizzle & tRPC
    ├── docs
    │   ├── Storybook 7
    │   ├── React 18
    │   ├── Tailwind CSS
    │   └── Vite 4
    ├── expo
    │   ├── Expo SDK 49
    │   ├── React Native using React 18
    │   ├── Navigation using Expo Router
    │   ├── Tailwind using Nativewind
    │   └── Typesafe API calls using tRPC
    ├── strapi
    │   ├── Strapi 4
    │   ├── Fastify 10
    │   └── Drizzle & tRPC
    │   └── E2E Typesafe API Server & Client
    └── www
        ├── Next.js 13
        ├── React 18
        ├── Tailwind CSS
        └── E2E Typesafe API Server & Client
        
 packages/
    ├── api
    │   └── tRPC v10 router definition
    ├── auth
    │   └── Authentication using next-auth.
    └── db
        └── Typesafe db calls using Drizzle & node-postgres

tools/
    ├── aicommits
    │   └── shared aicommits configuration
    ├── commitizen
    │   └── shared commitizen you can extend from
    ├── commitlint
    │   └── shared commitlint you can extend from
    ├── cspell
    │   └── shared cspell configuration
    ├── eslint
    │   └── shared, fine-grained, eslint presets
    ├── markuplint
    │   └── shared, fine-grained, markuplint presets 
    ├── prettier
    │   └── shared prettier configuration
    ├── stylelint
    │   └── shared, fine-grained, stylelint presets 
    ├── tailwind
    │   └── shared tailwind configuration
    └── typescript
        └── shared tsconfig you can extend from
```

## Update
変更された内容に関しましては、共通の設定としてToolsディレクトリ内にLint設定及びGit設定が行い、バックエンドにおいてはBFFのためのStrapiとNestJSが導入されました。初期の段階ではNestJSではなくNext.jsのAPI Routeが使用されておりましたが、それをBFFの中間サーバーへと再構築する作業を行いました。フロントエンドにおきましては、コンポーネントの管理をより厳格に行うためにStorybookが導入しました。これにより、一層整理されたコンポーネント管理が実現できます。

`The changes include the addition of Lint and Git settings in the Tools directory as common settings, and the introduction of Strapi and NestJS for BFF on the back end.In the initial stage, the API Route of Next.js was used instead of NestJS, but it was rebuilt into an intermediate server for BFF.On the front end, a Storybook was introduced to provide more rigorous management of components.This allows for more organized component management.    `

## V2
技術選定で選定をしたパッケージやツールのインストールは完了。ただ、接続関係は現状着手中です。理由としては接続作業は依存関係の整理、統合テスト計画のためです。これらを現在設計段階に入っています。ただ、プロジェクトツールや、ディレクトリ名は変わりません。

`The installation of packages and tools that were selected in the technology selection process is complete. However, the connection work is currently underway. The reason for the connection work is to organize dependencies and to plan for integration testing. These are currently in the design phase. However, the project tools and directory names will not change.`

## V3
CI/CDとIaCのパイプラインを組んだ**DevSecOps**の構築を行います。

`We will build a DevSecOps with CI/CD and IaC pipeline.`


## Coding
![Clean Architecture.jpeg](https://hackmd.io/_uploads/rk3lXpFXa.jpg)  
クリーンアーキテクチャを採用する意味は、システムの柔軟性とメンテナンス性を高めることにあります。内側のレイヤーがより抽象的で安定しているため、具体的な実装が変更されても、システムの核となる部分に影響を与えにくくなります。また、依存性の逆転の原則により、高レベルのポリシーが低レベルの詳細に依存することなく、コードの再利用性とテスト容易性が向上します。これにより、ビジネスロジックとUI、データベース、フレームワークなどのインフラストラクチャとの間にクリアな境界を設けることができ、それぞれが独立して進化できるようになります。

`The significance of adopting a clean architecture is to increase the flexibility and maintainability of the system. Because the inner layers are more abstract and stable, changes in concrete implementation are less likely to affect the core of the system. In addition, the principle of dependency inversion ensures that high-level policies do not depend on low-level details, improving code reusability and testability. This allows for clear boundaries between business logic and infrastructure such as the UI, database, and framework, allowing each to evolve independently.`