HackSphere — Beginner's Tech

Stack Guide
You don't need to know everything. You need to know which
4-5 tools to duct-tape together for your chosen problem.
Here's the map.
First, the mental model (read this once)
Every one of these apps has the same 4 layers:
1. Frontend — what the user sees/clicks (the website/app)
2. Backend — the "brain" that receives requests, checks
permissions, talks to the database (an API server)
3. Database — where data is permanently stored (users,
posts, boards, issues)
4. Extra services — auth, file/image storage, real-time sync,
AI — plugged in as needed
Frontend never talks to the database directly. It always goes:
Frontend → Backend (API) → Database. Auth, AI, and file
storage are usually "services" your backend calls out to.
The stack I'd recommend for ALL four
(beginner-safe, well-documented, huge
tutorial base)
 Layer Tool Why
React (via Vite) or Most tutorials exist for
Frontend plain HTML/CSS/JS if React; Vite gives
React is new to you instant setup
Same language
Backend [Link] + Express (JavaScript) as your
frontend — one less
thing to learn
Firebase Firestore No server setup,
Database or MongoDB Atlas generous free tier,
(free tier) works in a weekend
Login/signup/email
Auth Firebase verification in ~20 lines
Authentication of code, instead of
building it yourself
Vercel (frontend) +
Render/Railway Free, deploys in
Hosting (backend), or just minutes from GitHub
Firebase Hosting for
everything
AI Gemini API or Free/cheap tier, simple
features OpenAI API REST calls, works for
text and image tasks
If you want the absolute least setup: use Firebase for
everything (Auth + Firestore DB + Hosting + Storage). It
replaces your backend for basic CRUD, so you only write
frontend code + Firebase config. Great for a solo 48-hour build.
Problem Statement 1 — AlumniConnect
What makes it hard: role logic (student vs alumni),
search/ranking, and an "AI Career Assistant."
Need Tool Why
Email-only Firebase Auth + a Auth is handled for
signup + Cloud Function (or you; you just add
auto role by Express route) that one if (gradYear
grad year checks grad year on > currentYear)
signup check
Profiles, Simple documents:
alumni Firestore or one collection for
search, MongoDB users , one for
referral posts opportunities

You don't need ML

Alumni Plain JavaScript — a scoring formula
ranking (skill sorting function in (points for matching
match, your backend skills + seniority) is
seniority) enough for a
hackathon
AI Career Gemini/OpenAI
Assistant API — send resume This is the "AI-
(resume text + job powered" part — it's
scoring, description in a just a well-written
roadmap, prompt, ask for prompt, not custom
referral JSON back (ATS ML
messages) score, suggestions)
Admin A protected React Role check, not a
dashboard route that only separate app
 Need Tool Why
loads if [Link]
=== 'admin'

Flow: User signs up (Firebase Auth) → backend tags them

Student/Alumni → they browse/post via your Express API →
resume text gets sent to Gemini API → AI's JSON response
renders as suggestions in the UI.
MVP priority for 48h: Auth + profiles + opportunity board
first. AI Career Assistant (just resume ATS score + 1 suggestion
feature) second. Skip the leaderboard/badges unless time
remains.

Problem Statement 2 — CollaboDraw

What makes it hard: everyone must see the same drawing
update instantly — this is the one that genuinely needs a
different tool: WebSockets.
Need Tool Why
HTML5 Canvas + [Link] gives you
Drawing [Link] (or shapes/selection/undo
surface [Link]) for free instead of
hand-coding pixel math
Real-time [Link] ([Link] It's the standard way to
sync backend) push instant updates to
between all connected browsers
users — when User A draws,
the server broadcasts
 Need Tool Why
that stroke to everyone
else on the same board
Login +
board Firebase Auth Same as above
ownership
Saving MongoDB/Firestore
board — store each stroke So a board reloads with
state or periodic canvas previous drawings
snapshots
Live Also via [Link] —
cursors / broadcast
position +
cursor Same connection, just
"who's connected user list another event type
online" on every move
Flow: User opens a board → frontend opens a [Link]
connection to your backend → every draw action emits an
event ( {tool, points, color} ) → server broadcasts it to
everyone else in that "board room" → their canvases redraw it.
Board is periodically saved to the database so it persists.
MVP priority: Auth + create/join board + freehand drawing +
real-time sync (Level 1) is the whole game. That alone is a
complete, judgeable submission. Cursor presence and
undo/redo are strong next additions — skip export/shape-
manipulation unless ahead of schedule.

Problem Statement 3 — CivicConnect

What makes it hard: photo uploads, GPS/maps, and image-
based AI classification.
Need Tool Why
Login Supports
(Google Firebase Auth Google sign-in
OAuth + out of the box
email)
Handles image
Photo hosting/resizing
upload for Cloudinary (free tier) or — you just get
issue Firebase Storage back a URL to
reports save in your
database
No API
key/billing
Interactive [Link] (free, open- needed, unlike
map of source) with Google Maps,
issues OpenStreetMap tiles and plenty
beginner-
friendly
GPS location Browser' s built-in No extra library
capture [Link]
API needed
AI image Send the uploaded image Again — a
classification to Gemini Vision API (or prompt, not
(suggest OpenAI's vision model), ask custom-trained
category "what civic issue category ML. Big time-
from photo) is this?" saver.
 Need Tool Why
Duplicate Simple radius check: query No special tool
issue existing issues within — just compare
detection ~100m using lat/lng math coordinates in
your backend
Roles
(citizen, Store a role field per user Same role-
official, in the database, check it on gating pattern
moderator, each backend route as PS1
admin)
Flow: User reports issue with photo → photo uploads to
Cloudinary → image URL sent to Gemini Vision for category
suggestion → issue saved to DB with lat/lng → Leaflet map
queries all issues and drops a pin per report → clicking a pin
fetches full details from your API.
MVP priority: Auth + report issue (with photo + location) +
issue map + status lifecycle first. AI classification and duplicate
detection are great "wow" additions once the core loop works.

Problem Statement 4 — EventOps

(Hackathon Management Platform)
Your booklet only lists this one's title ("Hackathon Management
Platform") — the detailed feature list wasn't in the document.
Based on the name, this is almost certainly about organizers
managing a hackathon: participant registration, team
formation, submissions, and judging. Reasonable stack if you
pick this one:
 Need Tool Why
Registration, team formation, Firebase Auth + Same
login Firestore/MongoDB pattern as
above
A form that saves to Consistent
Project submission (links, your DB; files via with
files, descriptions) Cloudinary/Firebase PS1/PS3
Storage
A protected route
for judges that Simple
writes scores to a aggregation
Judging / scoring dashboard submissions
logic, no
collection, then a special tool
backend route that
averages scores
[Link] (like PS2) Polling is far
if you want it to less work if
Live update instantly, or real-time
announcements/leaderboard just polling every isn't
few seconds if time essential
is short
Since you don't have the real requirements, double-check the
actual problem statement doc/portal before committing to
this one — my read of the title could miss required features.

48-Hour Survival Tips

Pick your stack once, don't switch mid-hackathon.
Firebase + React + Node covers all four problems above.
Build the "unglamorous" MVP first (auth → core CRUD
→ one main feature working end-to-end) before touching
AI/real-time polish — a working simple app beats a broken
ambitious one.
Use free tiers everywhere: Firebase, MongoDB Atlas,
Vercel, Render, Cloudinary, Gemini API all have free tiers
sufficient for a hackathon demo.
Deploy early, not at hour 47 — deploy a "hello world"
version on day 1 so you know the pipeline works, then keep
pushing updates.