#mobile apps
#ui
Fleet Companion
🔍 Click to expand
Year
2021
Duration
2 weeks
Role
Frontend Development
Building the Fleet Companion UI with React Native
We’ve all seen those clunky, gray and blue enterprise apps that look like they were designed in 2005. They’re functional, sure, but they’re a nightmare to navigate. When I set out to build the Fleet Companion mobile app, my goal was simple: take a complex logistics problem and wrap it in a UI that actually feels good to use.
The Problem: Information Overload
Fleet management is chaotic. Drivers need to know three things instantly:
Where am I going?
What am I carrying?
When does it need to be there?
Most existing solutions cram this into tiny tables. Fleet Companion was designed to solve this by using a "Card-First" architecture, giving drivers high glanceability and reducing cognitive load while they’re on the move.
The Tech Stack:
Since this project focused on delivering a high-fidelity UI, the choice of tools was critical.
React Native: The obvious choice for cross-platform performance while maintaining a native look and feel.
NativeWind: Used to keep styles organized and ensure that "Pixel Perfect" wasn't just a buzzword.
Figma: Our "Source of Truth" for every margin, padding, and hex code.
Case Study:
The real challenge wasn't just making it look like the design it was making it feel like the design.
The Translation Process
I treated the Figma file as a blueprint. Every component, from the Delivery Progress Bar to the Vehicle Status Badge, was built as a reusable atomic unit. This meant that when I needed to change a primary brand color, I did it in one place, and the entire app followed suit.Tackling the Map Overlay
One of the trickiest parts of the UI was the "Bottom Sheet" interaction. In logistics apps, you often need to see the map and the delivery details simultaneously. I implemented a gesture-sensitive bottom sheet that allows drivers to swipe up for a full manifest or swipe down to see their route.Responsive vs. Adaptive
A "pixel-perfect" UI on an iPhone 15 Pro can look like a disaster on a budget Android device. I used a combination of percentage based layouts and PixelRatio adjustments to ensure the fleet cards felt consistent, regardless of the hardware.
The "Oh No" Moment
Halfway through the build, I realized the custom fonts from Figma weren’t rendering correctly on Android, they were getting clipped at the bottom of the buttons. It’s the kind of tiny detail that drives a developer crazy. After two hours of tweaking lineHeight and includeFontPadding: false, I finally got that perfect vertical alignment. It was a small win, but it’s the difference between a "good" app and a "polished" one.
Final Thoughts:
What’s Next? Right now, Fleet Companion is a beautiful shell a high-fidelity UI ready for a backend. The next step is hooking this up to a real-time WebSocket or Firebase stream to move those truck icons across the map in real-time. Building this taught me that "UI only" doesn't mean "easy." Translating a designer's vision into a living, breathing application requires a obsessive attention to detail and a lot of patience with Flexbox. Key Takeaway: Don't just build the design. Build the intent behind the design. Every margin exists for a reason usually to make the user's life a little easier.
More Related Case Studies
Explore additional engineering and architectural projects.
2 MIN READ
iot
web apps
mobile apps
react
+3
Introduction
Yantra Kheti, hydroponics system. Automate and get the best harvests for the crops you plant. Yantra Kheti is a robust system that can help you harvest the healthiest and best crops from your farm. Automate laborious tasks of water pumping, and nutrient supply, and watch your healthy plants grow. Quickly check on room temperature and humidity for the best crop yield with an easy-to-use web interface application or the Yantra Kheti mobile app.
The Concept
Yantra Kheti strives to tackle the daily hassles of checking up on the farm without having to visit the farm. The system admin is able is easily view different features of the farm such as temperature, humidity, and pH levels of the water supply. Automating every task of farming from watering the plants to providing the right nutrients. Yantra Kheti also allows users to train an AI for a year to yield better crops on every harvest. The AI integrated into Yantra Kheti trains to harvest healthier crops. See better results every harvest with Yantra Kheti.
Web App
The system provides a web interface for the user to interact and visualize their data. The system is built on a Django backend and React frontend framework. SQL databases can be easily integrated into the system, our team recommends using Postgresql.
Mobile App
The system also provides users with an easy-to-use mobile app. The mobile app has similar features to the web app. Quickly view your stats from the farms from temperatures to humidity and pH levels. Control water flow, lights, and sensors for a suitable environment for the plants to grow.
Conclusion
Yantra Kheti provides a complete solution for an automated hydroponics farm. Control and visualize your farm stats. Automate your farm today with Yantra Kheti.
2 MIN READ
web apps
ui
frontend
🌱 Recyclr A Modern Frontend Application for Promoting Sustainability
Recyclr is a modern, responsive landing page designed to raise awareness about recycling and sustainable living. The application focuses on delivering a clean, engaging, and informative user experience through thoughtful UI design, smooth animations, and clear messaging. Built as a frontend focused project, Recyclr demonstrates how performance, accessibility, and maintainability can coexist in a visually appealing web application. The goal of the project was not only to communicate an environmental message effectively, but also to showcase best practices in modern frontend development, including component-driven architecture, testing, and documentation.
🛠️ Tech Stack
Recyclr is built using a carefully selected modern tech stack that prioritizes speed, scalability, and developer experience.
Vite
React
Tailwind CSS
Storybook
Unit Tests & Coverage
Key Features
Component-Driven Architecture
All UI elements are built as reusable React components, making the application easier to scale and refactor.
Smooth Animations & Interactions
Subtle animations and transitions enhance the user experience by guiding attention and adding visual polish without overwhelming the content.
Fully Responsive Design
The layout adapts seamlessly across devices, ensuring an optimal experience on mobile, tablet, and desktop screens.
Storybook UI Documentation
Each component can be viewed and tested independently in Storybook, serving as live documentation for the design system.
Tested and Reliable Codebase
With unit tests and coverage in place, the application maintains a strong foundation of reliability and code quality.
Conclusion
Recyclr is more than just a landing page, it’s a demonstration of modern frontend development practices combined with a meaningful real-world theme. By leveraging React, Vite, Tailwind CSS, Storybook, and testing tools, the project highlights a strong focus on performance, scalability, and maintainability while delivering an engaging user experience. This project reflects a practical, production-ready approach to building high-quality frontend applications.
2 MIN READ
mobile apps
react-native
todo
Organize Your Life with myTodo: A Seamless Task Management .
Experience In today's fast-paced world, staying organized is more crucial than ever. Whether you're a student juggling assignments, a professional managing deadlines, or a parent keeping track of household tasks, having an effective task management system can make all the difference. Introducing myTodo, your ultimate companion for managing tasks effortlessly, designed with simplicity and efficiency in mind.
Simplifying Task Management with myTodo User-Friendly Interface myTodo boasts a clean and intuitive interface built with React Native, ensuring a smooth user experience across both iOS and Android platforms. The app is designed to be straightforward yet powerful, allowing you to create, organize, and prioritize tasks with just a few taps. Seamless Synchronization Forget about juggling multiple devices or worrying about lost data. With myTodo's robust Node.js backend, your tasks sync seamlessly across all your devices in real-time. Whether you're updating your to-do list on your smartphone during your commute or checking off completed tasks on your laptop at work, myTodo keeps everything in sync, ensuring you're always up to date. With myTodo, you can adapt the app to fit your unique organizational style and workflow.
Features That Make myTodo Stand Out Reminders and Notifications Never miss a deadline again with myTodo's built-in reminder feature. Set due dates and receive timely notifications, ensuring you stay on top of your tasks even when you're on the go. Task Notes and Attachments Keep all relevant information at your fingertips by adding detailed notes. Whether it's meeting notes, project documents, myTodo allows you to store everything you need in one convenient place. Collaboration and Sharing Collaborate seamlessly with colleagues, friends, or family members by sharing tasks or entire lists. Delegate responsibilities, track progress, and celebrate achievements together, all within the myTodo app.
Security and Privacy First At myTodo, we prioritize your security and privacy. Your data is encrypted both in transit and at rest, ensuring that your personal and professional information remains confidential and secure.
