I Built a Delhi Metro Route Planner In React with GSAP
I Built a Delhi Metro Route Planner In React with GSAP
我用 React 和 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. 最近，我构建了一个免费的德里地铁路线规划器：https://metro.coolhead.in/。第一个版本作为一个交互式 React 应用运行良好。用户可以选择起点站和终点站，并在地铁地图上查看路线、预估票价、停靠站数量、旅行时间、换乘信息以及线路颜色指引。
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. 但这里存在一个问题。大多数人并不会搜索“德里地铁路线规划应用”，他们搜索的是非常具体的路线：例如“Rajiv Chowk 到 Kashmere Gate 的地铁路线”、“新德里到机场 T3 的地铁票价”、“Hauz Khas 到植物园的地铁旅行时间”或“Dwarka Sector 21 到 Rithala 的地铁路线”。这意味着单页应用的主页遗漏了大量有价值的搜索需求。因此，我为每一对站点组合添加了程序化 SEO 页面。
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 我希望这两个 URL 都能展示同一条有用的路线： 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. 第一个 URL 简洁且对搜索引擎友好；第二个 URL 则便于应用状态管理和分享。两者都应水合（hydrate）为相同的 React 规划器状态，并实现：起点自动填充、终点自动填充、自动搜索路线，以及显示票价、时间、停靠站和换乘信息。
The Data Model
数据模型
The app already had two useful datasets: labels.json (station IDs and names) and 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/.
该应用已有两个有用的数据集：labels.json（站点 ID 和名称）以及 edge.json（站点间的图边，包含线路颜色和 SVG 路径）。每个站点都有一个紧凑的 ID：{ "id": "RCK", "text": "Rajiv Chowk" }。路线页面的 URL 别名（slug）源自站点名称：Rajiv Chowk -> rajiv-chowk，Kashmere Gate -> kashmere-gate。因此，RCK -> KG 就变成了：/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, and a hydration payload for the React app.
应用数据中共有 241 个站点。对于每一对有序的起点/终点组合（排除同站路线），生成器都会创建一个静态页面：241 * 240 = 57,840 个路线页面。每个生成的路线页面都包含：特定于路线的 <title>、元描述、Open Graph 元数据、Twitter 元数据、规范 URL、JSON-LD、HTML 中预渲染的路线文本，以及用于 React 应用的水合负载（hydration payload）。
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. 如果你喜欢这个项目，想要合作，或者在构建 Web 应用、产品原型、内部工具、仪表盘、交互式地图或 AI 应用方面需要帮助，欢迎随时与我联系。我乐于从事那些结合了简洁界面、实用用户体验和深思熟虑的工程设计的产品。
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. 你可以通过以下方式联系我： 网站：https://metro.coolhead.in/ 印地语版本：https://metro.coolhead.in/?lang=hi LinkedIn：https://linkedin.com/in/biomathcode GitHub：https://github.com/biomathcode 邮箱：sharma.pratik2016@gmail.com 我欢迎自由职业工作、合作、产品创意、Web 开发项目以及技术咨询。