プロジェクト名

Luana管理者サイト

目次

1. プロジェクトについて
2. 環境
3. ディレクトリ構成
4. 開発環境構築

プロジェクトについて

luana_managementは、サロンの予約管理、顧客管理、サービス管理などを行うための管理者専用画面です。

サイトリンク

https://luana-administer.netlify.app/login

使用技術一覧

(トップへ)

環境

言語・フレームワーク	バージョン
Node.js	18.x or 20.x
React	18.3.1
TypeScript	5.5.3
Vite	5.4.19

その他のパッケージのバージョンは package.json を参照してください

(トップへ)

ディレクトリ構成

.
├── .gitignore
├── create_fcm_tokens_table.sql
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vapid-keys.json
├── vite.config.ts
├── dist/
├── public/
│   ├── _redirects
│   ├── favicon.svg
│   └── firebase-messaging-sw.js
└── src/
    ├── App.tsx
    ├── index.css
    ├── index.tsx
    ├── main.tsx
    ├── components/
    ├── context/
    ├── lib/
    ├── pages/
    └── types/

(トップへ)

開発環境構築

1. パッケージのインストール

以下のコマンドを実行して、プロジェクトに必要なパッケージをインストールします。

npm install

2. 環境変数の設定

プロジェクトのルートディレクトリに.envファイルを作成し、以下の内容を記述します。

VITE_SUPABASE_URL=あなたのSupabaseプロジェクトURL
VITE_SUPABASE_ANON_KEY=あなたのSupabase anonキー

これらの値は、Supabaseのプロジェクト設定ページから取得できます。

3. 開発サーバーの起動

以下のコマンドを実行して、開発サーバーを起動します。

npm run dev

サーバーが起動すると、ターミナルに表示されるURL（通常は http://localhost:5173）にブラウザでアクセスします。

コマンド一覧

コマンド	実行する処理
npm run dev	開発サーバーを起動します。
npm run build	本番用にプロジェクトをビルドします。
npm run lint	ESLintを実行してコードを静的解析します。
npm run preview	ビルドされたプロジェクトをプレビューします。

(トップへ)