Skip to content

Latest commit

 

History

History
143 lines (98 loc) · 3.79 KB

README.md

File metadata and controls

143 lines (98 loc) · 3.79 KB

React Router v7 SPA Example

これは React Router v7 を使用した、Firebase をバックエンドに持つ Web アプリケーションのサンプルプロジェクトです。ユーザーが文章を書き散らすことができるシンプルなサービスを実装しています。

Deploy to Firebase Hosting on merge

技術スタック

フロントエンド

バックエンド

  • Firebase
    • Authentication (Google認証)
    • Firestore
    • Hosting

開発ツール

主な機能

  • Google認証によるユーザー認証
  • 記事の作成・編集・削除
  • Markdownによる記事作成
  • レスポンシブデザイン
  • ダークモード対応

開発環境のセットアップ

必要条件

  • Node.js v18以上
  • pnpm
  • Firebase CLIツール

インストール手順

  1. リポジトリのクローン:
git clone https://github.com/yourusername/remix-spa-example.git
cd remix-spa-example
  1. 依存関係のインストール:
pnpm install
  1. 環境変数の設定:
cp .env.example .env

.envファイルを編集し、必要な環境変数を設定してください:

  • VITE_GOOGLE_CLIENT_ID: GoogleのOAuth クライアントID
  1. 開発サーバーの起動:
pnpm dev

デプロイ

このプロジェクトはFirebase Hostingを使用してデプロイします。

  1. Firebase CLIのインストール:
npm install -g firebase-tools
  1. Firebaseにログイン:
firebase login
  1. プロジェクトの初期化:
firebase init
  1. ビルドとデプロイ:
pnpm build
firebase deploy

利用可能なスクリプト

  • pnpm dev: 開発サーバーの起動
  • pnpm build: プロダクションビルドの作成
  • pnpm preview: ビルドしたアプリケーションのプレビュー
  • pnpm lint: Biomeを使用したコードの検証
  • pnpm format: Prettierを使用したコードのフォーマット
  • pnpm typecheck: TypeScriptの型チェック
  • pnpm validate: lint、format、typecheckの実行
  • pnpm start: ビルドしたアプリケーションの起動

プロジェクトの特徴

  • React Router v7: 最新のReact Router v7を使用し、型安全なルーティングを実現
  • Data Loaders: React Router v7のデータローダーを活用した効率的なデータフェッチング
  • 型安全なルーティング: safe-routesを使用した型安全なルート生成

プロジェクト構造

├── app/                    # アプリケーションのソースコード
│   ├── components/        # Reactコンポーネント
│   ├── routes/           # ルーティング
│   ├── services/         # サービスレイヤー
│   ├── models/           # データモデル
│   └── styles/           # グローバルスタイル
├── public/               # 静的ファイル
└── firebase/            # Firebase設定

ライセンス

このプロジェクトはMITライセンスの下で公開されています。

謝辞

このプロジェクトはしずかなインターネットのUIデザインを参考にさせていただいています。