JIIT Marauder's Map

A magical integration of Harry Potter's nostalgia with the real-life JIIT campus map.

Comment

Inspiration

The inspiration came from the Marauder’s Map in Harry Potter — a magical map that shows the real-time location of people within Hogwarts. We wanted to recreate that nostalgic magic using modern web technologies and bring it to our own college campus, JIIT. With the hackathon theme "Blast from the Past", this was a perfect opportunity to blend fantasy with functionality.

What it does

JIIT Marauder's Map is a live, interactive digital map of our college campus where:

Users can log in using Google.

Each person’s location is shown in real-time on the map as a glowing marker (like footsteps).

Users can create or join private rooms, allowing them to only see friends who are part of the same room.

The interface includes zoom in/out controls, animated cover transitions, sparkle effects, and a magical custom cursor.

Designed to feel like a vintage fantasy tool while being powered by modern tech.

How we built it

We used:

HTML, CSS, and JavaScript for the front end.

Firebase Authentication for secure Google sign-in.

Firebase Firestore to manage room data and user membership.

Geolocation API to fetch real-time user coordinates.

DOM manipulation & CSS transitions to animate the cover page and map interactions.

Cursor customizations, sparkle effects, and modal systems for visual polish.

All assets, such as the background and cursor, were custom-designed to reflect the magical theme.

Challenges we ran into

Accurately mapping real-world geolocation (latitude & longitude) onto a static image of our college map — this required calculating scaling ratios and bounding boxes.

Handling browser permissions for geolocation access, especially across different devices.

Making sure zooming works smoothly across screen sizes while keeping all map interactions consistent.

Syncing real-time location updates without draining performance or creating lag.

Designing a magical yet intuitive UI — balancing aesthetics with usability.

Accomplishments that we're proud of

Successfully created a working Marauder's Map for JIIT that tracks users in real-time.

Implemented a room system with admin/members using Firebase, allowing for private group visibility.

The animated cover page entry experience and sparkle effect add a unique touch that feels magical.

Built an interactive UI that’s not only functional but also visually immersive and theme-consistent.

What we learned

How to integrate Firebase Authentication and Firestore into a real-world project.

Dealing with geospatial mapping and rendering user positions accurately.

How to build and manage modals, transitions, and multi-user systems with real-time features.

Importance of accessibility, responsiveness, and smooth UX when designing interactive web apps.

Working as a team under time pressure — balancing ambition with feasibility

What's next for JIIT Marauder's Map

Add admin dashboards for room creation, deletion, and access control.

Introduce custom avatars or icons to replace markers (footsteps, house icons, etc.).

Implement chat or voice channels for rooms.

Allow users to tag locations (e.g., library, café) on the map.

Add support for mobile users with full responsiveness and gesture-based zoom.

Explore Bluetooth-based indoor tracking for precise real-location mapping within buildings.

Built With

  • and-their-memberships-?-firebase-hosting-(optional
  • and-visual-effects-?-javascript-(vanilla-js)-?-core-logic-for-user-interaction
  • animations
  • background-visuals-?-css-custom-properties-&-transforms-?-for-map-scaling
  • custom-cursor
  • dom-manipulation
  • etc.-?-geolocation-api-?-used-to-fetch-real-time-user-coordinates-from-the-device-?-firebase-(google-cloud-platform):-firebase-authentication-?-for-secure-google-sign-in-firebase-firestore-?-for-storing-and-managing-room-data
  • glow-animation
  • html5-?-structure-of-the-website-and-ui-components-?-css3-?-styling
  • if-used)-?-to-deploy-the-project-for-live-demo-?-custom-assets-?-hand-designed-map-images
  • map-zoom
  • marker
  • sparkle-animation
  • transitions
  • users
  • wand-cursor-(.cur)
Share this project:

Updates

Submission history