はじめに 🍽️
こんにちは！
アプリ開発サークルOBです。
今回は、チーム開発経験ゼロの学生が開発したサービスの技術スタック・アーキテクチャをご紹介いたします！
（引継ぎのため、この備忘録を残します！）
先ずは、私たちの開発したサービスについてご説明いたします！
どんなサービス？ 🍜
本学生に向けた昼食レコメンド（紹介）サービスです！
（現在は全ての方がご利用いただけます！）
リリースPV 🎉
インストール方法 📲
開発までの経緯 🍟
本大学には学食がないため、ランチはお弁当を持参もしくは、外食をすることになります。
しかし、いざ、外食をしようとするのですが、、、
- いつも同じお店で済ましてしまう
- たまには違うお店を探したい
- でも、おすすめのお店がわからない
- お昼休憩の時間内に行きたい
といった不満や要望がありました。
そこで、大学の立地（新宿）をいかして、今食べたい料理かつ、お昼休憩の時間内に行けるお店をおすすめしてくれる。。。
そんな、ピンポイントなサービスを「我々で勉強ついでに作ってしまおう！」となったわけです。
いざ、開発！ 🍔
順を追ってご説明いたします！
1. 開発までの課題 🪜
私たち学生は、勉学と課外活動を両立しなければなりません。
よって、夏季休暇の１か月間を利用して開発することにしました。
しかし、開発にあたり、数々の課題を解決しなければなりませんでした。。。
課題
前提：コードの勉強と開発を同時並行で１か月以内に終わらせる。
- 言語の勉強
- 速度重視の開発
- 学生のため費用をかけられない
解決
そこで、以下を持ち合わせたフレームワークが良いと判断しました。
- 身に着けやすい言語
- 充実したドキュメント
- ランニングコストの抑制
2. 技術スタック 🔍
前述より、私たちが採用した最終的な技術スタックです！
（ライブラリ等の詳細は後ほど別記事にします！）
| Stack | Solution | Motivation |
|---|---|---|
| 言語 | TypeScript | 身に着けやすい言語 |
| フレームワーク | Next.js | 充実したドキュメント |
| データベース | Supabase | 充実したドキュメント & ランニングコストの抑制 |
| PaaS | Vercel | ランニングコストの抑制 |
| CDN | Cloudinary | ランニングコストの抑制 |
| SMTP | Resend | ランニングコストの抑制 |
| Domain & WAF | Cloudflare | ただのファン 😎 |
実際にReactはFunction Componentの思想でとても学びやすく助かりました。。。
3. アーキテクチャ 🛠️
アーキテクチャは、メンバーで共有しながら作成しました！
ツールの選定は、作業を共有できる点に重きを置きました。
あれやこれやと言いながら、お互い編集できる点に何度も助けられました。
目次
3-1. アーキテクチャ構成図
各部の選定は前述の通りです！
3-2. UI
UI作成は、Adobe XDを使用しました。
本大学がAdobeと契約しており、無料で利用できたためです。
要素をそのままSVGに変換できる点がとても良⭕。
（Figmaでも良いかと思われます！）
UIアーキテクチャ・デザイン（画像）
デザイナー：
3-3. DB
DB設計は、Miroを使用しました。
他にも同様のサービス（draw.ioなど）はありますが、使い慣れているメンバーが多かったためこちらを採用しました。
メモや付箋をペタペタと貼れる点がとても良⭕。
DBアーキテクチャ・スキーマ（画像）
実際のスキーマ（画像）
設計と実際のスキーマが違うことは多々ありますよね。。。
そんな時に、Supabaseはスキーマを見える化できるのでとても便利。
さいごに 🍧
以上、「lounas」の技術スタック・アーキテクチャについてご紹介いたしました！
新しくWebサービスを展開したい方は、Vercelをはじめとするエコシステムに頼り、スピーディーに開発しちゃいましょう！
続篇 🍹
続編では、より詳しく「Tech」について語る予定です！
しばしお待ちを！
[予定：続編の記事リンク]
Discussion