Case Study
ePassport System
A mobile-first system for collecting and managing volunteer data, replacing manual PDF workflows with a structured platform including authentication and admin features.
Problem
Volunteer data was previously collected through multiple PDF and Word documents, resulting in inconsistent structure, manual processing, and poor data management. There was no centralized system, no user roles, and no way to efficiently manage or validate submissions.
Approach
Instead of building a native mobile app, I chose a mobile-first web application to reduce complexity and ensure accessibility. The focus was on creating a structured form flow, implementing authentication, and building an admin interface for managing submitted data.
Architecture
- Frontend: Vue application with Vuetify UI framework
- State: centralized handling of form and user data
- Backend: Supabase (PostgreSQL, authentication)
- Auth: user registration and login system
- Admin: interface for managing submitted data
- Design: UI based on Figma design system
- Deployment: Netlify with CI/CD pipeline for automated builds
Key Decisions
Mobile-first instead of native app
A web-based solution reduced development time while maintaining full mobile usability, eliminating the need for app store distribution.
Supabase as backend solution
Supabase provided authentication and database capabilities out of the box, allowing focus on product features instead of backend infrastructure.
Vuetify for UI consistency
Using Vuetify ensured consistent UI components and faster development aligned with the provided Figma design.
Structured form flow
Breaking the form into steps improved usability and reduced friction during data entry.
Result
Replaced manual workflows with a centralized system including authentication and admin tools. Data collection became structured, easier to manage, and significantly more reliable.
Tech Stack
What I'd Improve
- Add role-based access control for more granular permissions
- Introduce server-side validation for higher data integrity
- Improve analytics for tracking user behavior and form completion