• 

  app interface

About the Project — CampusReels

Inspiration

Students like me struggle to grasp concepts from long lectures or hour-long videos. When crunch time hits, we end up scrolling Reddit for quick tips. I asked: why not build a **campus-friendly hub* that gives the same bite-size clarity—but organized by course and topic?* CampusReels brings a reel format for fast comprehension and Pointers (concise study notes/checklists) so classmates can learn, add context, and move on.

What It Does

• Reels: 30–60s clips for concepts, lab demos, TA hints.
• Pointers: Short, scannable notes you can upvote and save.
• Course Spaces: One common place per course (feeds, pinned Pointers).
• Job Hub & Advisor Support (roadmap): Central posts for internships, résumé tips, and advisor announcements.
• Community Signals: Likes, comments, tags—so the most helpful items surface fast.
• AI Homework Coach: Hint-first answers with code and LaTeX, designed to teach the method (not just give the final).

What I Learned

• Product: Short-form, structured knowledge beats long clips for first-pass understanding.
• Design: Motion + consistent spacing makes dense academic content feel approachable.
• AI Pedagogy: A hint-first prompt with limits produces better learning than full solutions.
• DX: Vite + React + Tailwind + Framer Motion let you iterate UI/UX at hackathon speed.

How I Built It

• Frontend: React (Vite, TypeScript) with Tailwind for a blue/white theme, Framer Motion for micro-interactions and page transitions.
• Data: Seeded JSON → localStorage (no backend needed to demo). Reels use HTML5 video with IntersectionObserver to pause off-screen.
• AI: Gemini 1.5 Flash via a small client helper; if no key is present, a deterministic mock keeps the demo reliable.
• Ranking (lightweight): Items are ordered by a relevance score that prefers fresh, course-matched content: [ s = \alpha,\text{recency} + \beta,\text{courseMatch} + \gamma,\text{tagOverlap} + \delta,\log(1+\text{upvotes}),\quad \alpha>\beta>\gamma>\delta ] A “pointer density” signal nudges under-documented courses: [ D_c=\frac{#\text{Pointers in last 14 days}}{\text{active students in }c} ]

Challenges

• Scope: Cutting auth, full media uploads, and complex moderation to ship a polished MVP.
• Video UX: Smooth autoplay/tap-to-play while keeping battery use low and pausing off-screen.
• Academic Integrity: Tuning the AI to coach (steps, checks, small examples) rather than solve graded work verbatim.
• Findability: Designing tabs (All / My Courses / Pointers) and tags so helpful content is always one tap away.

Why It Matters

Not everyone learns from long lectures. CampusReels meets students where they are—fast, visual, searchable—and turns crowd knowledge into concise Pointers that compound over a semester. The result is less time lost, more “aha” moments, and a campus hub that can also extend into job info and advisor updates when students need them most.

Built With

• button
• chatgpt-said:-built-with-languages-typescript
• css-frameworks-&-libraries-react-(vite-template)
• cursor-npm-(or-pnpm)
• custom-components-(card
• intersectionobserver-(auto-pause-offscreen)-svg-iconography
• issues
• javascript
• markdown-(mdx-style-content)
• modal)-deployment-(optional)-vercel-/-netlify-(static-hosting-with-optional-serverless-functions)-version-control-git-+-github-(repo
• no-backend)-(future-ready:-supabase/firebase-for-auth-&-uploads)-media-&-ui-html5-video-(reels)
• prettier-data-&-storage-seeded-json-?-localstorage-(hackathon-friendly
• react-router-tailwind-css-(utility-first-styling)-framer-motion-(animations-&-transitions)-remark/rehype-(markdown-?-html-with-code/latex-support)-ai-google-gemini-1.5-flash-(primary
• tabs
• toast
• via-rest-api)-deterministic-mock-fallback-(no-key-needed-for-demo)-tooling-vs-code
• vite-(dev-server-&-build)-eslint