DEX BARBER – A Fullstack Mobile App Created During My Hacktiv8 Bootcamp Journey
Role
Fullstack Developer Implemented Real-Time Chat and User Tracking
Timeline
Just One Week, 2023
Product & Platform
A mobile app that allows users to book barbers to come to their location, featuring real-time chat and live tracking
github.com
The UI/UX still needs improvement, but we successfully implemented real-time chat and live tracking.
PROJECT BRIEF
The idea came from a personal frustration wanting to get a haircut, but feeling too lazy to wait in line or leave the house.
Getting a haircut should be simple—but for many men, it’s not. The hassle of going out, waiting in line, and finding a skilled barber can make them delay it for days, even weeks.
That’s where DEX BARBER comes in.
Our goal was to solve a real, everyday problem:
- Accessibility – Making haircut services available without leaving the house.
- Visibility – Giving talented barbers more exposure to clients nearby.
- Standardization – Offering a cleaner, more elegant grooming experience through consistent service quality.
CHALLENGES
Time Was Our Biggest Enemy
At first, we were confident
Our team had skilled members and ambitious ideas with advanced, feature-rich plans. But as we got deeper into development, we realized we had aimed too high for the limited time we had.
Too many features quickly became overwhelming. We had to rethink our priorities and adapt fast.
"The key is not to prioritize what's on your schedule, but to schedule your priorities."
— Stephen Covey
The app's visuals took longer
Due to the tight deadline, we skipped formal design stages and went straight into implementation using React Native a decision made to save time, though it came with trade-offs.
SOLUTION
How We Tackled It
Strategic Team Division
To manage our limited time, we divided tasks based on expertise backend, mobile app (React Native), frontend CMS, and API integration. This allowed us to work in parallel and stay efficient.
Using Clear Mockups
We created quick sketches and mockups to align on the app’s purpose, flow, and features even without formal UI/UX design.
WORKFLOW
Understanding the Workflow Behind Dex Barber
*System Components meaning: Applications, APIs, and external services that form the core structure of the system
PROJECT TIMELINE & PROCESS
We went through several processes to ensure we are solving the right problem and not wasting resources and time.
February 28, 2023
Brainstorming idea, making mockup and scheme diagram
We start by identifying the problem and sketching out a model. Creating diagrams before coding begins.
March 1, 2023
Sprinting Backend Setup and Started Layouting
We divided the tasks based on each member's expertise: backend, mobile frontend, CMS, and API integration to move quickly and efficiently.
March 4, 2023
Exploring Third Party API
We explored the APIs for key features in the existing documentation, features used for real-time chat, map tracking, payments (Xendit), and image uploads (Cloudinary).
March 6, 2023
Wiring Code for Backend and Frontend
All parts were wired together syncing APIs, backend logic, and frontend components into one system.
March 8, 2023
Debugging Code
We fixed bugs, ran unit tests, and ensured the core features ran smoothly before final deployment.
MY HANDLE
User Tracking Experience
As part of the team, I was assigned to explore and implement key third-party APIs — specifically focusing on real-time chat and user location tracking. For user location tracking, several components were required, including React Native Geolocation and Cloud Firestore for real-time data storage and updates.
Today, I'd like to share my experience setting up the user tracking feature. If you're looking to implement a similar solution, this guide is for you.
Why Use Firebase for User Location Tracking
The main reasons why to choose firestore as a database :
- Real-Time Data Sync – Instantly reflects changes across clients without manual refresh.
- Flexible Data Structure – Uses a NoSQL document model that’s easy to adapt to changing needs.
- Scalable Architecture – Handles growing data and users with minimal setup.
Flowchart: What Happens Behind the Scenes
- First, the app asks for location permissions.
- Then, it continuously tracks the barber’s live location and updates it to Firebase. Meanwhile, the customer’s location is fetched once at the beginning.
- Both points are then displayed on the map, connected by a route via MapViewDirections.
- To get accurate distance data, the app uses the Google Distance Matrix API.
- Finally, when the barber gets close enough (less than 30 meters), the app automatically navigates back — signaling that the barber has arrived.
🔗 For a more technical guide on setting up and retrieving user location in React Native, click here.
PROJECT RESULT
With a tight deadline, we prioritized core features — and this is what we delivered.
Not Perfect, But Everything Works
I know the UI/UX is far from perfect, but all core features are up and running smoothly. These include user location tracking, real-time chat, upload photo and payment integration. It may not be perfect visually, but it works — and that’s a solid foundation.
Solid Test Coverage: 91.1%
With a total of 113 test cases and a 91.1% test coverage, we ensured that most critical paths in our application are well-tested
FINAL QUOTE
From a Simple Daily Frustration to a Real Product It Pushed Us, Taught Us, and Proved the Power of a Small Team.
LESSONS LEARNED
Focus on What Matters, Not on Doing Everything
At first, we were too ambitious. We wanted to build everything — chat, tracking, CMS, payment — all at once. But as the deadline got closer, we realized that it’s not about having the most features, but about delivering the right ones. This taught us how to prioritize and focus on what’s essential.
We Learned the Most When Things Went Wrong
From integration errors to rushed designs and last-minute changes, we ran into all kinds of issues. But those moments were also our biggest teachers. We learned to debug better, communicate more, and adapt quickly. In the end, this project wasn’t just about building an app — it was about growing through every challenge.