東北学院大学の学生向け授業情報アプリ、素晴らしいアイデアですね!授業情報の閲覧、コメント・評価機能を備えたアプリを作成します。
まずはデザインのインスピレーションを生成し、計画を立てます。
デザインのインスピレーションを取得しました。それでは、東北学院大学向けの授業情報アプリを作成していきます。深みのある青を基調とした、アカデミックで信頼感のあるデザインにします。
テーマとレイアウトを更新しました。次に、各コンポーネントとページを作成していきます。
コンポーネントを作成しました。次にホームページを作成します。
ホームページが完成しました。次に授業詳細ページと授業一覧ページを作成します。
授業詳細ページが完成しました。次に授業検索・フィルター機能付きの授業一覧ページを作成します。
授業一覧ページとフィルター機能が完成しました。最後にレビュー投稿フォームを作成します。
東北学院大学生向けの授業情報・レビューアプリが完成しました。
主な機能:
デザインは深みのある青を基調としたダークテーマで、アカデミックで信頼感のある雰囲気に仕上げています。現在はサンプルデータを使用していますが、実際にデータベースを接続すれば本番運用が可能です。データベース統合が必要な場合はお知らせください。
なるほど、それは良い構造ですね!学部選択ページを入口にして、そこから各学部の授業一覧に遷移する形にしましょう。
まず現在のcoursesページを確認します。
データ構造を確認しました。学部選択ページと、学部別一覧ページを作成します。「全学教養」カテゴリも追加しますね。
データを確認しました。全学教養科目のサンプルデータも追加しつつ、学部選択ページと学部別一覧ページを作成します。
授業詳細ページのリンク先が変わったので、関連するリンクを更新します。
リンクを /courses/${course.id} から /course/${course.id} に更新します。
完了しました。/courses ページを学部選択ページにリファクタリングしました。
変更内容:
/courses - 学部選択ページ(全学教養・文学部・経済学部など9つのカテゴリをカード形式で表示)/courses/[faculty] - 各学部の授業一覧ページ(フィルター・検索機能付き)/courses/all - 全授業一覧/course/[id] - 授業詳細ページ(URLをcoursesからcourseに変更)全学教養科目のサンプルデータ(キリスト教学、情報リテラシー、健康スポーツ科学、日本語表現法)も追加しました。各学部カードには科目数、平均評価、レビュー数が表示されます。