あしたぼ (軽音サークルHP & Webアプリ)
公開日: 2025/5/5
Web開発Next.jsTypeScriptPostgreSQLAuth.jsチーム開発
これはなに？
僕が所属している大学の軽音サークル「あしたぼ」の公式ホームページ兼、部員だけが使える便利機能付きのWebアプリです。もともとあったPHPとCSVファイルで動いていた古いサイトを、もっと使いやすく、もっといい感じにするためにフルリニューアルしました。
開発目的
前のサイトがPHP+CSV, 無料サーバのMySQLも全く使っていないという30年前みたいな技術スタックだったのがもったいなく(前のシステムがなければ当然この発想も出ないため、作ってくださった先輩方には当然リスペクトもありつつ)、サークルの活動体験がもっと楽しく便利になるよう、また自分自身の技術をもっと磨き上げられるように開発しました。
使用技術
- Next.js + TypeScript: Next.jsのフルスタックです。Next 15を使い、cacheやApp Routerなどをバリバリ使っています。
- Prisma + PostgreSQL: データベース周り。特筆することはなし。
- Auth.js (LINE OAuth): LINEで簡単にログインできるようにしました。ただAuth.js v5の変更に伴ってバグが多く苦戦しました。
- Vercel: デプロイ先。本当はAWSとか使ってみたいんですが普通にオーバースペックなのでいりません。てかすでにオーバースペックです。
工夫点
- 技術スタックの刷新: 古いPHP+CSV構成から、Next.js+TypeScript+PostgreSQLっていうモダンな構成に変えました。
- 部員向け便利機能:
- 部室予約: UIをかなり工夫し、一目で分かるようにしました。
- 限定公開ライブ映像検索: YouTubeに限定公開でアップされてる過去のライブ映像を、タイトルとか曲名で検索できるようにしました。便利～
- チーム開発: デザインに関して、サークルの先輩にFigmaを触っていただき、ホームページをかわいく仕上げることが出来ました。
今後の展望
- チーム開発: チーム開発の基礎からuseEffectの使い方までを書いたドキュメントを作成し、かつこれの保守をしてくれる後輩を育てたいです。
- 日程調整機能: バンド間での日程調整に長らく苦戦しているので、サイト上にアプリとして作成するつもりです。
- 大規模リファクタリング: 初学者の頃に書いたコードやなんか知識が微妙なころに適当に書いたコードが多く、冗長だったり汚かったりします。めちゃくちゃ面倒くさいけどClineと協力してリファクタリングしたい。