NowLoading...

SearchRoom

https://github.com/cloche3/smapro
HTML

HTML

CSS

CSS

TypeScript

TypeScript

Next.js

Next.js

Firebase

Firebase

金沢工業大学のレンタルスペースを予約できるアプリ

ユーザーアイコン

Tadao ISEKI

MacBook
サムネイル

推しアイデア

部屋のスペースを選択して、そのまま予約可能 今予約されているスペースがあるかひと目でわかる

作った背景

金沢工業大学には学生が使えるレンタルスペースがあります。しかし、レンタルの手続きが複雑で対面でしか行えないという不便さがあります。 このアプリでは、その手続きを DX して、金沢工業大学の学生なら誰でも気軽にレンタルスペースでコミュニティ活動を行えるようにします。

推し技術

Next.js v12 - Middlware が使える Firebase JS SDK v9 - バンドルサイズ削減 - モジュールベースの API に

プロジェクト詳細

チーム名

ちーむうっかり

チームメンバー

  • 井関禎朗
  • 福島大稀
  • 岡本稔史

アプリ概要

金沢工業大学のレンタルスペース

機能概要

Screen Shot 20211212 at 15.04.42.png

「ログインする」から金沢工業大学のメールアドレスを使ってログインできます。

Screen Shot 20211212 at 15.03.37.png

ログインすると、レンタルスペースの予約状況を見れます。

Screen Shot 20211212 at 15.06.14.png

空いているスペースを選択するとすぐに予約できます。

工夫した点、頑張った点

  • デザイン
    • 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
Tadao ISEKI

Tadao ISEKI

@4cyt87rr8h7qvvpd