DEV Community

Cover image for I Built a Delhi Metro Route Planner In React with GSAP
Pratik sharma
Pratik sharma Subscriber

Posted on

I Built a Delhi Metro Route Planner In React with GSAP

#fullstack #developer #webdev #ai

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

The route page slug comes from the station names:

Rajiv Chowk -> rajiv-chowk
Kashmere Gate -> kashmere-gate
Enter fullscreen mode Exit fullscreen mode

So this:

RCK -> KG
Enter fullscreen mode Exit fullscreen mode

becomes:

/routes/rajiv-chowk-to-kashmere-gate/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)