Full-Stack Hackathon Roadmap —

Zero to Hackathon-Ready
For: complete beginners (assumes you’ve never written a line of code
for the web) Stack: [Link] (React) + Prisma/PostgreSQL + Supabase
(auth/storage) + Vercel (deploy) Pace: 1-2 hrs/day, ~19 weeks (~4.5
months)

Before Week 1: Tools you need (do this

first, takes ~1 day)
You can’t skip this — every week below assumes these are installed
and you know the basics.

1. A code editor — install VS Code (free, from

[Link]). This is the app you’ll write all your code in.
Not Word, not Notepad — code editors highlight syntax, catch
errors, and have extensions that help you code faster.

2. A terminal — this is a text-based way to talk to your computer

instead of clicking icons. On Mac, open the “Terminal” app (search
with Cmd+Space). You just need 4 commands to start:

pwd — shows what folder you’re currently “in”

ls — lists files/folders in the current folder
cd folder-name — moves you INTO a folder (cd .. moves you
back OUT)
mkdir folder-name — creates a new folder

3. Git & GitHub — Git is a tool that tracks changes to your code
over time (like “track changes” in Word, but for code). GitHub is a
website where you store your code online so others (like your
teammates) can see and download it.

Install Git (usually already on Mac — check by typing git --

version in terminal)
Make a free account at [Link]
The 5 commands you’ll use constantly:
git init — turns a folder into a Git project
git add . — stages all your changed files (marks them
“ready to save”)
git commit -m "message" — saves a snapshot of your code
with a note describing what changed
git push — uploads your saved snapshots to GitHub
git clone <url> — downloads someone else’s GitHub project
onto your computer

4. [Link] — install from [Link] (LTS version). This lets you run
JavaScript OUTSIDE the browser, which you need to run
React/[Link] projects on your computer. It comes with npm (Node
Package Manager) — a tool for downloading other people’s pre-
written code (“packages”) so you don’t build everything from
scratch.

5. Browser DevTools — in any browser, right-click a webpage →

“Inspect.” This opens a panel showing the page’s HTML/CSS and
lets you see errors in your JavaScript. You’ll live in this panel while
debugging.

Glossary for terms above: “Package” = a chunk of reusable code

someone else wrote (e.g., a calendar widget) that you install instead of
writing yourself. “Repo” (repository) = a project folder tracked by
Git/stored on GitHub.

Month 1 — Web Foundations (Weeks 1-7)

Goal: Go from zero to comfortable building real UI in React/[Link].

Week 1: HTML (the skeleton of every webpage)

HTML = HyperText Markup Language. It’s not “coding” in the
programming sense — it’s a way of labeling content so the browser
knows what’s a heading, what’s a paragraph, what’s a button, etc.
Every tag is a label wrapped in < >.

Day 1-2: Learn the core tags: <h1>-<h6> (headings, biggest to

smallest), <p> (paragraph), <a> (a clickable link), <img> (an image),
<div> (a generic box/container — used constantly to group things).
Make a single HTML file and try each tag.
Day 3-4: Lists (<ul>/<li> for bullet lists), tables (<table>/<tr>/<td>),
forms (<form>, <input>, <button> — how you collect text/clicks from
a user).
Day 5: Semantic tags — <nav>, <header>, <footer>, <section> (these
mean the same as <div> visually, but tell the browser/search
engines/screen readers what role that section plays — good
practice, not optional).
Day 6-7: Build a plain static personal profile page (name, photo,
bio, a contact form) using only HTML — no styling yet. It’ll look
ugly. That’s expected — Week 2 fixes that.

Week 2: CSS (making it look like a real page, not a

Word doc)

CSS = Cascading Style Sheets. It’s how you tell the browser HOW
your HTML should look (colors, spacing, layout) instead of just what it
is.

Day 1: How CSS attaches to HTML (a <style> tag, or better, a

separate .css file linked via <link>). Selectors — how you target a
specific tag/class to style it.
Day 2-3: The “box model” — every HTML element is a rectangular
box with content, padding (space inside the box), border, and margin
(space outside the box). This is the single most important CSS
concept — nearly all layout bugs trace back to misunderstanding
this.
Day 4-5: Flexbox — the modern way to arrange boxes in a row or
column (e.g., putting 3 cards side by side, centering something).
This is used constantly in real projects — don’t skip it.
Day 6-7: Colors, fonts, and media queries (CSS rules that only
apply on small screens — this is how a page becomes
“responsive”/mobile-friendly). Go back and style your Week 1
profile page fully.

Week 3: JavaScript fundamentals (making the page

DO things)
JavaScript (JS) is a real programming language — this is where things
stop being just “labeling” and start being “logic”: if/then decisions,
loops, calculations.

Day 1-2: Variables (let, const — boxes that store a value), data
types (strings/text, numbers, booleans/true-false), basic math and
string operations.
Day 3: if/else (making decisions in code) and loops (for, while —
repeating an action).
Day 4: Functions (a reusable block of code you can call by name)
 and arrays (an ordered list of values) and objects (a way to group
related data under named labels, like {name: "Yeswanth", age: 19}).
Day 5-6: The DOM (Document Object Model) — this is how JS
“sees” and changes your HTML page. [Link]()
finds an element; .addEventListener() runs code when a user
clicks/types.
Day 7: Build a to-do list using plain HTML+CSS+JS (no
framework) — type a task, click “add,” it appears on the page,
click it to delete it. This is the single best beginner project because
it touches everything you just learned.

Week 4: JS for React (the bridge — don’t skip, feels

like “more JS” but it’s essential)

Destructuring (const {name} = person — a shortcut for pulling

values out of objects/arrays)
Arrow functions ((x) => x + 1 — a shorter way to write functions)
Spread/rest (...) — copying/combining arrays and objects
async/await and Promises — JS’s way of handling things that take
time (like fetching data from the internet) without freezing the
page
fetch() — how JS requests data from a server (this is your first
taste of “frontend talks to backend”)

Week 5: React fundamentals

React is a JS library for building UIs out of reusable pieces called

components. Instead of one giant HTML file, you build small pieces
(a button, a card, a navbar) and combine them.

Components — a JS function that returns HTML-like code (called

JSX)
Props — data passed INTO a component from its parent (like
arguments into a function)
State (useState) — data that belongs to a component and can
change over time, causing the page to re-render automatically
when it changes
Conditional rendering (show X if logged in, Y if not) and rendering
lists (turning an array into a list of components)
Build: a counter app, a to-do list (now in React instead of plain JS),
a simple quiz app

Week 6: [Link] basics

[Link] is a “framework” built on top of React — it adds routing,

server-side features, and a lot of built-in structure so you’re not
configuring everything by hand.

File-based routing — the folder/file structure of your project

automatically becomes your site’s URLs
Layouts — shared UI (like a navbar) that wraps multiple pages
Client vs. server components — some code runs in the browser,
some runs on the server before the page even loads ([Link] lets
you choose per-component)
useEffect — running code automatically when a component loads
or when specific data changes
Rebuild your VIT-AP timetable app (you already built a version of
this) as a [Link] app

Week 7: Styling fast

Tailwind CSS — instead of writing custom CSS files, you style

elements using pre-made utility classes directly in your HTML
(e.g., class="p-4 bg-blue-500"). Much faster for hackathon speed.
shadcn/ui — a library of pre-built, good-looking components
(buttons, forms, modals) you copy into your project and customize,
 instead of building from scratch.
Build: a landing page + a dashboard-style page using a template,
customized to your own project idea.

Checkpoint project: A polished multi-page [Link] frontend (no

backend yet) — e.g., a “campus event finder” UI with mock/fake data.

Month 2 — Backend + Database (Weeks 8-

11)
Goal: Own the full request lifecycle: frontend → API → database →
back.

Week 8: API routes — code that runs on a server (not the user’s
browser) and responds to requests. An API (Application
Programming Interface) is just an agreed-upon way for two pieces
of software to talk — e.g., your frontend asks “give me the list of
events,” your API route replies with that data. Build REST-style
endpoints (specific URLs like /api/events that do
GET/POST/PUT/DELETE — the 4 basic actions: read, create,
update, delete).
Week 9: PostgreSQL (a database — permanent storage for your
app’s data, structured in tables like Excel sheets) + Prisma (an
ORM — a tool that lets you talk to the database using JS instead of
writing raw SQL by hand). Learn: schema (defining what your
tables/columns look like), migrations (applying schema changes to
the real database), and CRUD queries
(Create/Read/Update/Delete).
Week 10: Auth (authentication — verifying who a user is, i.e.,
login/signup) using Supabase Auth (email/password + Google sign-
in). This is the single highest-leverage thing to have solid — almost
every hackathon project needs login.
Week 11: File uploads (Supabase Storage — for things like profile
pictures), environment variables (secret values like API keys,
stored outside your code so they’re not exposed on GitHub), and
basic input validation (checking that user input is valid before
saving it, using a library called zod).

Checkpoint project: Turn your Month 1 frontend into a real app —

e.g., the event finder now has real signup/login, users can create
events, data persists in Postgres.

Month 3 — Integration, Deployment, and

One “Advanced” Layer (Weeks 12-15)
Goal: Ship something end-to-end and add one thing that makes judges
sit up.

Week 12: Deployment — putting your app on the actual internet

instead of just running on your laptop. Use Vercel (free, built for
[Link]) for the app, and Supabase stays your database host. Learn
how environment variables work differently in production vs. on
your own computer.
Week 13: State management at scale — for bigger apps, passing
data between many components gets messy (“prop drilling”).
Learn React Context or a lightweight tool called Zustand to share
data cleanly. Also: proper loading states (skeleton screens) and
error messages instead of a blank/broken page.
Week 14: Pick ONE advanced layer (don’t try all three):
AI integration: call an LLM API (like Anthropic’s or OpenAI’s)
to add a smart feature — summarizing text, a chatbot,
recommendations.
Real-time: WebSockets or Supabase Realtime — features that
 update live for all users without refreshing (chat, live
scoreboards).
Third-party APIs: maps, payments (test mode), calendars —
shows you can integrate outside services.
Week 15: Polish — responsive design (check it works on phone
screens), basic accessibility, a clear README (a text file explaining
what your project does and how to run it — the first thing anyone
looks at on GitHub), and cleaning up unused code.

Checkpoint project: A fully deployed, end-to-end app with your one

advanced feature.

Month 4 — Hackathon Simulation (Weeks

16-19)
Goal: Practice building under time pressure, not learning new tech.

Week 16: Pick a fresh idea (ideally with your teammates) and give
yourself a strict 48-hour build window over a weekend —
simulate a real hackathon using only what you’ve already learned.
Week 17: Retro — what took too long? Build a personal “starter
template” repo (auth + database + Tailwind already wired up) so
future hackathons start from hour 0, not hour 8.
Week 18: Second 48-hour simulation using the starter template.
This time also prepare the pitch — a tight 2-3 minute demo script
+ a few slides + a working live (deployed) demo, not just your
laptop screen.
Week 19: Buffer week — fix bugs, rehearse the pitch out loud,
review typical hackathon judging criteria (problem clarity,
technical execution, demo quality, originality).

Standing habits throughout

Push every project to GitHub from day one — a visible commit
history and clean READMEs matter for team formation and
judging.
Keep a running notes doc of code snippets you reuse often (auth
setup, API patterns) — this becomes your Week 17 starter template
for free.
Don’t rush past two key transition points: static HTML/CSS → JS
(end of Week 3), and JS → React (end of Week 4/5). If either feels
shaky, spend extra days there before moving on — everything after
depends on these.

Glossary (quick lookup for terms used

above)
Term Meaning
The part of the app users see
Frontend
and click in their browser
The part of the app running on a
Backend
server, handling data/logic
A defined way (URL) for the
API / endpoint frontend to request/send data to
the backend
Permanent storage for your
Database app’s data (tables of
rows/columns)
A tool that lets you use your
ORM programming language instead
 of raw database queries
Login/signup — verifying who a
Auth
user is
Putting your app on the live
Deploy internet instead of just your own
computer
A project folder tracked by Git
Repo
and stored on GitHub
A secret setting (like an API key)
Env variable
kept outside your code
A reusable, self-contained piece
Component
of UI in React
Data belonging to a component
State that can change and updates the
page when it does
Data passed into a component
Props
from its parent

Quick reference: what to learn where

Topic Best free resource
HTML/CSS MDN Web Docs, freeCodeCamp
JavaScript [Link]
React [Link] (official docs + tutorial)
[Link] [Link]/learn
Tailwind Tailwind docs + shadcn/ui examples
Prisma + Postgres [Link]/docs
Supabase Auth/Storage [Link]/docs
LLM API integration Anthropic/OpenAI API quickstart docs
Git & GitHub [Link]/book, [Link]