Building a Modern Railway Tracking App with AI | Vibe Coding Ep. 2

🚆 𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗥𝗮𝗶𝗹𝗚𝗮𝗮𝗱𝗶, 𝗮 𝗠𝗼𝗱𝗲𝗿𝗻 𝗜𝗻𝗱𝗶𝗮𝗻 𝗥𝗮𝗶𝗹𝘄𝗮𝘆 𝗧𝗿𝗮𝗰𝗸𝗶𝗻𝗴 𝗣𝗹𝗮𝘁𝗳𝗼𝗿𝗺 𝘄𝗶𝘁𝗵 𝗔𝗜 | 𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗘𝗽𝗶𝘀𝗼𝗱𝗲 #𝟮 Welcome to 𝗘𝗽𝗶𝘀𝗼𝗱𝗲 𝟮 of my 𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗦𝗲𝗿𝗶𝗲𝘀! 🚀 In this series, I'm building 𝗿𝗲𝗮𝗹-𝘄𝗼𝗿𝗹𝗱, 𝗽𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻-𝗴𝗿𝗮𝗱𝗲 software using AI-assisted development while following the same workflow used by modern startups and engineering teams. Today's project is 𝗥𝗮𝗶𝗹𝗚𝗮𝗮𝗱𝗶, a modern Indian Railway tracking platform inspired by products like Apple Maps, Linear, Stripe, and other beautifully crafted SaaS applications. This isn't just another UI clone or tutorial project. The goal was to build a software product the right way, starting with product research, a 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 𝗥𝗲𝗾𝘂𝗶𝗿𝗲𝗺𝗲𝗻𝘁𝘀 𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁 (𝗣𝗥𝗗), UI/UX planning, system architecture, API integrations, reusable component planning, and finally implementing everything using modern web technologies and AI-assisted development. 📂 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 📄 Complete Product Requirements Document (PRD) https://docs.google.com/document/d/1X... 💻 GitHub Repository https://github.com/udaysharmadev/Rail... ⏱️ 𝗧𝗶𝗺𝗲𝘀𝘁𝗮𝗺𝗽𝘀 00:00 - Building Railgadi with Vibe Coding 01:00 - Finding the Railway Tracking API 01:10 - Railgadi PRD & Core Features 02:20 - Adding Analytics, Terrain & Weather 03:00 - Creating `design.md` for Better UI 04:15 - Using ChatGPT to Build the PRD 06:40 - ChatGPT Generates the MVP PRD 07:30 - Setting Up Railgadi in Antigravity 08:20 - Claude vs Gemini in Antigravity 09:00 - Setting Up Google Stitch MCP 11:45 - Creating the 2-Phase Implementation Plan 12:40 - Rail Radar, MapTiler & Other APIs 15:20 - Claude Builds the Phase 1 Plan 17:40 - Gemini Starts Building the App 18:30 - Whiteboard: How the System Works 20:30 - Phase 1 Code Generation Complete 23:15 - Exploring the Generated Codebase 24:15 - Running Railgadi for the First Time 25:00 - Adding API Keys with `.env.local` 28:15 - First Live Train Tracking Test 29:20 - Verifying Live Train Data with ChatGPT 32:00 - The AI Was Using Fake Mock Data 😳 32:30 - Fixing the Hardcoded Data Problem 36:20 - Connecting the Real Rail Radar API 39:55 - Real-Time Train Data Finally Works 43:40 - Starting Phase 2 45:00 - My First Hackathon & The Truth About Vibe Coding 48:00 - Adding PWA & Mobile Navigation 50:20 - Train Not Found: API Error 51:25 - We Hit the Rail Radar API Limit 💀 55:00 - Debugging the Connection Timeout 56:55 - Claude Hits Its Message Limit 58:00 - Live Tracking, Weather & Terrain Working 01:00:10 - Fixing the Train Marker Bug 01:02:10 - Testing the Final Live Map 01:06:00 - Open-Sourcing Railgadi on GitHub 01:06:40 - Protecting API Keys with `.gitignore` 01:09:00 - Pushing Railgadi to GitHub 01:10:15 - Final Demo & What's Next? 🛠 𝗧𝗲𝗰𝗵 𝗦𝘁𝗮𝗰𝗸 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 • Next.js 15 • React 19 • TypeScript • Tailwind CSS • shadcn/ui • Motion (Framer Motion) 𝗦𝘁𝗮𝘁𝗲 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁 • TanStack Query • Zustand 𝗠𝗮𝗽𝘀 & 𝗚𝗲𝗼𝘀𝗽𝗮𝘁𝗶𝗮𝗹 • MapLibre GL JS • MapTiler • Turf.js 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 • Next.js Route Handlers • Node.js 🌐 𝗔𝗣𝗜𝘀 & 𝗗𝗮𝘁𝗮 𝗦𝗼𝘂𝗿𝗰𝗲𝘀 🚆 RailRadar API https://railradar.in/docs 🗺️ MapTiler https://www.maptiler.com/ 🗺️ MapLibre GL JS https://maplibre.org/ 🌤️ OpenWeather API https://openweathermap.org/api 🏔️ OpenTopography API https://opentopography.org/ 🛰️ Overpass API https://overpass-api.de/ 🗺️ OpenStreetMap https://www.openstreetmap.org/ 📦 𝗢𝗽𝗲𝗻 𝗦𝗼𝘂𝗿𝗰𝗲 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀 & 𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻 ▲ Next.js https://nextjs.org/ ⚛️ React https://react.dev/ 📘 TypeScript https://www.typescriptlang.org/ 🎨 Tailwind CSS https://tailwindcss.com/ 🧩 shadcn/ui https://ui.shadcn.com/ ✨ Motion https://motion.dev/ 🗺️ MapLibre GL JS https://maplibre.org/ 🌍 Turf.js https://turfjs.org/ ⚡ TanStack Query https://tanstack.com/query/latest 🐻 Zustand https://zustand.docs.pmnd.rs/ 🎯 Lucide React https://lucide.dev/ 📅 date-fns https://date-fns.org/ 🎨 clsx https://github.com/lukeed/clsx 🎨 tailwind-merge https://github.com/dcastil/tailwind-m... 📚 𝗪𝗵𝗮𝘁 𝗬𝗼𝘂'𝗹𝗹 𝗟𝗲𝗮𝗿𝗻 ✅ Converting ideas into real software products ✅ Writing production-ready PRDs ✅ Product Engineering Workflow ✅ Modern Next.js Architecture ✅ Interactive Maps ✅ Working with Multiple APIs ✅ AI-assisted Software Development ✅ Building Portfolio-worthy Projects 🎬 𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗦𝗲𝗿𝗶𝗲𝘀 ✅ Episode 1 → Introduction to Vibe Coding 🚆 Episode 2 → Building RailGaadi More production-grade AI projects are coming soon. 🌐 𝗖𝗼𝗻𝗻𝗲𝗰𝘁 𝗪𝗶𝘁𝗵 𝗠𝗲 📸 Instagram   / udaysharmaaaaa   💻 GitHub https://github.com/udaysharmadev 💬 HackShastra Discord Community   / discord   Join our community to discuss AI, Vibe Coding, Full Stack Development, Open Source, Hackathons, and Software Engineering. ❤️ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁 𝘁𝗵𝗲 𝗖𝗵𝗮𝗻𝗻𝗲𝗹 👍 Like the video 💬 Comment your favorite part of the build ⭐ Star the GitHub repository 📢 Share it with your developer friends 🔔 Subscribe for more AI, Full Stack, Product Engineering & Vibe Coding content. Thank you for watching! 🚀