クイズページ

管理画面

大学一年生の頃に所属していたプログラミング学習コミュニティの Web サイトを Vue3 + Express + TypeScript で再実装しました。

• 2023/06 - 08

• 招待メールの送信機能
• サインイン機能
• サインアップ機能

• Vue3 (Composition API)
• sass
• Tailwind CSS
• TypeScript
• vite

• Express
• TypeScript
• mysql
• docker

• 成り行きでモノレポ的な感じになりました
  • web（Web サイトのフロントエンド）
  • manager（クイズの管理アプリ）
  • service（クイズや認証の API を配信するバックエンド）

• SPA での構築
• Repository Pattern を試してみた
  @ref https://zenn.dev/chida/articles/5756a54d94230a
  @ref https://qiita.com/07JP27/items/0923cbe3b6435c19d761

• 三層アーキテクチャ(models, controllers, services)による構築
• RestAPI での 開発 @ref https://qiita.com/baby-degu/items/f1489dd94becd46ab523
  @ref https://github.com/santiq/bulletproof-nodejs/tree/master

• npm workspaces等を活用して、ちゃんとしたモノレポ環境を作る
• eslint や prettier の設定の見直し
• zod 等でバリデーションを行い、UX の向上を図る
• API 設計やエラーハンドリングの理解不足
• キャッシュなどを取り入れて、アプリケーションの高速化を図る
• とはいえ、やはりバックエンドの知識が全体的に不足していると実感した

$ cd web / cd manager

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

$ npm i

フロントエンドサーバーの起動

$ npm run dev

$ cd service

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

$ npm i

バックエンドサーバーの起動

• ターミナルを２つ開いて、それぞれコマンドを実行する

$ npm run watch

$ npm run dev

mysql の起動

$ docker compose up -d