昨天我們開始React實戰-打造健身房dashboard，今天，我們要開始實作我們的健身房後台管理系統 —— Gym Pro。我們將從建立專案開始，一步步建立起我們的應用程式骨架。

步驟 1: 建立專案

首先，我們使用 Vite 來建立我們的 React 專案。在終端機中輸入以下命令：

npm create vite@latest gym-pro -- --template react-ts
cd gym-pro

步驟 2: 安裝必要的套件

接下來，我們安裝一些關鍵的開發工具和函式庫，這些將幫助實作系統功能：

npm install react-router-dom zustand @tanstack/react-table react-hook-form axios @tanstack/react-query
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

步驟 3: 設置 Tailwind CSS

在 tailwind.config.js 文件中，設定 Tailwind CSS 的內容：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

接著，在 src/index.css 文件中加入以下 CSS 基本設定：

@tailwind base;
@tailwind components;
@tailwind utilities;

步驟 4: 建立專案結構

讓我們按照昨天討論的結構來組織我們的專案：

mkdir src/components src/pages src/layouts src/hooks src/services src/stores src/utils src/types

步驟 5: 設置基本路由

現在，我們將為系統設置一些基本的頁面路由。首先，建立頁面元件：

在 src/pages/Dashboard.tsx 中：

import React from 'react';

const Dashboard: React.FC = () => {
  return <h1>Dashboard</h1>;
};

export default Dashboard;

在 src/pages/Members.tsx 中：

import React from 'react';

const Members: React.FC = () => {
  return <h1>Members</h1>;
};

export default Members;

然後，在 src/App.tsx 中設置路由：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Members from './pages/Members';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/members" element={<Members />} />
      </Routes>
    </Router>
  );
}

export default App;

步驟 6: 建立基本布局

接下來，設置系統的主視圖框架。我們在 src/layouts/MainLayout.tsx 中設置一個主布局：

import React from 'react';
import { Link } from 'react-router-dom';

interface MainLayoutProps {
  children: React.ReactNode;
}

const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
  return (
    <div className="flex">
      <nav className="w-64 bg-gray-800 h-screen p-4">
        <h1 className="text-white text-2xl font-bold mb-4">FitTrack Pro</h1>
        <ul>
          <li><Link to="/" className="text-white">Dashboard</Link></li>
          <li><Link to="/members" className="text-white">Members</Link></li>
        </ul>
      </nav>
      <main className="flex-1 p-4">
        {children}
      </main>
    </div>
  );
};

export default MainLayout;

然後，在 src/App.tsx 中使用這個布局：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import Dashboard from './pages/Dashboard';
import Members from './pages/Members';

function App() {
  return (
    <Router>
      <MainLayout>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/members" element={<Members />} />
        </Routes>
      </MainLayout>
    </Router>
  );
}

export default App;

步驟 7: 建立 Zustand Store

最後，我們來設置一個簡單的 Zustand store，用於管理使用者的身份驗證狀態。在 src/stores/authStore.ts 中：

import create from 'zustand';

interface User {
  id: number;
  name: string;
  role: string;
}

interface AuthStore {
  user: User | null;
  setUser: (user: User | null) => void;
}

const useAuthStore = create<AuthStore>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

export default useAuthStore;

這就是我們 Gym Pro 專案的基本設置！我們已經完成了以下工作：

1. 建立了專案並安裝了必要的套件
2. 設置了 Tailwind CSS
3. 建立了基本的專案結構
4. 設置了基本的路由
5. 建立了一個基本的布局
6. 建立了一個簡單的 Zustand store 用於身份驗證

接下來，我們可以開始實作更多具體的功能，如會員管理、課程排程等。我們也可以開始整合 shadcn/ui 組件來美化我們的界面。