Full Stack

全ての人のためのポートフォリオ作成サービス。

機能

以下のことをポートフォリオで公開できます。

技術スタック
制作物
外部サイトで執筆した記事

執筆記事はユーザー名(またはトークン)を登録して連携させることで自動取得。

技術構成

Next.jsのApp Routerで構成。認証機能はAuth.js。

フロントエンド

Material UI (UIコンポーネント)
tiptap (エディタ)
react-toastify (トースト表示)

バックエンド

Prisma (ORM)
node-html-parser (urlからOGP画像を取得するため)

テスト

Storybook
Vitest

その他

PostgreSQL (データベース)
Firebase Storage (オブジェクトストレージ)

開発する方へ

環境構築

リポジトリのクローン

以下のコマンドでクローンしてください。

$ git clone https://github.com/Yumax-panda/full-stack.git

SSHを使う場合は以下のようになります。

$ git clone git@github.com:Yumax-panda/full-stack.git

プロジェクト内へ入ります。

$ cd full-stack

プラグインのインストール

バージョン管理にはasdfを使うことを想定していますが、.tool-versionsへ記載されたバージョンがインストールされていれば動くと思います。

$ asdf install
$ corepack enable
$ asdf reshim nodejs
$ asdf reshim java

プラグインのバージョンを揃えた後に依存関係をインストールします。

$ npm install
$ npx prisma generate

DB

DockerでPostgreSQLを使います

起動(初回)

$ docker compose up -d --build

起動(2回目以降)

$ docker compose up -d

データベースの管理画面を起動

$ npx prisma studio

停止

$ docker compose down

Storageの起動

Emulatorを使ってFirebase storageをローカルで実行します

Firebase-CLIのインストール

$ npm install -g firebase-tools

起動

$ npm run emu:storage

アプリの起動

DBとエミュレータが起動していることを確認してください

.envを新たに作成し、.env.sampleの内容をコピーした後、必要な部分を書き換えてください。

$ npm run dev

http://localhost:3000 へアクセスするとトップページが出るはずです。

キャッシュなしで実行する場合は2つめのコマンドを以下に置き換えてください。

$ npm run dev:nocache

StorybookでUIのテスト

$ npm run storybook

lint (型チェック等)

$ npm run lint

format (コード整形)

$ npm run format

fix (lint & コード整形)

$ npm run fix

ブランチ命名規則

作業するときはmainブランチから新しくカテゴリ名/タイトルとブランチを切ってください。カテゴリ名は例えば以下のようなものがあります。(あくまで参考程度です。)

feature: 新しいコードや新機能
fix: バグの修正
refactor: featureやfixでもないコードの変更
docs: READMEやコメントの変更など
build: 依存関係の変更や新しいパッケージの追加など
test: テストコードの追加 or 変更
ci: GitHub Actions等のCIに関する変更
chore: その他

特定のissueに関係したブランチの場合, カテゴリ名/#issue番号としてください。

例えば、新しい機能に関するissueが#10の場合, ブランチ名はfeature/#10となります。

デプロイ (管理者用)

以下のコマンドを実行

$ gcloud builds submit --config cloudbuild.yaml