# Hack Days Architechture

ユースケースやワイヤーフレームは[こちら。](https://hackmd.io/@codeforjapan/Hkc4eIKht)

## Next + [supabase](https://supabase.com/)
Pros: クライアントサイドとサーバサイドの開発を分けられる、ローカルの開発環境構築ができる、ロックイン度が低い、SaaS のホスティングから始められる
Cons: 新しいツールなので不明点も多い、サーバサイドのコストがかかる、RDBなのでスケーラビリティは頑張る必要があるかも（セルフホスティングする場合）、構成が複雑
参考：https://qiita.com/kabochapo/items/6a2a391832825d17af7d

アーキテクチャは一旦↑に決定

### Frontend
- [Next.js](https://nextjs.org/)
- Reactフレームワーク
- [Chakra UI](https://chakra-ui.com/)
- Headless UIライブラリ
- dependencies
- Emotion
- FramerMotion
- FocusVisible
- [ESLint](https://eslint.org/)
- Linter
- [Prettier](https://prettier.io/)
- Formatter
- [Typescript](https://www.typescriptlang.org/)
- たいぷすくりぷと

↓以下必要であれば
- [Recoil](https://recoiljs.org/)
- GlobalState
- [Storybook](https://storybook.js.org/)
- コンポーネントカタログ
- UI Test => Chromatic?
- [Sentry](https://sentry.io/)
- エラー監視
- [ether.js](https://docs.ethers.io/v5/)
- DevProtocol関係
- stripe?

以下は、比較用に検討したアーキテクチャ。

----

## React(or other frontends) + Amplify (Dynamodb)
Pros: スケーラブル、サーバーサイドの開発が楽、GraphQL API、Amplify Studio で Figma と連携できる？
Cons: AWSへのロックイン、ラーニングコスト高い、デバッグが大変、各自の開発環境構築が大変、データ管理用ダッシュボード等もスクラッチで開発する必要がある

## Ruby and Rails
Pros: 構成がシンプル、開発環境構築がしやすい、ラーニングコスト低い（人による）、ロックインが無い、デバッグがしやすい、ダッシュボードなども作りやすい
Cons: サーバサイドのメンテナンスコストがかかる、スケーラビリティが弱い

## Next + Ruby and Rails
Pros: クライアントサイドとサーバサイドの開発を分けられる、開発環境構築がしやすい（人による）、ロックインが無い、デバッグがしやすい、ダッシュボードなども作りやすい
Cons: サーバサイドのメンテナンスコストがかかる、スケーラビリティが弱い、構成が複雑

## Django
Pros: 構成がシンプル、開発環境構築がしやすい、ラーニングコスト低い（人による）、ロックインが無い、デバッグがしやすい、ダッシュボードなども作りやすい、RoRよりスケーラブル？
Cons: サーバサイドのメンテナンスコストがかかる、AWSに比べスケーラビリティが弱い

## Next + Django REST Framework
Pros: クライアントサイドとサーバサイドの開発を分けられる、開発環境構築がしやすい（人による）、ロックインが無い、デバッグがしやすい、ダッシュボードなども作りやすい
Cons: サーバサイドのメンテナンスコストがかかる、AWSに比べスケーラビリティが弱い、構成が複雑

[ドキュメント一覧へ](https://hackmd.io/@codeforjapan/Hkc4eIKht)

`Hack Days`