This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
CampusBeat 2.0 — a React Native campus super-app for students across 17 colleges in Odisha, India.
It started in 2023 as a simple notice board aggregator: scrape college websites so students didn't have to visit them. It worked. Students used it. Then life happened, and it sat untouched on GitHub for three years.
This challenge gave me the push to finally open that repo again. What I found was equal parts embarrassing and educational.
What it is now:
- 📰 Real-time notices for 17 colleges — ITER, KIIT, NIT Rourkela, IIT, and more
- 🎨 Complete UI overhaul — warm cream × charcoal × coral editorial design
- 🃏 3D tiltable campus identity card you can share with friends
- 🔖 Bookmarks — save any notice, grouped by college
- 💬 Real-time campus chat rooms powered by Socket.io
- 🛒 Campus marketplace — buy/sell within your college
- 🔔 Push notifications via Firebase
Demo
The original app from July 2023: LinkedIn post
CampusBeat 2.0 — running on device:
Onboarding screen - with beautiful animation
Onboarding.mp4 - Google Drive
drive.google.com
Login screen — editorial serif heading, Lottie animation, warm ink hero
Register screen — custom college picker bottom sheet with live search
Home screen — quote card, college notice feed, floating tab bar
Profile screen — 3D tiltable campus card with holographic shimmer
Share modal — drag to rotate the card, share natively
News Explorer — college chips, notice type tabs, live banner
Marketplace — buy and sell within your college
Bookmark - your persistent news
bookmark.mp4 - Google Drive
drive.google.com
Chat screen - live interaction within colleges
chat.mp4 - Google Drive
drive.google.com
The Comeback Story
What I found after 3 years
Opening an old repo is humbling. Here is what I walked into.
The dead API. The home screen showed a daily quote — except quotable.io had shut down. Every user was silently seeing the hardcoded fallback for three years:
"Villains are not bad, they are just real and true."
Nobody told me.
The login race condition.
// 2023 — broken
dispatch(login(email, password)).then(() => {
if (user) navigation.navigate("Main");
// user is ALWAYS null here — Redux hasn't updated yet
});
Redux updates asynchronously. By the time .then() fires, user in that closure is still the stale pre-dispatch value. Nobody ever got navigated after logging in on a fresh install.
The AsyncStorage timestamp bug.
// currentTime is a number
// storedTimestamp is a STRING (AsyncStorage always returns strings)
currentTime - storedTimestamp < 24 * 60 * 60 * 1000
// number - string = NaN, NaN < anything = false
// Cache NEVER worked. Re-fetched the dead API every single app open.
The copy-paste bug. This exact if/else chain existed copy-pasted in two separate files:
if (selectedSubNews === "General Notice") setPrefix("gn");
if (selectedSubNews === "Exam Notice") setPrefix("en");
// ... 8 more branches in Feed.js AND GeneralNews.js
CORS locked to localhost. The deployed backend had origin: "http://localhost:3000". The mobile app in production couldn't talk to it at all.
Open scrape routes. Anyone could hit /odisha/update to trigger all 17 college scrapers simultaneously. No auth, no rate limiting.
What I changed
Design was the most visible transformation. Out: harsh #051E2D dark blue with #38A2E0 neon accents. In: #F2EDE4 warm cream, #1C1917 ink, #C8432A warm coral — a calm editorial palette that Gen Z actually responds to.
Bug fixes landed in this order:
// Fixed login — useEffect pattern, no closure stale value
useEffect(() => {
if (isAuthenticated) navigation.replace("Main");
}, [isAuthenticated]);
// Fixed AsyncStorage cache — parseInt the stored string
const fresh = storedData && storedTs &&
(now - parseInt(storedTs, 10)) < CACHE_DURATION_MS;
// Fixed prefix map — single shared utility, no duplication
// utils/prefixMap.js
export const getPrefix = (s) => PREFIX_MAP[s]?.prefix ?? "";
Architecture cleanup:
-
constants/api.js— all URLs in one place, no more scattered hardcoded strings -
utils/prefixMap.js— single source of truth for notice type → API prefix -
constants/style.js— full design token system: palette, typography, spacing, radius, shadows, college accent colors for all 17 colleges
New features:
- Socket.io campus chat rooms with typing indicators and message history
- Marketplace with category filtering, pagination, owner-only delete
- Bookmarks persisted to AsyncStorage, grouped by college, swipe-to-delete
- 3D campus card using
PanResponder→rotateX/rotateYinterpolation with holographic shimmer - Custom college picker bottom sheet (replaced the native
Pickerwith search + styled list)
The dependency upgrade tax
The project was 3 years old. Updating to current versions silently broke five things:
| Package | What broke |
|---|---|
mongoose 9.x |
mongoose.set("strictQuery") removed — server wouldn't start |
reanimated 4.x |
Layout renamed to LinearTransition
|
| React 19 | Hooks inside .map() callbacks crash in strict mode |
express 5.x |
Path-to-regexp v8 breaking wildcard route changes |
None of these gave helpful error messages. This is the real cost of abandoning a project — every year of neglect adds one more silent explosion to debug.
The tab flicker fix
The most satisfying bug to solve. The tab bar was flickering on every press. Root cause: paddingHorizontal: withSpring(...) inside useAnimatedStyle.
Animating layout props on the UI thread forces React Native to re-measure and re-layout every frame — that's the flicker. The fix was to stop animating layout props entirely:
// BEFORE — flicker
const pillStyle = useAnimatedStyle(() => ({
backgroundColor: interpolateColor(progress.value, [0, 1], [...]),
paddingHorizontal: withSpring(isActive ? 14 : 10), // ← layout prop, causes flicker
}));
// AFTER — no flicker
// Static conditional styles for padding, only animate color
<Animated.View style={[
styles.tabPill,
isActive ? styles.tabPillActive : styles.tabPillInactive, // static
pillStyle, // only backgroundColor animated
]}>
Also: all 5 tab screens stay permanently mounted using opacity: 0 / pointerEvents: "none" toggle. The old condition && <Screen /> pattern unmounted and remounted on every switch — that's what caused the full-screen flash between tabs.
My Experience with GitHub Copilot
I want to be honest: Copilot didn't write the app. But it made me faster in specific, measurable ways.
Bug pattern recognition was the biggest win. When I showed it the login .then() code and described the symptom, it immediately identified the Redux closure staleness issue and suggested the useEffect on isAuthenticated pattern. That would have taken me 30 minutes of debugging.
Boilerplate acceleration. The Socket.io room management — join, message history fetch, typing emit, disconnect cleanup — Copilot scaffolded this from a single comment describing what I wanted. I wrote the business logic on top.
Code review. Asking Copilot to review specific functions caught the parseInt missing from the timestamp comparison, and spotted the duplicate prefix mapping across two files. Fresh eyes, instantly.
Animation scaffolding. I described the home screen bubble animation in plain English: "two morphing orbs that bounce off screen edges with organic shape, glow halos, and a blend effect when they meet." Copilot gave me the requestAnimationFrame loop structure and radial gradient layer setup. Saved an hour of Skia documentation reading.
The most honest framing: Copilot is a very good pair programmer who reads docs faster than I do. The design decisions, UX flows, architecture choices — mine. Copilot helped me build what I envisioned, faster.
Tech Stack
Frontend — React Native + Expo SDK 56, Reanimated 4.x, @shopify/react-native-skia, react-native-gesture-handler, socket.io-client, Redux Toolkit 2.x
Backend — Node.js + Express 5, MongoDB + Mongoose 9, Socket.io, Firebase Admin, Cheerio + Axios (web scraping)
Colleges supported — ITER · KIIT · CGU · OUTR · GITA · RAJDHANI · UTKAL · GEC · TRIDENT · NIT Rourkela · SILICON · IIT Bhubaneswar · IIT Delhi · IIT Bombay · IIT Kharagpur · IIT Madras · IIT Kanpur
Built in Bhubaneswar, Odisha. For every student who's tired of their college website.
Top comments (0)