The latest articles on Forem by Anjali Gupta (@anjali_gupta_16a3a4ce6863). https://forem.com/anjali_gupta_16a3a4ce6863 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3870839%2F74454355-d99d-4bef-a24c-d46bc7863d2c.png https://forem.com/anjali_gupta_16a3a4ce6863 en Anjali Gupta Fri, 10 Apr 2026 03:36:38 +0000 https://forem.com/anjali_gupta_16a3a4ce6863/i-built-a-real-time-ship-tracking-app-with-a-clean-ui-heres-what-i-learned-3co5 https://forem.com/anjali_gupta_16a3a4ce6863/i-built-a-real-time-ship-tracking-app-with-a-clean-ui-heres-what-i-learned-3co5 <p>Over the past week, I built a small project:<br> 👉 <a href="https://ships.aihare.in/" rel="noopener noreferrer">https://ships.aihare.in/</a></p> <p>It’s a simple, real-time ship-tracking tool with a focus on clean UI and speed.</p> <h2> <strong>Why I built this</strong> </h2> <p>While exploring existing marine traffic tools, I noticed a common pattern:</p> <ul> <li>cluttered interfaces </li> <li>slow performance </li> <li>too many controls for simple use cases </li> </ul> <p>I wanted to see if I could build something simpler — a tool where you can just open the map and start tracking ships instantly.</p> <h2> <strong>What the app does</strong> </h2> <ul> <li>Track ships live on a global map </li> <li>Monitor vessel movement in real time </li> <li>Explore marine traffic visually </li> </ul> <p>The goal was not to build a feature-heavy platform, but something fast and intuitive.</p> <h2> <strong>What I focused on</strong> </h2> <p><strong>1. Minimal UI</strong><br> I intentionally avoided overloading the interface.</p> <ul> <li>Map-first design </li> <li>Lightweight side panels </li> <li>Only essential controls </li> </ul> <p><strong>2. Performance</strong><br> Real-time tracking needs to feel instant.</p> <ul> <li>Reduced unnecessary re-renders </li> <li>Optimized data loading </li> <li>Kept the UI responsive even with live updates </li> </ul> <p><strong>3. User flow</strong><br> The experience should feel obvious:</p> <ul> <li>Open → see ships → interact </li> </ul> <p>No onboarding, no friction.</p> <h2> Challenges I faced </h2> <p><strong>Balancing UI simplicity vs functionality</strong><br> It’s easy to add features, but harder to keep things clean.</p> <p><strong>Handling real-time data</strong><br> Ensuring updates don’t slow down the interface required careful structuring.</p> <p><strong>Layout decisions</strong><br> Keeping the map dominant while still fitting filters, stats, and info panels took a few iterations.</p> <h2> What I’d improve next </h2> <ul> <li>Better search (by ship name, route, etc.)</li> <li>Alerts/notifications for specific vessels </li> <li>More insights around shipping patterns </li> <li>Mobile optimization improvements </li> </ul> <h2> Would love your feedback </h2> <p>If you have a minute, check it out:<br> 👉 <a href="https://ships.aihare.in/" rel="noopener noreferrer">https://ships.aihare.in/</a></p> <p>I’d really appreciate feedback on:</p> <ul> <li>UI/UX (is it actually simpler?) </li> <li>performance </li> <li>anything confusing or missing </li> </ul> <p>Building small projects like this has been a great way to experiment and learn quickly.</p> <p>Curious — has anyone here worked on real-time map-based apps? Would love to hear your experience.</p> webdev javascript react frontend