Works
『Tasting Note』

コーヒーテイスティングアプリ『Tasting Note』

『Tasting Note』は、こちらからどうぞ！

このアプリは、メール登録とpassword登録必須です。 お試しで使いたい方向けにこちらをどうぞ！ ボタンになってますので、押すとコピーできます。

概要

「カップ・オブ・エクセレンス」という国際的なコーヒー品評会で使用されるシートを参考に作成したWebアプリです。ユーザーがコーヒーの味わいを詳細に記録し、自分好みのコーヒーを探求できるツールです

主な特徴

  • コーヒーの味わいを詳細に記録
  • ユーザーの好みに合ったコーヒー探しをサポート
  • シンプルで使いやすいインターフェース

使用技術

  • フロントエンド: HTML, CSS, JavaScript
  • バックエンド: Node.js
  • フレームワーク: Next.js (App Router使用)
  • データベース: MongoDB Atlas
  • デプロイ: Vercel

開発プロセス

  • 企画・設計
    • 初めてのアプリ開発としてコーヒー関連のテーマを選択
  • 開発スタート
    • 当初はHTML/CSS/JavaScriptのみで開発開始
    • 将来的な拡張性を考慮し、段階的に高度な技術導入を計画
  • React導入
    • JavaScript習熟度向上に伴い、Reactライブラリの導入を決定
  • Next.jsへの移行
    • ReactベースのフレームワークであるNext.jsの採用
    • 初めはPages Router機能でデモアプリを開発
  • App Routerへの切り替え
    • 調査の結果、App Router機能の習得が有益と判断
    • Pages RouterからApp Routerへ移行
  • データベース不具合の修正
    • 更新機能の不具合を発見し修正
  • 『Tasting Note』アプリの完成
    • App Router機能を活用し、最終版のアプリを開発