概要

このアプリケーションは, 城好きに向けた城巡りの計画をサポートするためのWebアプリケーションです．
このアプリケーションはマップ上で城の位置を示すことで，簡単に城の位置を知られます

過去に制作したものを授業の最終課題のために v2 として作り替えました
tRPCを用いてフロントとバックの型安全な API を構築してみることを目的にしました

技術スタック

• フロントエンド
  • Next.js (App Router)
  • leaflet
  • SASS
  • superjson
  • swr
  • Cloudflare Pages
• バックエンド
  • tRPC
  • drizzle-orm
  • wrangler
  • Cloudflare Workers
  • Cloudflare D1

結果

tRPCを用いることで容易に型安全にフロントとバックを結合できました．
ルータごとにコントローラ・サービス・DTO・テストを配置することで分かりやすく今後の拡張性を持たせられたと思います．

また，プリミティブ型に限らず全ての型を共有できるようにするために superjson を使用してみました．
これにより，さらに容易に型を共有できるようになりました．
一方でDate型はAPIを叩くたびに作成されるため，同じ日時でもReactでは別物と認識されてしまい最レンダリングが起きてしまう問題がありました．
また，SWRを使っているものの私の Jotai の使い方とマッチしていませんでした．
Jotai をより上手く駆使すればリファクトできるが全体の設計から適切でなかったと感じ，デプロイはしませんでした

マップをグリグリ動かしレンダリングが多く発生するため v3を作るならば，solid.js を使ってみると良いかもと思っています

デプロイ先

castles.satooru.dev (v1)