ハンズオンで作る蔵書管理アプリ

https://github.com/redimpulz/firebase-book-manage-app

• Gitをこれから学ぶ人へ

機能一覧

• 蔵書一覧
• 蔵書詳細
• ログイン・ログアウト
• 会員登録
• 蔵書追加
• 蔵書編集
• 蔵書削除

使用技術

• JavaScript（TypeScript）
• React（Next.js）
  • Reactについて
  • Next.jsについて
• Firebase
  • Cloud Firestore（データベース）
  • Authentication（認証）
  • Cloud Storage for Firebase（ファイルストレージ）
• TailwindCSS

ハンズオンの流れ

蔵書管理アプリの完成を目指して、一からコードを追加・実装していきます。

• Part1 : Next.jsアプリの作成と基本機能の実装
• Part2 : ファイルアップロード機能の追加
• Part3 : 会員機能の追加
• Part4 : アプリをスタイリングする

今回は、Part1の内容を進めていきます。

このPartの完成版のコードはこちら

https://github.com/redimpulz/firebase-book-manage-app/tree/chapter-1

Next.jsアプリの作成

事前準備

Node.js 18.17以上が必要

未インストールの場合は以下の記事を参考にインストール（Volta経由でのインストールを推奨）

Node.jsの環境構築 | プログラミング講座 | 知識（ナレッジ） - ガクセイハッカソン

Getting Started: Installation

Next.jsアプリの作成コマンド

以下のコマンドを実行

npx create-next-app@latest

以下のような表示が出るが、最初のproject named？に任意の名前を入力する以外は

インストール時の質問は基本的に全てデフォルトのままでOK（Enterを押す）

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes

開発サーバーの起動