All posts

Building the GARI Website: From Zero to gari.live

·3 min read·543 words
ReactNext.jsGARIAerospaceWeb Dev

I'm Bharat Chandra — Ground Station & Software Lead at GARI (GITAM Aerospace Rocketry Initiative). This is the story of building [gari.live](https://gari.live), the website for GITAM's nationally-selected aerospace team competing in IN-SPACe CAN-7USAT 2026.

Why GARI needed a real website

GARI had cleared PDR for both the CanSat and Rocket programs — a serious technical milestone. But the website didn't reflect that. We needed something that communicated the team's technical depth, mission status, and sponsor value proposition without looking like a typical student club page.

The brief: build something that looks like a real aerospace team's website, not a university project.

The tech stack

  • Next.js 14 with App Router — server-rendered pages, clean URLs, full SEO control
  • Tailwind CSS — fast iteration without fighting a design system
  • Framer Motion — smooth section reveals and timeline animations
  • Canvas API — custom starfield background on the homepage, written from scratch
  • Vercel — zero-config deployment, edge CDN

No template. No theme. Everything from scratch.

The canvas starfield

The homepage has a live starfield animation — 200 particles drifting across the screen at different depths and speeds to give the illusion of moving through space.

The key was making it feel subtle, not distracting. The stars are small (0.5–2px), slow-moving, and slightly transparent so they don't fight with the content.

The canvas resizes correctly on window resize and cleans up on component unmount — the kind of thing that breaks on template sites but needs to be right on a production site.

Mission timeline component

The mission status section — PDR Cleared → CDR In Progress → Build & Integration → Launch — is one of the most important parts of the site for sponsors and judges.

I built it as a four-phase vertical timeline with status indicators (CLEARED / IN PROGRESS / UPCOMING) so anyone can see at a glance where the team is in the competition cycle. Each phase links to the relevant mission detail page.

SEO — treating it like a client site

This was the first time I applied the same SEO discipline I'd used on my own portfolio to someone else's team.

    Key decisions:

  • Organization schema with parentOrganization pointing to GITAM University and member pointing to the team
  • Proper page hierarchy — /, /about, /mission, /cansat, /team, /achievements, /sponsors, /contact — each with unique metadata
  • Open Graph images for every page — team photo, rocket image, mission diagrams
  • Canonical URLs and hreflang tags
  • robots.txt that allows all crawlers but blocks training scrapers

The result: Google indexed the site within 48 hours and it started appearing for "GARI GITAM aerospace" and "IN-SPACe CAN-7USAT GITAM" queries.

The team page

30+ members across Aerospace, ECE, CSE, and Mechanical. Each member has a photo, role, department, year — and a LinkedIn link where available.

My card on the team page links back to [bharatchandra.me](https://bharatchandra.me), which closes the loop for Google's entity graph: GARI links to me, I link to GARI, and the schema on both sites confirms the same person.

What's next

The static site is live. The dynamic layer — live mission telemetry dashboard, competition result tracking, sponsor portal — is next. Same stack, same principles.

— Bharat Chandra, Ground Station & Software Lead, GARI

View source on GitHub
Bodapati Bharat Chandra — AI/ML Engineer, GITAM University Hyderabad

AI/ML Engineering Intern @ BHEL · Backend & ML Lead @ GARI · Co-founder, Easify

Final-year CSE student at GITAM University Hyderabad. I write from what I actually build — telemetry systems, LLM pipelines, and startup backends.

Back to all posts