evento

evento

evento従来の紙とペンによる方法を高速で効率的なデジタル ソリューションに置き換えることにより、大学イベントの出席状況追跡を合理化および最新化するように設計されたプログレッシブ Web アプリ (PWA) です。

特徴

• Progressive Web App (PWA) : あらゆるデバイスにインストールでき、オフラインでアクセスでき、ネイティブ アプリと同様のシームレスなユーザー エクスペリエンスを提供します。
• QR コード スキャン: 学生 ID の QR コードをすばやくスキャンして、出席を即座に記録します。
• リアルタイム データ: 即時更新とデータ同期により、正確かつ最新の出席記録が得られます。
• ユーザーの役割と権限: メイン管理者、副管理者、およびセキュリティと適切なデータ管理を確保するために機能が制限された役員ごとに異なるアクセス レベル。
• 通知とアラート: 出席関連のイベントや潜在的な問題に関するカスタム通知。
• レスポンシブ デザイン: デスクトップ、タブレット、スマートフォンなど、あらゆるデバイスでの使いやすさを保証する完全レスポンシブ デザイン。

スクリーンショット

モノレポ

インストール

eventoをインストールして使用するには、次の手順に従います。

1. リポジトリのクローンを作成します。

   git clone https://github.com/domsdano/events-attendance.git

2. プロジェクト ディレクトリに移動します。

    cd evento

3. 依存関係をインストールします。

   npm install

4. アプリを実行します。

   npm start

5. 実稼働用のアプリを構築する:

   npm run build

6. アプリをデプロイする: 好みの方法に従って、構築されたアプリを Web サーバーまたはホスティング サービスにデプロイします。

使用法

1. ログイン: 管理者と役員は、自分の資格情報を使用してログインします。
2. QR コードをスキャン: 内蔵の QR コード スキャナーを使用して、出席のために学生 ID をスキャンします。
3. 出席記録の表示: リアルタイムの出席データにアクセスして管理します。
4. 通知: 出席関連のイベントに関するアラートと通知を受け取ります。
5. ユーザー管理: ユーザーを管理し、適切な役割と権限を割り当てます。

使用されている技術

• React : ユーザーインターフェイスを構築します。
• Tailwind CSS : アプリケーションのスタイル設定用。
• shadcn : アクセス可能なコンポーネント用。
• Zustand : 状態管理用。
• React Query : データのフェッチとキャッシュ用。
• Html5Qrcode : QR コードのスキャン用。
• React Toastify : 通知とアラート用。
• TypeScript : 型の安全性と開発者のエクスペリエンス向上のため。
• Framer Motion : スムーズなアニメーションとトランジション用。

貢献する

evento改善するための貢献は大歓迎です!アイデア、提案、バグレポートがある場合は、問題を開くかプルリクエストを送信してください。

1. リポジトリをフォークする:

   git fork https://github.com/domsdano/events-attendance.git

2. 新しいブランチを作成します。

   git checkout -b feature/your-feature-name

3. 変更をコミットします:

   git commit -m " Add your commit message "

4. ブランチにプッシュ:

   git push origin feature/your-feature-name

5. プル リクエストを開く: 変更内容を説明し、レビューのためにプル リクエストを送信します。