OpportUNITY — Student Job Board Platform

💡 Inspiration

As students at KIIT (Kalinga Institute of Industrial Technology), we lived this problem every day. Opportunities were buried in WhatsApp groups, scattered across notice boards, LinkedIn, and dozens of websites. We'd find out about a great internship after the deadline had passed. That frustration inspired us to build OpportUNITY — one place for every student opportunity, ever.

🔨 What We Built

OpportUNITY is a centralized, student-first job board platform that aggregates jobs, internships, hackathons, and scholarships in one beautifully designed interface. Key features include:

🔍 Advanced Search & Filtering — by role, location, work type, salary range, domain, and recency
📋 3-Column Job Board — filter sidebar + listings + live detail panel, all in one view
✅ One-Click Apply — with real-time application status tracking (Applied → Under Review → Shortlisted → Interview → Offer)
🔖 Save & Dashboard — personal dashboard with saved jobs, application analytics, and deadline countdowns
🏢 Company Profiles — with open positions and culture info
🏆 Opportunities Hub — hackathons, scholarships, GSoC, exchange programs with spot-fill progress bars
📊 Analytics Charts — application funnel visualization with Recharts

⚙️ How We Built It

We chose a modern, fully client-side React stack for rapid development and zero backend overhead:

React 18 + React Router v6 for multi-page navigation
Tailwind CSS for the dark gold luxury design system
Framer Motion for page transitions and micro-animations
Zustand for global state (applied jobs, saved jobs, filters, toasts)
Recharts for the analytics dashboard
Vite for lightning-fast builds
Vercel for deployment

The design follows a dark luxury aesthetic — deep navy backgrounds, gold accents (#D4A843), Syne display font, and DM Sans body text — built to feel premium and trustworthy for students.

🚧 Challenges We Faced

1. Complex 3-Column Layout Building a sticky detail panel that scrolls independently while the sidebar and listings remain fixed required careful CSS grid, overflow, and max-height management across all screen sizes.

2. Cross-Page State Without a Backend Managing applied jobs, saved jobs, filters, and toast notifications across 10 pages with no backend required a carefully architected Zustand store with derived computed state.

3. Animation Performance Balancing rich Framer Motion animations with performance on lower-end devices required selective use of will-change, layout animation guards, and stagger optimization.

4. Time Pressure Building a full 10-page production-grade app in hackathon timeframe meant every design and architecture decision had to be decisive and deliberate. No room for rework.

📚 What We Learned

How to architect a scalable Zustand store for complex cross-page state
Advanced Framer Motion patterns: staggered children, AnimatePresence, shared layout animations
Designing accessible, high-contrast dark UIs with Tailwind CSS
The importance of component-driven architecture for rapid iteration