ShiftBポータルサイトの学習ログ機能実装

依頼元

株式会社bubekichi（https://bubekichi.com/）

概要

ShiftBポータルサイトの学習ログ機能を実装しました。

担当範囲

• フロントエンド実装

• バックエンド実装

使用技術

フロントエンド

• 言語：TypeScript

• フレームワーク：Next.js 14 (App Router)

• スタイリング：TailwindCSS

• 状態管理/データフェッチ：SWR

バックエンド

• 言語：TypeScript

• フレームワーク：Next.js 14 (API Routes)

• データベース：PostgreSQL (Supabase Database)

• ORM：Prisma

• 通知機能：Slack API

実装内容

学習時間の自動計測機能を実装しました。

• 学習開始ボタン押下時：StudyLogテーブルにサーバーサイドで現在時刻を取得してレコード作成

• 学習終了ボタン押下時：モーダル表示で学習内容を入力可能

• 学習記録と同時にSlackへの任意通知機能を実装