音楽レビュー投稿サイト「Favorite Music App」

作品・ソースコードを見る

以下、「制作のポイント」もぜひご覧ください。

制作のポイント

Reactで制作した2つ目の作品で、総制作時間は12時間ほどです。

キャラクターガチャと同様にReact + Viteを使用し、新たにTailwind CSSも取り入れました。
ノーマルのTailwind CSSに加え、Flowbite ReactというReact向けのTailwind CSSライブラリを導入することで、デザインと機能を両立した実装に挑戦しています。

前回はできなかったLocalStorageへの保存にもチャレンジし、リロードしてもデータが保持されるアプリケーションを完成させました。

アプリの使い方

  1. トップページでレビュー一覧を確認
    投稿された音楽レビューがカード形式で一覧表示されます。タイトル・アーティスト・タグ・評価・コメントなどの情報を確認できます。
    ※初回アクセス時はプリセットデータが2つ入っています。
  2. 「投稿」ページからレビューを追加
    メニュー内の「投稿」リンクからレビュー投稿ページに移動できます。以下の項目を入力して、音楽レビューを登録します。
    • 曲名（必須）
    • アーティスト名（必須）
    • 画像（任意・アップロード形式）
      その場でプレビューが表示されます。登録後は一覧ページでも表示されます。
    • タグ（Tabキーまたはカンマで追加可能）
    • 評価（星1〜5のレーティング）
    • レビュー本文（任意）
  3. レビューの編集や削除が可能
    各レビューカードの下部にある「編集」「削除」ボタンから、レビューの内容を変更または削除できます。編集ボタンを押すと投稿フォームに既存の内容が反映され、修正がスムーズに行えます。
  4. タグリンクから関連レビューを検索
    カードに表示されているタグをクリックすると、そのタグがつけられたレビューを一覧で確認できます。

使用技術と実装ポイント

  • React (Vite) を使ってSPA（シングルページアプリケーション）として実装
  • Tailwind CSS によるスタイリングで、レスポンシブデザインに対応
  • Flowbite React を導入し、UIコンポーネント（Card, Sidebarなど）を効率よく実装
  • 画像アップロードは、FileReaderでBase64形式に変換して保存・表示できるよう対応

工夫した点

  • LocalStorageを使用し、バックエンドなしでも「保存→一覧表示→編集・削除→再表示」まで完結できる構造
  • レビュー投稿時のタグ入力はTab・カンマ押下で登録＋その場で削除可能に

今後の展望

  • 投稿にコメントや「いいね」など、レビューアプリらしい機能を実装したい
  • タグの並び替え・検索フィルターなどの追加も検討中

ホームへ戻る