There are technology projects that go beyond code. Some demand technical maturity, others demand product vision, and a few require both at the same time—especially when they have a direct impact on real people’s lives.
This was the case of my participation in the development of a child development monitoring platform, built in partnership with UNICEF and applied in a real-world context in the city of Tarumã, São Paulo. The project had direct mentorship from UNICEF professionals, including Justin and other engineers, as well as the Porta Telemedicina team, responsible for integration within the healthcare context.
More than a technical delivery, it was a project guided by product design, impact validation, and architectural decisions made under real constraints of usage, scale, and social responsibility.
Project Context: Technology with Real Impact
The goal of the platform was to support child development monitoring through a structured, organized, and accessible interface for healthcare and social assistance professionals.
The focus was not simply to “build a system,” but to understand:
- How the system would be used in the field
- Which information truly matters for child development monitoring
- How to structure data clearly for decision-making
- How to transform clinical and social data into useful visualizations
Throughout the process, there was strong guidance from UNICEF on design thinking and product discovery, where every feature was validated before being implemented.
The Importance of Design and Discovery
Before writing any code, the project went through an intense product definition phase.
During this stage, discussions included:
- What should actually exist in the platform
- What should be excluded to avoid cognitive overload
- How professionals would use the tool in their daily routines
- How to make the workflow intuitive, even in low-tech environments
This phase was essential in guiding all subsequent technical decisions.
My Role: Frontend, Architecture, and Technical Decisions
My role in the project was entirely focused on the frontend, with direct responsibility for architecture, code structure, and critical technical decisions within the application.
The tech stack included:
- Vue 3
- Docker
- Google Maps API (with multiple modifiers and customization layers)
- Figma-based design system
- Modular architecture
- Atomic Design
- Clean Code applied at real product scale
From the beginning, the decision was not to treat the frontend as a simple “UI layer,” but as an independent, scalable, and sustainable architectural system.
Frontend Architecture: Modularity and Scalability
One of the main challenges of the project was ensuring the application could grow without becoming a difficult-to-maintain monolith.
For this reason, the architecture was structured around:
Atomic Design
The interface was divided into clear levels:
- Atoms (buttons, inputs, labels)
- Molecules (simple composed components)
- Organisms (complete functional blocks)
- Templates (page structure)
- Pages (final implementation)
This approach enabled visual consistency and reuse across the entire application.
Domain-based modularization
Instead of organizing code only by file type, the structure was designed around functional domains:
- Child development
- Patient registration
- Vaccination tracking
- Geographic mapping
- Reports
This reduced coupling and made maintenance easier across different teams.
Vue 3 as a Foundation for Reactivity and Structure
Vue 3 was fundamental in supporting the application’s complexity.
We used concepts such as:
- Composition API for reusable logic
- Composables to encapsulate frontend business rules
- Domain-based state management
- Clear separation between logic and presentation
This helped avoid the tight coupling commonly found in older Vue applications based on the Options API.
Google Maps Integration: Data and Interaction Layers
One of the most technical parts of the project was the integration with the Google Maps API.
The application did not use the map only for visualization, but as an interactive data layer.
We implemented:
- Dynamic markers based on child development data
- Geographic filters by region
- Layers of information about child indicators
- Contextual interactions based on location
The challenge here was handling multiple API modifiers while maintaining performance in scenarios with large datasets.
Figma-based Design System
Another key component was the implementation of a design system fully aligned with Figma.
The goal was not just to “follow the design,” but to turn it into a system.
This included:
- Design tokens (colors, spacing, typography)
- Strict componentization aligned with the prototype
- Cross-screen consistency
- Accessibility and readability considerations
The design system was essential to maintaining consistency across a platform with multiple complex flows.
Vaccination Record as a Table-Based Interface
One of the most interesting challenges was building a digital vaccination record.
It needed to:
- Be clear for healthcare professionals
- Strictly follow the Figma design
- Function as a dynamic table
- Allow fast reading of history and status
The implementation required careful attention to:
- Responsive table structures
- List rendering performance
- Visual organization of dense data
- UX for fast field usage
This was one of the points where balancing technical decisions with real usability mattered the most.
Docker and Development Environment
To ensure environment consistency, the entire application was containerized using Docker.
This enabled:
- Standardized environments across the team
- Easier onboarding
- Reduced “it works on my machine” issues
- Integration with development pipelines
Even though this was a frontend-heavy project, this decision was important for maintaining predictable development workflows.
Technical Responsibility and Individual Decision-Making
One of the most remarkable aspects of this project was the level of individual technical responsibility entrusted to me.
A significant portion of frontend architectural decisions were made by me, including:
- Folder structure
- Componentization strategy
- Domain organization
- Code standards
- External API integration
- Scalability patterns
This required not only technical knowledge, but also maturity to understand the impact of each decision on the final product.
The Impact of the Project
More than a functional system, this project had real social impact in a sensitive context: child development monitoring.
This completely changes the perspective on software engineering.
Every UI component, every UX decision, every data structure was not just code—it was a tool influencing decisions made by healthcare professionals in the field.
This is the kind of experience that reshapes the role of a software engineer.
We are not just building systems.
We are building infrastructure that influences real human decisions.
Conclusion
This project taught me something that goes far beyond technology.
I learned that software architecture is not only about scalability or patterns, but about responsibility.
When your code reaches real environments, with direct impact on people, every technical decision carries a different weight.
Being part of this initiative with UNICEF was one of the most important experiences of my professional journey so far—not only because of the technical complexity, but because of the meaning behind what was built.
And above all, it reinforced that software engineering can truly make a difference in people’s lives.
related posts: https://www.linkedin.com/feed/update/urn:li:activity:7195849763097837569/ https://www.linkedin.com/feed/update/urn:li:activity:7467679303888134144/
Top comments (0)