環境情報

URL	サービス	アクセス例
http://localhost:{FORWARD_APP_PORT}	local環境(FE)	http://localhost:3000
http://localhost:{FORWARD_APP_PORT}/api	local環境(BE)	http://localhost:3000/api

※ tRPCを利用しているため、基本的には/api/trpc/**がエンドポイントになります

※ .envのPORTを変更することで、ローカルサーバーのポートを切り替えることができます

技術スタック

• Next.js
• tRPC
• Prisma
• Supabase
• Mantine
• Tailwind CSS

ディレクトリ構成

.
├── app -------------------- App Router
│   └── api ------------------ API群
│       └── trpc --------------- tRPCエンドポイント
│   └── something ------------ somethingページ 
├── components ------------- 機能を跨いで使用する共通コンポーネント
├── features --------------- 機能ごとのまとまり
│   └── something ------------ something機能群
│       ├── components --------- コンポーネント
│       ├── pages -------------- コンポーネントをまとめたページ
│       ├── routes ------------- ルートごとのtRPCロジック
│       ├── schema ------------- Zodスキーマ
│       └── types -------------- 型定義
│       └── ... ---------------- その他機能で使用するもの
├── hooks ------------------ 機能を跨いで使用するカスタムフック
├── prisma ----------------- Prisma関連
│   └── migrations ----------- マイグレーションファイル
├── providers -------------- 機能を跨いで使用するプロバイダー
├── public ----------------- 公開ディレクトリ
├── routes ----------------- 各機能のtRPCルーター群
├── styles ----------------- スタイル定義
├── types ------------------ 共通で使用する型定義
└── utils ------------------ ユーティリティ群
    ├── db ------------------- Prismaクライアント
    ├── trpc ----------------- tRPCクライアント
    │   ├── client ------------- クライアントサイド用
    │   └── server ------------- サーバーサイド用

環境構築

※前提として、node: 20.x 環境が必要

make install

※ その他Makefileのコマンドに関しては、make helpで参照してください

開発ルール

■ フォーマット

make format

もしくは

npm run format

■ コミット

git文字	アイコン	意味
:sparkles:	✨	新規機能を実装した際に使用しましょう
:lipstick:	💄	デザインに関連する作業をした際に使用しましょう
:zap:	⚡️	既存機能に別の機能を追加した際に使用しましょう
:fire:	🔥	機能を削除した際に使用しましょう
:white_check_mark:	✅	テストを追加、更新、合格した際に使用しましょう
:bug:	🐛	バグを修正した際に使用しましょう
:adhesive_bandage:	🩹	軽微な修正はコチラを使用してしまいましょう
:construction:	🚧	WIP!!! まだ作業途中です
:art:	🎨	コードのフォーマットをした際に使用しましょう
:recycle:	♻️	コードのリファクタリングをした際に使用しましょう
:racehorse:	🐎	パフォーマンスの改善をした際に使用しましょう
:memo:	📝	ドキュメントやコメントを追加・更新した際に使用しましょう
:rewind:	⏪️	以前の変更を元に戻した際に使用しましょう
:ambulance:	🚑️	緊急性の高いバグを修正したときに使用しましょう
:heavy_plus_sign:	➕	依存関係を追加した際に使用しましょう
:arrow_up:	⬆️	依存関係をアップグレードした際に使用しましょう
:arrow_down:	⬇️	依存関係をダウングレードした際に使用しましょう
:rocket:	🚀	デプロイに関連する作業をした際に使用しましょう
:tada:	🎉	おめでたいときに使用しましょう