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: [email protected]

I am open to freelance work, collaborations, product ideas, web development projects, and technical consulting.