ZHAO JIAYI
Week 1 ：FEATURESからARCHITECTUREまでを考える
2026年03月24日
ハッカソン
学習振り返り
ZHAO JIAYI
2026年03月24日
はじめまして、フロントエンドエンジニアへの転職を目指して学習しているZHAO JIAYI（チョウ カキツ）と申します。 React / Next.js / TypeScript を中心に独学でスキルを磨きながら、AIを組み込んだWebアプリケーションの開発に取り組んでいます。 「作りながら学ぶ」スタイルで、現在ポートフォリオとして以下の２つのプロダクトを自走で開発しています。 🚀 AI Portfolio Manager — Next.js × Supabase × AI によるリアルタイム投資管理アプリ https://ai-portfolio-manager-stocks-crypto.vercel.app/ 💪 TS GYM — TypeScript学習プラットフォーム 技術記事もQiitaで発信しており、学んだことをアウトプットしながら日々成長中です。 https://qiita.com/ZHAOJIAYI
見出しはありません
要約を生成中...
この前の文章ではFeaturesを作りましたので、今日の文章では、Featuresを基づいてFLOWCHARTとARCHITECTUREを作ります。
開発途中で機能が追加・変更される可能性があるため、今回はあくまで大まかな流れを整理します。
本アプリについて、ログインなしでも学校情報を閲覧でき、カレンダーに追加したいときだけ登録が必要という設計にしています。
以下はClaudeを利用して作ったFLOWCHARTです。
ポイント | 内容 |
|---|---|
ログイン不要で閲覧可能 | ユーザーはDashboardで自由に学校を検索・閲覧できる |
必要なタイミングでログイン | 「カレンダーに追加」をクリックした時点で初めてログインを要求する |
マイカレンダー | 追加した志望校の出願日・試験日を一覧表示し、日程が重複している場合は自動検出して警告する |
レイヤー | 技術 | 選定理由 |
|---|---|---|
フレームワーク | Next.js 16 (App Router) | 既存プロジェクトで使用経験あり |
UI | shadcn/ui + Tailwind CSS | 高品質なコンポーネントをすぐ使える |
言語 | TypeScript | 型安全性で開発効率を上げる |
データベース | Supabase (PostgreSQL) | Auth・DB・RLSが一体で無料枠あり |
デプロイ | Vercel | Hobby Plan無料・Next.jsとの相性が最適 |
要約
コメント
ログインなしである程度コンテンツが見れる形良いですね！！