Aromarious Portfolio
System Architecture
実務運用を前提とした、モダンで堅牢なフルスタックWebアプリケーション。
保守性・拡張性・安全性を個人開発で実証するための技術的ショーケースとして構築しました。
Why this architecture?
Web開発技術の進化のスピードは非常に速いですが、実務で重要視される「チーム開発」「長期運用」という本質は変わりません。 このプロジェクトでは、実務レベルの開発・運用フローを個人開発で実践・実証しています。
データフロー
- 訪問者が問い合わせフォーム送信 → Next.js
- Next.jsがデータ保存 → Supabase (PostgreSQL)
- Next.jsがデータ同期 → Notion & Slack
- aromariousがNotion & Slack通知を確認
技術スタック
- Next.js + React
- TypeScript + tRPC
- Supabase + Drizzle ORM
- Notion API + Slack API
実務レベルの堅牢性
型安全性と自動テストによる品質担保。使い捨てではなく、長期運用に耐えうるコードベース。
自動化の推進
CI/CD、依存関係更新、品質監視の自動化により、開発者が本来の業務に集中できる環境を整備。
グローバル・パフォーマンス
Vercel Edge NetworkとRedisを活用し、世界中どこからでも低遅延・高可用性を実現。
Key Engineering Features
このシステムを支える主要な技術的特徴
Full-stack Type Safety
FrontendからDBまで、完全に型付けされた開発体験。APIの変更は即座にクライアント側の型エラーとして検知され、実行時エラーを未然に防ぎます。
Edge Security & Performance
リクエストはEdgeで即座に処理。Redisを用いたRate LimitingとBot検知により、サーバーリソースを保護しつつ、ユーザーには高速なレスポンスを提供します。
Quality Assurance Strategy
単体テストからE2Eテストまで、5層のテスト戦略（Unit, DB, External, UI, E2E）を実装。PR作成時に全てのチェックが自動実行され、品質低下を許しません。
Modern DevOps Ecosystem
Monorepoによる効率的なコード管理と、Dependabotによる依存関係の自律的な更新。開発者が「開発」のみに集中できる環境を整備しています。
Comprehensive Tech Stack
採用されている技術とその選定理由
Frontend Ecosystem
App Router (Server Components)によるバンドル削減とSEO最適化。React 19への早期適応。
クラス名管理からの解放と、Design System構築の容易さ。コンポーネントとの高いポータビリティ。
アクセシビリティ(a11y)への配慮と、ヘッドレスUIによるデザインの自由度確保。
Reduxより軽量でボイラープレート不要。URL State管理により「共有可能なUI状態」を実現。
Backend & Data
APIスキーマ定義不要で、バックエンドの型をフロントエンドで直接利用可能。開発効率が向上。
リレーショナルデータの一貫性担保と、フルマネージドによる運用コストの最小化。
Prismaより軽量で、SQLの表現力を損なわない薄い抽象化レイヤー。Cold Start対策。
サーバーレス環境と相性の良いHTTPベースのRedis。Rate Limitingの状態管理に最適。
Infrastructure & DevOps
グローバル分散とゼロコンフィグデプロイ。Edge Middlewareによるセキュリティ層の実現。
コードベースと統合された自動化。PRごとのプレビュー環境構築と品質チェックの強制。
ユーザー体験(CWV)のリアルタイム可視化と、ボトルネックの即時特定。
脆弱性ライブラリの混入と機密情報の流出を、コミット段階で自動的にブロック。
Developer Experience
複数パッケージ（Web, DB, Config）の依存関係管理と、ビルドキャッシュによる高速化。
Prettier/ESLintより高速。大規模コードベースでも待機時間の少ない開発体験。
Web標準に準拠したテスト環境。実際のユーザー操作をシミュレートし、リグレッションを防止。
Request Processing Flow
リクエストからレスポンスまでの処理フロー
Incoming Request (Edge Layer)
ユーザーからのリクエスト到達
- Edge Middlewareが地理的に最も近い場所で起動
- Redisを参照し、Rate LimitとIP制限を瞬時にチェック
- 不正なアクセスはこの時点でブロック
Application Layer (Serverless)
Next.js App Routerでの処理
- tRPCルーターがリクエストを受け付け
- Zodスキーマで入力値を厳密に検証
- Server Componentsが必要なデータをフェッチ
Data Persistence (Database)
データベース操作
- Drizzle ORMが型安全なSQLを発行
- Supabase (PostgreSQL) との通信
- コネクションプーリングによる最適化
Response & Hydration
クライアントへの返却
- 生成されたHTMLとRSCペイロードを返却
- React 19の機能により即座にインタラクティブに
- キャッシュヘッダーの適切な付与
Contact
技術的な詳細、ソースコードの確認、または採用に関するお問い合わせはこちらから受け付けています。
このフォーム自体も、上記のアーキテクチャ（tRPC + Edge + Notion API連携）で動作しています。