I Built a Delhi Metro Route Planner In React with GSAP

I recently built a free Delhi Metro route planner:

https://metro.coolhead.in/

The first version worked well as an interactive React app. You could pick a source station, pick a destination station, and see the route, estimated fare, stop count, travel time, interchanges, and line-color guidance on the metro map.

But there was a problem.

Most people do not search for "Delhi Metro route planner app". They search for very specific routes:

• Rajiv Chowk to Kashmere Gate metro route
• New Delhi to Airport T3 metro fare
• Hauz Khas to Botanical Garden metro travel time
• Dwarka Sector 21 to Rithala metro route

That meant a single-page app homepage was leaving a lot of useful search demand uncovered.

So I added programmatic SEO pages for every station-to-station combination.

What I Wanted

I wanted both of these URLs to show the same useful route:

https://metro.coolhead.in/routes/rajiv-chowk-to-kashmere-gate/
https://metro.coolhead.in/?from=RCK&to=KG

The first URL is clean and search-friendly.

The second URL is simple for app state and sharing.

Both should hydrate into the same React planner state with:

• from auto-filled
• to auto-filled
• route searched automatically
• fare/time/stops/interchanges visible

The Data Model

The app already had two useful datasets:

• labels.json: station IDs and names
• edge.json: graph edges between stations, with line colors and SVG paths

Each station has a compact ID:

{
  "id": "RCK",
  "text": "Rajiv Chowk"
}

The route page slug comes from the station names:

Rajiv Chowk -> rajiv-chowk
Kashmere Gate -> kashmere-gate

So this:

RCK -> KG

becomes:

/routes/rajiv-chowk-to-kashmere-gate/

Generating Every Route

There are 241 stations in the app data.

For every ordered source/destination pair, excluding same-station routes, the generator creates a static page:

241 * 240 = 57,840 route pages

Each generated route page includes:

• a route-specific <title>
• meta description
• Open Graph metadata
• Twitter metadata
• canonical URL
• JSON-LD
• prerendered route text in the HTML
• a hydration payload for the React app

Connect With Me

If you liked this project, want to collaborate, or need help building a web app, product prototype, internal tool, dashboard, interactive map, or AI-enabled application, feel free to connect with me.

I enjoy working on products that combine clean interfaces, practical user experience, and thoughtful engineering.

You can reach me here:

Website: https://metro.coolhead.in/
Hindi version: https://metro.coolhead.in/?lang=hi
LinkedIn: https://linkedin.com/in/biomathcode
GitHub: https://github.com/biomathcode
Email: sharma.pratik2016@gmail.com
I am open to freelance work, collaborations, product ideas, web development projects, and technical consulting.