UniVerse
Inspiration
The idea for UniVerse came from a common frustration — the chaos of discovering student opportunities.
University emails, newsletters, and portals scattered important info everywhere, causing students to miss out on hackathons, case studies, and internships.
Our goal: create one clean, accessible platform that centralizes all student opportunities.
UniVerse turns a messy search into a simple, personalized feed — a single source of truth for every student’s professional growth.
What it does
UniVerse is a responsive web app that helps students discover and explore competitions, hackathons, and campus events.
Centralized Discovery & Prioritization
A vibrant Hero Section and quick Category Chips make browsing simple.
Global events appear in the main grid, while Campus Buzz highlights local university activities.
The layout prioritizes relevance without overwhelming the user.
Secure Personalization
Built with Firebase Authentication, the app supports smooth Sign In/Sign Up with real-time feedback.
After login, the header updates from “Login” to My Profile, giving instant user confirmation.
Responsive, Modern UI
Using Tailwind CSS, the interface adapts perfectly to all screen sizes.
Smooth transitions, gradients, and the Inter font give a premium, app-like feel.
How we built it
UniVerse uses HTML5, vanilla JavaScript, and Tailwind CSS, all within a single HTML file.
Firebase SDK (via CDN) handles authentication and real-time feedback.
Front-End: HTML & JS for structure and interactivity.
Styling: Tailwind for rapid, consistent design.
Auth: Firebase functions (signInWithEmailAndPassword, createUserWithEmailAndPassword) power login and signup.
Challenges we ran into
Single-File Constraint
Keeping all logic in one file made dependency management tricky.
Solution: Used <script type="module"> with Firebase CDN imports to maintain clean scope.
Async Authentication Updates
Firebase state changes caused brief UI delays.
Solution: Used onAuthStateChanged to instantly update the header when login status changed.
Simulating Multiple Pages
Without a router, switching between login/signup views was complex.
Solution: Used modals and state toggles to simulate multi-page behavior.
Accomplishments we're proud of
Responsive Auth Modal — Unified Sign In/Sign Up modal with instant feedback.
Future-Ready Architecture — Firebase integration sets the stage for Firestore-based personalization.
Mobile-First Perfection — Tailwind ensures seamless performance across all devices.
What we learned
Async State Management — Handling Firebase-driven state changes smoothly in vanilla JS.
User-Friendly Error Handling — Catching Firebase error codes for clear, helpful messages.
Code Modularity — Organizing all logic cleanly within a single <script type="module"> blocks
What's next for UniVerse
Firestore Integration — Let users save events to a personal “Watchlist.”
Filtering System — Add real-time search and category filters.
User Profiles — Create profile pages for saved events and account settings.
Log in or sign up for Devpost to join the conversation.