PresenSync - 出席管理システム

Web
PresenSync - 出席管理システム

PresenSync - 出席管理システム

PresenSyncは大学向けのリアルタイム出席管理プラットフォームです。QRコードによる自動出席、講師・管理者向けダッシュボード、Supabaseを使ったリアルタイム更新、休講・欠席申請の承認ワークフロー、出席レポートと分析機能をワンストップで提供します。React＋Vite＋Tailwindで構築され、Vercelでのホスティングを想定した軽量なフロントエンド設計です。（約300字）

https://github.com/kavindya12/PresenSync-Attendance-System

概要

PresenSyncは大学の出席管理を自動化・可視化するためのQRベースのシステムです。学生は授業で表示されるQRコードをスキャンして出席を記録し、講師や管理者はリアルタイムのダッシュボードで参加状況を確認できます。Supabase（PostgreSQL＋Auth＋Realtime）をバックエンドに利用し、認証・データ保存・リアルタイム通知を一貫して扱う設計です。フロントエンドはReact＋Vite＋Tailwindで実装され、Figmaによるデザインシステムも用意されています。導入・運用が比較的容易で、レポート作成や欠席申請の承認フローも備えた教育機関向けの実用的な設計を持ちます。（約300字）

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 4
  • ファイル数: 3
  • メインの言語: JavaScript

主な特徴

  • QRコードによる出席登録：授業中に生成されるQRコードを学生がスキャンして出席を記録。
  • リアルタイム更新：Supabase Realtimeを用いて出席状況やダッシュボードを即時反映。
  • 役割ベースのダッシュボード：学生、講師、管理者それぞれに最適化された画面と機能。
  • 申請と分析：欠席申請の承認フロー、出席レポートおよび基本的な分析機能を提供。

技術的なポイント

このプロジェクトはフロントエンド中心の実装と、BaaSとしてのSupabaseを組み合わせた典型的なモダンWebアーキテクチャを採用しています。フロントエンドはReact＋Viteで高速に起動・ビルドでき、Tailwind CSSでユーティリティベースのスタイリングを行うことでUIの一貫性と生産性を確保しています。認証・ユーザー管理・データベースはSupabase（PostgreSQL）に任せることで、サーバー運用負荷を低減しつつ、Authによるロール管理（学生・講師・管理者）やRow Level Securityでデータアクセス制御が可能です。リアルタイム機能はSupabaseのRealtimeを利用し、WebSocket経由で出席イベントをブロードキャストすることで講師側の出席リストや統計が即時更新されます。QRコードはフロントエンドで生成（あるいは表示）し、スキャンによって得られるトークンをSupabaseに送信して出席レコードを作成するフローが想定されます。デプロイはVercelを想定しており、フロントエンドの継続的デリバリーが容易です。設計上の注意点として、QRワンタイムトークンの有効期限管理、トークンの推測対策（署名／ハッシュ化）、およびネットワーク遅延時の再送・重複排除ロジックが重要です。さらに、スケーラビリティの観点からはSupabaseの接続数とRealtimeのイベント数を考慮し、必要に応じてトークン発行をバックエンド（Edge Function等）で行う拡張が望まれます。UI/UX面ではFigmaによるデザインシステムが用意されているため、コンポーネント化・アクセシビリティ対応・レスポンシブ設計が容易で、大学の運用フローに合わせたカスタマイズもしやすい構成です。（約900〜1100字相当）

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • README.md: file
  • presensync: dir

presensyncディレクトリはアプリ本体のソースを含む想定です（フロントエンドのコンポーネント、ルーティング、スタイル、QR生成/スキャンロジック、Supabase接続設定など）。READMEにはセットアップ手順や必要な環境変数（SUPABASE_URL、SUPABASE_KEY、Vercelの設定など）が記載されていることが期待されます。開発の流れとしては、ローカルでViteの開発サーバーを立ち上げ、Supabaseプロジェクトを作成してDBスキーマ（users, courses, sessions, attendances, leave_requests など）を用意し、Authでロールを設定することで主要機能を確認できます。運用面ではデータ保全（バックアップ）、監査ログ、権限の最小化、QRトークンの有効期限管理を運用ルールとして整備すると安全性が高まります。

まとめ

大学向けの実用的なQR出席管理を手軽に試せる設計です。（約50字）

リポジトリ情報：

READMEの抜粋： # PresenSync – Attendance Management System

PresenSync is a smart, QR-based attendance management system designed for universities.

Features

  • Student, Lecturer, and Administrator dashboards
  • QR code-based attendance
  • Real-time updates using Supabase
  • Leave management with approvals
  • Attendance reports & analytics

Tech Stack

  • Frontend: React + Vite + Tailwind CSS
  • Backend: Supabase (PostgreSQL, Auth, Realtime)
  • Hosting: Vercel

Design

  • Figma design system wi…