Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/technote-space/frourio-demo
https://github.com/technote-space/frourio-demo
Last synced: 12 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/technote-space/frourio-demo
- Owner: technote-space
- License: mit
- Archived: true
- Created: 2020-12-26T16:20:10.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-09-03T08:23:45.000Z (about 3 years ago)
- Last Synced: 2024-08-01T17:40:18.152Z (3 months ago)
- Language: TypeScript
- Size: 28.8 MB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Sample project of [Frourio](https://github.com/frouriojs/frourio)
[](https://github.com/technote-space/frourio-demo/actions)
[](https://codecov.io/gh/technote-space/frourio-demo)
[](https://www.codefactor.io/repository/github/technote-space/frourio-demo)
[](https://github.com/technote-space/frourio-demo/blob/main/LICENSE)
[Frourio](https://github.com/frouriojs/frourio) (Next.js + Fastify + Prisma) を使用した予約管理アプリのデモ
開発環境のセットアップ
|
管理画面
|
フロント
|
部屋鍵
|
APIサーバ
|
Demo
|
要件
|
構成
|
開発者向け
|
Author
*generated with [TOC Generator](https://github.com/technote-space/toc-generator)*
## 開発環境のセットアップ
* Node.js
* MySQL
* MailDev
[セットアップ](./infra/README.md)
## 管理画面
`apps/admin`
1. セットアップ
```bash
yarn setup
```
2. ビルド
```bash
yarn build
```
3. サーバ起動
```bash
yarn start
```
ブラウザで [http://localhost:3000](http://localhost:3000) にアクセス
## フロント
`apps/front`
1. セットアップ
```bash
yarn setup
yarn setup:front
```
2. ビルド
```bash
yarn build
```
3. サーバ起動
```bash
yarn start
```
ブラウザで [https://localhost.frourio-demo.com:3001/](https://localhost.frourio-demo.com:3001/) にアクセス
### SSL証明書
Auth0 の認証にSSLでのアクセスが必要なため、ローカル用のSSL証明書の作成が必要です。
`yarn setup:front` コマンドは [mkcert](https://github.com/FiloSottile/mkcert) を使用して証明書を作成します。
macOSのみ動作確認済みです。
Linuxもインストール用スクリプトを用意していますが動作未確認です。
Windowsは対応していません。
ホスト名: `localhost.frourio-demo.com`
### `yarn setup:front`
#### macOS
1. `/etc/hosts` に `localhost.frourio-demo.com` の設定がない場合は追記
1. mkcert, nss をインストール
1. mkcert で証明書を作成
#### Linux
1. `/etc/hosts` に `localhost.frourio-demo.com` の設定がない場合は追記
1. mkcert, nss をインストール
1. Linuxbrew をインストール
1. Linuxbrew で mkcert, nss をインストール
1. mkcert で証明書を作成
## 部屋鍵
`apps/lock`
予約当日の１２時に入室用の情報がメール送信されます。
QRコード または テンキーの入力でチェックインが完了します。
1. セットアップ
```bash
yarn setup
```
2. ビルド
```bash
yarn build
```
3. サーバ起動
```bash
yarn start
```
ブラウザで [http://localhost:3002](http://localhost:3002) にアクセス
## APIサーバ
`apps/server`
管理画面やフロントで共有
環境変数で以下の設定が必要です。
`apps/server/.env`
### Stripe
`sk_test_` から始まるテスト用のシークレットキーを設定します。
設定例
```dotenv
STRIPE_SECRET=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```
### SMTPサーバ
設定例
```dotenv
SMTP_HOST=smtp.gmail.com
SMTP_PORT=465
SMTP_SECURE=1
[email protected]
SMTP_PASS=xxxxxxxxxxxxxxxx(Application Password)
SMTP_FROM=
SMTP_BCC=
```
[Application Password](https://support.google.com/accounts/answer/185833?hl=ja)
## Demo
https://technote-space.github.io/frourio-demo/
## 要件
* 管理画面
* マスタの管理（部屋、顧客、予約）
* 各部屋の現在の予約状況の確認
* 月毎の売り上げ金額の確認
* 当日の清掃対象(チェックアウト)の一覧の確認
* フロント
* 予約登録
* オンライン決済
* 部屋
* 入室の自動化（QRコード、テンキー）
## 構成
### フロントエンド
* [GitHub Pages](https://docs.github.com/ja/github/working-with-github-pages/about-github-pages)
* [Next.js](https://nextjs.org/)
* React Context による SPA（管理画面）
* React Router DOM による SPA（フロント、部屋鍵）
* [Aspida](https://github.com/aspida/aspida)
* 型付きのHTTPクライアント
* [Material-UI](https://material-ui.com/)
* デザインフレームワーク（管理画面）
* [Chakra UI](https://chakra-ui.com/)
* コンポーネントライブラリ（フロント、部屋鍵）
### バックエンド
* [Fastify](https://www.fastify.io/)
* 軽量な Node.js フレームワーク
* [Prisma](https://www.prisma.io/)
* ORM
### テスト
* [Jest](https://jestjs.io/ja/)
* [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
### CI/CD
* [GitHub Actions](https://github.co.jp/features/actions)
* Lint
* テスト
* GitHub Pages
* GitHub Releases
### その他
* [GitHub Actions](https://github.co.jp/features/actions)
* 目次生成自動化 [TOC Generator](https://github.com/technote-space/toc-generator)
* PRとIssueのラベル付与自動化 [PR Labeler](https://github.com/TimonVS/pr-labeler-action), [Pull Request Labeler](https://github.com/actions/labeler)
* PRとIssueのプロジェクト登録自動化 [Create Project Card Action](https://github.com/technote-space/create-project-card-action)
* アサイン自動化 [Assign Author](https://github.com/technote-space/assign-author)
* 依存モジュール更新自動化 [Create PR Action](https://github.com/technote-space/create-pr-action)
* PRに更新内容追記自動化 [PR Commit Body Action](https://github.com/technote-space/pr-commit-body-action)
* [Conventional Commits](https://www.conventionalcommits.org/ja/v1.0.0-beta.4/) に基づく次のバージョンの決定自動化 [Release Type Action](https://github.com/technote-space/release-type-action), [Get Next Version Action](https://github.com/technote-space/get-next-version-action)
* package.json のバージョン更新自動化 [Package Version Check Action](https://github.com/technote-space/package-version-check-action)
* リリースタグ付与自動化 [actions/github-script](https://github.com/actions/github-script)
## 開発者向け
### Linter
```shell
yarn lint
```
#### Fixer
```shell
yarn lint:fix
```
### ライセンスチェック
```shell
yarn license:check
```
### テスト
#### 全部
```shell
yarn cover
```
#### サーバのみ
```shell
yarn cover:server
```
#### 管理画面のみ
```shell
yarn cover:admin
```
#### 共有ライブラリのみ
```shell
yarn cover:shared
```
## Author
[GitHub (Technote)](https://github.com/technote-space)
[Blog](https://technote.space)