TS×React×Express×Firebase×Render でアプリケーションを作りました

投稿目的

・備忘
・今後、開発時の技術について記事を執筆するという宣言

作ったアプリケーションについて

名前は「社内食べログ」としています。

できること

ログイン前

・新規会員登録 (会社コード・メールアドレス・パスワード)

・新規会社作成

・お店の情報の検索/閲覧

ログイン後

・会員情報更新 (パスワード変更・ユーザ情報更新)

・退会

・お店の情報の検索/閲覧

・お店に関する口コミ投稿

・お店をお気に入り登録

・同じ会社に所属するユーザの口コミ/お気に入り閲覧

フロント側

TypeScript×Reactで構築しました。
Firebase Hostingを利用し、デプロイしています。

【パッケージ】

  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.1.5"
  },
  "devDependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@eslint/compat": "^1.2.6",
    "@eslint/eslintrc": "^3.2.0",
    "@eslint/js": "^9.20.0",
    "@formkit/tempo": "^0.1.2",
    "@mui/icons-material": "^6.4.4",
    "@mui/material": "^6.4.4",
    "@tanstack/eslint-plugin-query": "^5.66.1",
    "@tanstack/react-query": "^5.66.0",
    "@types/node": "^22.13.1",
    "@types/react": "^19.0.8",
    "@types/react-datepicker": "^7.0.0",
    "@types/react-dom": "^19.0.3",
    "@types/react-paginate": "^7.1.4",
    "@types/react-router": "^5.1.20",
    "@types/styled-components": "^5.1.34",
    "@typescript-eslint/eslint-plugin": "^8.24.0",
    "@typescript-eslint/parser": "^8.24.0",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "axios": "^1.7.9",
    "eslint": "^9.20.1",
    "eslint-import-resolver-typescript": "^3.7.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.14.0",
    "prettier": "^3.5.0",
    "react-datepicker": "^7.6.0",
    "react-error-boundary": "^5.0.0",
    "react-paginate": "^8.3.0",
    "rollup-plugin-visualizer": "^5.14.0",
    "styled-components": "^6.1.15",
    "typescript": "^5.7.3",
    "vite": "^6.1.0",
    "vite-tsconfig-paths": "^5.1.4"
  },
  "volta": {
    "node": "22.12.0",
    "bun": "1.2.1"
  },
  "engines": {
    "node": "22.12.0",
    "bun": "1.2.1"
  }

サーバ側

TypeScript×Expressで構築しました。
Renderを利用し、デプロイしています。
ユーザ認証にはFirebase Authentication、お店や口コミの情報を保存するデータベースはCloud Firestore、ユーザのアバター画像を保存するストレージにはCloud Storage for Firebase、お店の情報の取得はHotpepper APIを利用しています。

【パッケージ】

"dependencies": {
    "axios": "^1.7.9",
    "body-parser": "^1.20.3",
    "cors": "^2.8.5",
    "express": "^4.21.2",
    "firebase": "^10.14.1",
    "firebase-admin": "^13.1.0",
    "https": "^1.0.0"
  },
  "devDependencies": {
    "@eslint/compat": "^1.2.6",
    "@eslint/eslintrc": "^3.2.0",
    "@eslint/js": "^9.20.0",
    "@formkit/tempo": "^0.1.2",
    "@types/body-parser": "^1.19.5",
    "@types/cors": "^2.8.17",
    "@types/express": "^5.0.0",
    "@types/firebase": "^3.2.3",
    "@types/node": "^22.13.4",
    "@typescript-eslint/eslint-plugin": "^8.24.1",
    "@typescript-eslint/parser": "^8.24.1",
    "eslint": "^9.20.1",
    "eslint-import-resolver-typescript": "^3.8.1",
    "eslint-plugin-import": "^2.31.0",
    "globals": "^15.15.0",
    "prettier": "^3.5.1",
    "rollup-plugin-visualizer": "^5.14.0",
    "ts-patch": "^3.3.0",
    "tsc-alias": "^1.8.10",
    "tsx": "^4.19.2",
    "typescript": "^5.7.3",
    "typescript-eslint": "^8.24.1",
    "typescript-transform-paths": "^3.5.3",
    "vite": "^6.1.0",
    "vite-express": "^0.20.0",
    "vite-plugin-node": "^4.0.0"
  },
  "volta": {
    "node": "22.12.0",
    "bun": "1.2.1"
  },
  "engines": {
    "node": "22.12.0",
    "bun": "1.2.1"
  }

終わりに

まず、誰でもアクセスできる形でアプリケーションを構築・公開できた点は非常に達成感があります!
バックエンドの構築やGitHub actionsによるCI/CDなど、自分がやったことのないことにも触れられた点は、今後の業務にもつなげていければと思っています。

また、様々な便利なサービス・パッケージも発見することができたため、今後記事を執筆していきたいと思います!

その一方で、「要件定義(作りたいアプリケーション像の構築)が不十分」「汎用的な部品の切り出しができなかった」など、反省点も多々あります。
今後の記事へのコメントなどで、改善すべき点をご教示いただけますと幸いです m(_ _)m