Next.jsで制作したレシピ検索ウェブアプリ「YourMix」

目次

概要

個人的にカクテルが好きなので、レシピを検索するウェブアプリを作成しました。

他のレシピサイトとの差別化として、材料を指定するとAIがオリジナルのレシピを生成してくれる機能を構想しています。ドッグフーディングできることは重要だと考えているので、自分の趣味を反映しました。

作り始めた時期は数ヶ月前と早かったですが、独学での制作に限界を感じたため、職業訓練の授業が十分進むまで保留していました。

納得いくまで作り込んでからリリースするつもりでいましたが、ポートフォリオが必要のため、やむなく未完成のまま一旦公開します。今後は随時記事を更新/新規公開していこうかと考えています。

技術選定

  • エディタ：Cursor
    • コミットメッセージの下書きをAIに作成してもらえるところは地味に便利です。
  • ホスティング：Cloudflare Workers
    • ダッシュボードからリポジトリをインポートするのに失敗し続け苦戦しましたが、公式ドキュメント↗をきちんと読み直したところコマンドからデプロイするのが正解でした。
  • ランタイム：Node.js
  • フレームワーク：Next.js
    • ウェブアプリ開発におけるデファクトスタンダードに近いかと考えているため、経験を積むためにも導入しました。機能をすべて使いこなせるとは思いませんが、できるだけ学んでいきたいと思います。
  • リンター・フォーマッタ：Biome
    • 個別にESlintやPrettierを導入するより楽でした。
  • UIライブラリ：MUI
    • 以前から気になっていたので採用しました。そのままのデザインだとカクテルのサイトとしてはミスマッチになりそうだと考え、全体的に色彩を調整しています。
    • AIが古いGridコンポーネントのコードを吐き出したのでビルドエラーが起きましたが、公式ドキュメント↗により解決しました。
  • テスト：Playwright、Vitest
    • まだ不慣れなため、主にAIの書くテストに頼っています。

今後

技術的に難しいものもありますが、仕様書↗に記載がある内容は実装を進めていきたいと思います。