推しアイデア
部屋のスペースを選択して、そのまま予約可能 今予約されているスペースがあるかひと目でわかる
SearchRoom
HTML
CSS
TypeScript
Next.js
Firebase
金沢工業大学のレンタルスペースを予約できるアプリ
作った背景
金沢工業大学には学生が使えるレンタルスペースがあります。しかし、レンタルの手続きが複雑で対面でしか行えないという不便さがあります。 このアプリでは、その手続きを DX して、金沢工業大学の学生なら誰でも気軽にレンタルスペースでコミュニティ活動を行えるようにします。
推し技術
Next.js v12 - Middlware が使える Firebase JS SDK v9 - バンドルサイズ削減 - モジュールベースの API に
プロジェクト詳細
チーム名
ちーむうっかり
チームメンバー
- 井関禎朗
- 福島大稀
- 岡本稔史
アプリ概要
金沢工業大学のレンタルスペース
機能概要
「ログインする」から金沢工業大学のメールアドレスを使ってログインできます。
ログインすると、レンタルスペースの予約状況を見れます。
空いているスペースを選択するとすぐに予約できます。
工夫した点、頑張った点
- デザイン
- sigreni free illust を使用
- イラストの世界観に合うカワイイ見た目を目指しました
- border が太め
- モノクロがベース
- tailwindcss で実装を頑張った
- ログイン機能
- Next.js v12 の Middleware を採用
- Middleware で出し分けるので同じパスで違うページを出し分けられる
- Firebase Authentication の Cookie を Middleware で捌く
- Middleware では SDK を使えないので認証処理は API Routes で実行
- ログイン可能なメールアドレスを
planet.kanazawa-it.ac.jpに限定 - React Contect API で state を保持
実装したかったけどできなかった機能
- 予約機能
- 予約状況管理
- レンタルスペースの備品管理
- レンタルスペースの備品予約
使用技術やシステム構成
- Next.js
- TypeScript
- Vercel
