Important

The web app is deployed at https://slts-8e29d.web.app

Note

This web app was used by 70+ judges concurrently to judge over 750 participants across 36 events, with each it’s unique criteria to grade!

SLTS 2024

Firebase powered app to view, analyze registrations and judge(grade) participants for different events of SLTS-2024.

• Firebase Auth with email password.
• Dashboard for district wise DEC's and admin.
• Filter by group, event name, district.
• Search by student id and name.
• Cached Login.
• Data being read from Firestore.
• Deployed using Firebase hosting.
• Dashboards for event judges.
• Judge can grade participants for individual events.
• Admin can view events.
• Admin can view leaderboard of individual events.
• Admin can update the marking criteria of events.
• Dynamic routes were optimized for cost through URL query parameters.
• Admin dashboard, filter by needsPickup, needsDrop, arrivalDate, departureDate, checkInDate, checkOutDate.
• Judge can grade participants for group events.
• Judges can access curated-leaderboard.
• Participants sorted in the judge view list to ensure that any student participating in 2 events gets more priority as the judges might be waiting for the student in other event.
• On the day of actual event, registration desk can mark entry, report any corrections through corrections. Load optimized here by loading only one district data at a time as the participants are expected to arrive in a district-clustered manner.
• Accomodation details well formatted and accessible where data is grouped by arrival time, and district wise count inside each arrival time for precise logistics preparation.

Judging (a.k.a Grading)

Mobile View for Judge-related Pages

Admin Dashboard

Laptop View for Dashboard Page

Events Dashboard

Event - Update Criteria

Event - Leaderboard

Accomodations Dashboard

Registration Desk

Select District

Mark Entry/Add comments from Registration Desk

Registration Entries/Comments View Live

Setup Development

Tech Setup

1. Fork the repo and clone the forked repo.
2. Install the latest LTS version of Node.js from https://nodejs.org/en in your machine.

Initialize Firebase

3. Create a new project in firebase console.
4. Enable Firestore(test mode), Email/Password Authentication, Web App.
5. Follow the steps in this link to setup Firebase Admin SDK which will be used to initially populate the Firestore database with test data.
6. Place the downloaded service account JSON file in the root directory of the project.
7. Rename the service account JSON file to serviceAccountKey.json.

Run the app

8. Create a .env file in the root directory of the project in the below format and enter proper values. The values will be available in firebase console settings of the web app created.

   NEXT_PUBLIC_FIREBASE_API_KEY=""
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=""
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=""
   NEXT_PUBLIC_APP_ID=""

9. In the root directory, run the below command to install dependencies.

   npm i

10. In the root directory, run the below command to populate your Firestore database and auth with test data.

    npm run firebase:init

11. In the root directory, to run the app in dev mode, run the below command.

npm run dev

Developers

Ashwin Narayanan S Gokula Krishnan Vaibav V Hari S K Thilagan Iniyavan