BITS Campus Platform

Demo screenshots

A narrative tour of the BITS App across every stakeholder role — admin, alumni, student, parent, faculty — captured against the seeded demo data. Each frame is a full-page screenshot of the current dev build.

Seeded users: 12 Feed posts: 7 Jobs: 4 Conversations: 1 accepted + 2 pending/declined Notifications: 4 admin
Stage 1

Identity & admin profile

Unauthenticated entry points, then the admin's own profile and preferences surfaces.

Unauthenticated public

Landing pageLanding page (mobile)
01-landing.png · /
Landing page

Public hero — unauthenticated visitors see this before being nudged toward login.

route: /
Login formLogin form (mobile)
02-auth-login.png · /auth/login
Log in

Email-or-phone + password login. MFA challenge view lives behind this same form.

route: /auth/login
Onboarding role pickerOnboarding role picker (mobile)
03-auth-onboarding-step1.png · /auth/onboarding
Onboarding — pick role

Entry step for self-serve signup; picks the primary stakeholder role before collecting details.

route: /auth/onboarding
Password resetPassword reset (mobile)
04-auth-reset-request.png · /auth/reset
Request password reset

Send-me-a-link flow. Confirmation page lives at /auth/reset/confirm.

route: /auth/reset

Admin — admin@srs-ngr.com role: admin

Admin home dashboardAdmin home dashboard (mobile)
05-admin-home.png · /app
Admin home

Welcome dashboard with quick actions, unread notifications count (2), and recent feed/jobs rail.

seeded: 2 unread notifications, 4 feed posts
Admin profile viewAdmin profile view (mobile)
06-admin-profile.png · /app/profile
Own profile

Read-only view of the admin's own profile card.

Profile editorProfile editor (mobile)
07-admin-profile-edit.png · /app/profile/edit
Edit profile

Form for display name, bio, department, company, etc.

Privacy settingsPrivacy settings (mobile)
08-admin-privacy.png · /app/profile/privacy
Privacy settings

Per-field visibility toggles (who sees company, city, contact).

Notification preferencesNotification preferences (mobile)
09-admin-notification-prefs.png · /app/profile/notifications
Notification preferences

Per-template channel preferences (email / push / in-app) for the 16 seeded templates.

Verification queueVerification queue (mobile)
10-admin-verifications-queue.png · /admin/verifications
Verification queue

Moderation — admin_approval method, Pending state. Vikram's pending verification request is the single record here.

seeded: vikram.alumni pending
Stage 2

Admin imports & invites

Bulk tooling surfaces for onboarding large cohorts of alumni and ingesting legacy rosters.

Admin role: admin

Import history listImport history list (mobile)
11-admin-imports-list.png · /admin/imports
Import history

Bulk import log — empty state shown (no CSV uploads seeded). "New upload" button initiates a fresh import run.

seeded: 0 imports
Alumni invites pageAlumni invites page (mobile)
12-admin-alumni-invites.png · /admin/alumni/invites
Alumni invites

Directory-seeded invite flow for alumni who haven't claimed their account yet.

Stage 3

Directory

Search, filter and inspect members across cohorts, programs and roles.

Admin view

Directory empty stateDirectory empty state (mobile)
13-directory-list.png · /app/directory
Directory home

Search-first UX — users type a query or apply a filter to reveal results. "Start exploring" CTA is the default state.

Member profile pageMember profile page (mobile)
14-directory-entry.png · /app/directory/:userId
Member profile — Aisha Khan

Public profile card: role chips, batch, programme, department, company, city. Message CTA starts a 1:1 thread.

seeded: aisha.alumni — MBA 2010, Amazon Pune
Stage 4

Notifications

Inbox of system notifications with read / unread distinction and navigate-to-target links.

Admin role: admin

Notifications inboxNotifications inbox (mobile)
15-notifications-inbox.png · /app/notifications
Inbox

Seeded admin notifications (4 entries). Unread indicator matches the header badge.

seeded: 4 admin notifications
Stage 5

Community feed

Scoped-visibility posts (public / institute / alumni-only) with reactions and comments.

Admin view

Feed as adminFeed as admin (mobile)
16-feed-admin.png · /app/feed
Feed — admin

Admin sees posts across every scope: public + institute + own. Reaction counts reflect the 14 seeded reactions.

seeded: 7 posts, 4 comments, 14 reactions
Post detailPost detail (mobile)
17-feed-post-detail.png · /app/feed/posts/:postId
Post detail

Priya Sharma's "Summer intern SWE role" post with reaction tray and comment composer.

Alumni view — priya.alumni@srs-ngr.com

Feed as alumniFeed as alumni (mobile)
19-feed-alumni.png · /app/feed
Feed — alumni

Same feed surface, scoped to what an alum can see (public + alumni-only posts).

Stage 6

Jobs & referrals

Open roles from alumni + partner companies. Apply directly or request a referral.

Alumni — priya.alumni@srs-ngr.com role: alumni

Alumni homeAlumni home (mobile)
18-alumni-home.png · /app
Alumni home

Priya's dashboard — quick links to jobs, referrals, messages with dev.student.

Jobs boardJobs board (mobile)
20-jobs-list.png · /app/jobs
Jobs board

Three open roles seeded: Product Manager @ Amazon (Pune), Firmware Engineer @ Microsoft (Hyderabad), Senior SWE @ Google (Bangalore).

seeded: 3 open + 1 closed
Job detailJob detail (mobile)
21-jobs-detail.png · /app/jobs/:id
Job detail — Product Manager @ Amazon

Posted by Aisha Khan. Apply-now + Refer-someone actions with external application link.

Post a jobPost a job (mobile)
22-jobs-new.png · /app/jobs/new
Post a new job

Alumni role lets Priya submit a new opening. Form covers title, company, location, experience, description.

Referral requestsReferral requests (mobile)
23-jobs-referrals.png · /app/jobs/referrals
Referral requests

Priya owns 1 seeded referral — this view lists inbound referral asks she can accept or decline.

seeded: 1 referral

Admin view

Admin jobs boardAdmin jobs board (mobile)
24-admin-jobs-board.png · /admin/jobs
Admin jobs board

Moderator view — every job across every state, with bulk close/reopen controls.

Stage 7

Messaging

Two-sided approval-gated 1:1 DMs. Accepted threads go to Inbox; unsolicited ones sit in Requests.

Priya (alumni) — accepted thread with dev.student

Messages inboxMessages inbox (mobile)
25-messages-inbox.png · /app/messages
Messages — inbox

One accepted conversation with Dev Patel. Unread badge shows 2 unread from dev.

seeded: 1 accepted conv, 5 messages
Conversation threadConversation thread (mobile)
26-messages-conversation.png · /app/messages/:id
Conversation — Priya ↔ Dev

Full 5-message thread: Priya's welcome, Dev's thanks, Priya's CS-project compliment, Dev's internship ask, Priya's "happy to help" reply.

Nisha (student) — pending inbound request from rohan.alumni

Message requestsMessage requests (mobile)
27-messages-requests.png · /app/messages/requests
Message requests — triage

Pending inbound request from Rohan Mehta about Nisha's EEE project. Accept opens a thread; Decline puts the sender on a 7-day cooldown.

seeded: 1 pending inbound
Stage 8

Unified calendar & BITSian Day

Cross-role campus calendar spanning academic, campus, chapter, personal and advanced events — plus the flagship BITSian Day geofenced check-in flow.

Calendar — every actor role: *

Calendar — alumniCalendar — alumni (mobile)
33-calendar-alumni.png · /app/calendar
Calendar — alumni

Priya's month view: BITSian Day, chapter lecture, and academic milestones blended into a single grid.

user: priya.alumni
Calendar — studentCalendar — student (mobile)
34-calendar-student.png · /app/calendar
Calendar — student

Institute-scoped events Dev can see: academics + campus happenings.

user: dev.student
Calendar — facultyCalendar — faculty (mobile)
35-calendar-faculty.png · /app/calendar
Calendar — faculty

Prof. Iyer's guest lecture is owned by a faculty member — appears alongside institute-wide events.

user: prof.iyer
Calendar — parentCalendar — parent (mobile)
36-calendar-parent.png · /app/calendar
Calendar — parent

Sunita's personal overlay appears alongside the institute events shared with parents of linked students.

user: sunita.parent
Calendar — staffCalendar — staff (mobile)
37-calendar-staff.png · /app/calendar
Calendar — staff

Ops staff see the institute-wide schedule they help run.

user: staff.ops
Calendar event detailCalendar event detail (mobile)
38-calendar-event-detail.png · /app/calendar/event/:id
Event detail — BITSian Day

RSVP (Interested / Going / Declined), "add to my calendar" overlay, and a geofenced check-in panel.

BITSian Day — alumni flagship role: alumni

BITSian Day alumni landingBITSian Day alumni landing (mobile)
39-alumni-bitsian-day.png · /app/alumni/bitsian-day
BITSian Day — alumni landing

Flagship reunion hero with countdown; tap "Check in" to hit the geofenced API (QR fallback when geolocation is denied).

seeded: 3 alumni check-ins

Admin — calendar CMS & BITSian Day dashboard role: admin

Admin calendar CMS — publishedAdmin calendar CMS — published (mobile)
40-admin-calendar-cms.png · /app/admin/calendar
Calendar CMS — published

Authoritative academic events (mid-sem, spring break) with mandatory flags and visibility chips.

Admin calendar — publish tabAdmin calendar — publish tab (mobile)
41-admin-calendar-publish.png · /app/admin/calendar#publish
Publish a new academic event

Title, window, location, visibility scope and mandatory toggle — posts to the calendar CMS.

Admin calendar — CSV importAdmin calendar — CSV import (mobile)
42-admin-calendar-import.png · /app/admin/calendar#import
Bulk CSV import

Upload or paste CSV; per-row validation errors render inline below the form.

Admin BITSian Day — batch heatmapAdmin BITSian Day — batch heatmap (mobile)
43-admin-bitsian-day.png · /app/admin/bitsian-day
Check-in heatmap — by batch

Live count of alumni check-ins bucketed by batch year. Default dimension.

seeded: 3 check-ins (2010, 2015, 2018)
Admin BITSian Day — geo gridAdmin BITSian Day — geo grid (mobile)
44-admin-bitsian-day-geo.png · /app/admin/bitsian-day
Check-in heatmap — geo grid

Alternate dimension: check-ins clustered into geo cells with centroid lat/lng.

Stage 9

Campus services

Visits with digital gate passes, guest-house bookings, faculty appointments, late-entry log, and the security scan console.

Parent — sunita.parent@srs-ngr.com role: parent

Parent visits — approved card with gate passParent visits — approved card with gate pass (mobile)
45-parent-visits-list.png · /app/parent/visits
Visits — approved gate pass

Sunita's semester-end visit is approved; the gate-pass card below shows the signed QR token plus a "Show QR" toggle.

seeded: 1 approved visit, valid 2 days
Parent visit composer formParent visit composer form (mobile)
46-parent-visit-form.png · /app/parent/visits
Plan a visit — composer

Date window, host lookup, and visitors table (name + ID proof). Submitting queues the request for admin review.

Parent hotel bookingsParent hotel bookings (mobile)
47-parent-hotel-list.png · /app/parent/hotel
Guest-house bookings

Availability widget plus "Your bookings" rail. Sunita's Pilani Residency stay (Room 201, Apr 21–23) shows a Confirmed chip.

seeded: 1 confirmed booking, ₹3,600 total
Parent appointmentsParent appointments (mobile)
48-parent-appointments-list.png · /app/parent/appointments
Faculty appointments

Approved slot with Prof. Iyer. Parent can cancel before the faculty member locks the slot.

seeded: 1 approved appointment

Parent — ravi.parent@srs-ngr.com role: parent

Ravi — requested hotel bookingRavi — requested hotel booking (mobile)
49-ravi-parent-hotel.png · /app/parent/hotel
Hotel — awaiting approval

Ravi's booking sits in REQUESTED state until an admin confirms. No payment stub yet.

seeded: 1 requested booking

Faculty — prof.kumar@srs-ngr.com role: faculty

Faculty appointments inboxFaculty appointments inbox (mobile)
50-faculty-appointments-inbox.png · /app/faculty/appointments
Appointments inbox

Prof. Kumar sees Ravi's requested slot; Approve mints the parent-side confirmation, Decline returns a reason.

seeded: 1 inbound request

Admin & security — admin@srs-ngr.com + staff.ops role: admin / staff

Admin gate passes queueAdmin gate passes queue (mobile)
51-admin-gate-passes-queue.png · /app/admin/campus/gate-passes
Gate passes queue

Pending tab surfaces Ravi's visit request; Approve mints a signed QR pass, Decline records a reason. Bulk-approve handles roster-day spikes.

Admin hotel bookings queueAdmin hotel bookings queue (mobile)
52-admin-hotel-bookings-queue.png · /app/admin/campus/hotel-bookings
Hotel bookings queue

Admin-only view across every guest house — approve / decline / cancel, with a running ledger of payment stubs.

Gate scanner empty stateGate scanner empty state (mobile)
53-admin-scan.png · /app/admin/scan
Gate scanner — empty

Manual QR-entry console for security. Paste the scanned payload, pick IN / OUT + gate, hit Scan. Camera mode ships in Phase 2.

Gate scanner with populated result chipGate scanner with populated result chip (mobile)
54-admin-scan-result.png · /app/admin/scan
Gate scanner — result chip

Live scan of the seeded approved-visit QR token. Recent-scans rail shows the per-attempt state chip, gate, direction, and server message.

Admin late entries logAdmin late entries log (mobile)
55-admin-late-entries.png · /app/admin/campus/late-entries
Late-entries log

Post-curfew returns recorded by security for audit; one seeded row for dev.student.

seeded: 1 late entry
Staff gate scannerStaff gate scanner (mobile)
56-staff-scan.png · /app/admin/scan
Gate scanner — staff view

Same scan console opened as staff.ops — the security role is allowed on this route alongside admin.

Perspectives

Role perspectives

How the home view changes by stakeholder role.

Student — dev.student@srs-ngr.com role: student

Student homeStudent home (mobile)
28-student-home.png · /app
Student home

Dev's dashboard — linked to sunita.parent, 5-msg thread with priya.alumni.

Student directory viewStudent directory view (mobile)
29-student-directory.png · /app/directory
Directory — student scope

Same surface but privacy rules constrain what a student can see.

Student applicationsStudent applications (mobile)
30-student-my-applications.png · /app/jobs/me/applications
My applications

Tracks Dev's job applications against the seeded open roles.

seeded: 2 applications

Parent — sunita.parent@srs-ngr.com role: parent

Parent homeParent home (mobile)
31-parent-home.png · /app
Parent home

Sunita is linked to dev.student — home surface is scoped to parent-relevant modules.

Faculty — prof.iyer@srs-ngr.com role: faculty

Faculty homeFaculty home (mobile)
32-faculty-home.png · /app
Faculty home

Prof. Iyer's dashboard.