Role
- Hybrid App Developer
- UI/UX Designer and Researcher
Project Duration
- 3 months
Tech Stack
- Capacitor
- Sveltekit
- Figma
- Illustrator
- VS Code
- Github
The Spark: From Daily Dilemma to Digital Baon Buddy
Was I the only one caught in the nightly ritual of staring blankly into the fridge, the question "What's for baon tomorrow?" echoing in the culinary void? This daily decision fatigue, often leading to repetitive meals or last-minute unhealthy choices, sparked an idea: what if there was a friendly, smart companion to make meal planning, especially our beloved baon, effortless and even enjoyable?
Thus, Baon Buddy was conceived – an app designed to be a simple yet powerful tool for anyone looking to conquer their meal prep and bring a little more delight to their daily routine. My vision was an intuitive mobile app offering quick meal suggestions, easy recipe management, and a visual calendar to see the week's eats at a glance.
Gearing Up: The Tech Toolkit for Baon Buddy
To bring Baon Buddy from concept to a tangible mobile experience, I carefully selected a technology stack focused on performance, developer experience, and cross-platform capabilities:
- Core Framework – Svelte: The heart of Baon Buddy is built with Svelte, chosen for its exceptional reactivity, minimal boilerplate, and ability to compile to highly efficient JavaScript. Svelte provided the structured framework for building the application, managing routing (though primarily a single-page experience on mobile), and optimizing the build for deployment. This combination allowed for rapid iteration and a truly enjoyable development process.
Native Bridge: Capacitor: To transform Baon Buddy into a true mobile app for Android (with iOS potential), Capacitor was the bridge. It seamlessly wrapped the SvelteKit web application, granting access to native device functionalities and paving the path for Play Store distribution.
Key Capacitor Plugins:
@capacitor/filesystem: Became the backbone for persistent data storage, housing all user-created meals, calendar plans, and favorites, effectively overcoming the limitations of localStorage.
@capacitor/local-notifications: Implemented to provide users with timely, configurable reminders for their planned baon.
@capacitor/status-bar & capacitor-plugin-safe-area: Ensured a polished native look and feel by managing the status bar and respecting device screen notches and curves.
@capacitor/app: Utilized for app state listeners to manage background tasks like music playback.
State Management: Svelte’s built-in writable and readable stores were instrumental in managing global application state (like the master list of all meals, calendar data, and user settings) and ensuring UI reactivity.
Date Handling: date-fns was the go-to library for all date manipulations, formatting, and comparisons, crucial for the calendar and notification features.
Styling: Standard CSS, enhanced by Svelte’s scoped styling, kept components modular and styles maintainable.
Development Environment: The project was developed using VS Code, with Git/GitHub for version control, and extensive use of browser DevTools.
The Journey: Building, Testing, and Iterating Baon Buddy
The development of Baon Buddy was an iterative adventure, marked by exciting feature implementations and valuable lessons learned, especially through closed testing.
Initial Build & The Storage Conundrum:
The early versions focused on core functionality: meal suggestions, basic recipe viewing, and a simple calendar. Initially, localStorage seemed sufficient for data persistence. However, as features grew and testing began, a significant roadblock emerged: the dreaded QuotaExceededError. Storing full meal objects, especially in the calendar, quickly hit the browser’s storage limits.
This necessitated a major refactor – a deep dive into asynchronous JavaScript (async/await) and migrating all primary data to the more robust @capacitor/filesystem. This involved designing JSON file structures, creating utility functions for file I/O, and implementing a data migration strategy for early testers. While challenging, this pivot was crucial for the app’s stability and scalability.
Phase 1 Testing: Listening to the Users – CRUD and Beyond:
The first wave of closed testing brought invaluable insights.
Feedback: A glaring omission became clear – users wanted to add their own Baon! The app initially focused on suggestions, but the desire for personalization was strong.
Solution & Challenge: Integrating full CRUD (Create, Read, Update, Delete) functionality for meals while maintaining a clean user experience was the next hurdle. The initial single-screen design felt cluttered. This led to a UI rethink, resulting in the introduction of the Side Menu for better navigation and dedicated screens/modals for adding/editing meals (BaonForm) and managing them (ManageBaonScreen). This also involved adhering to usability principles like the “Rule of 7” to avoid overwhelming the user.
Outcome: Users responded very positively to being able to create, edit, and delete their own Baon, validating the shift towards a more user-driven content model. It was a powerful reminder that developers, being close to the project, must prioritize user data and feedback over initial design assumptions.
Phase 2 Testing: Refining the Experience – Notifications & Prioritization:
Feedback: Testers loved planning but wanted better reminders. They also pointed out that some early aesthetic features (like music or extensive color theming) felt prioritized over core usability or more Baon content.
Solution & Challenge (Notifications): Implementing a user-configurable notification system (reminders for “day before” and “day of” Baon) using @capacitor/local-notifications was next. This involved adding new settings, managing time inputs, and robustly scheduling/cancelling OS-level notifications. Initial attempts had bugs related to scheduling logic and edge cases, which required careful debugging. The Settings screen itself needed a revamp, leading to the tabbed interface (“General” and “Notifications”) for clarity.
Solution & Challenge (Feature Prioritization): The feedback about feature focus was a critical learning moment. I adopted a more structured approach, using a feature matrix to distinguish “essential/must-have” features from “nice-to-haves.” This helped shift focus from purely aesthetic additions to core user needs, bug fixes, and highly requested features during the second testing phase.
Outcome: The notification system, once stabilized, was a hit. More importantly, the shift in development priority based on user feedback resulted in a more streamlined, user-focused app. User responses in the second phase were significantly more positive, highlighting the value of this user-centric approach and learning to “step back and see things from the perspective of the user.”
The Destination (For Now!): Launching Baon Buddy v2.1
Through this iterative process of building, testing, and refining, Baon Buddy v2.1 was successfully published to the Google Play Store! A key metric of success was observing organic growth: even without active marketing campaigns, the app saw an increase in installed devices from an initial 6 to 13 during the post-launch period, indicating genuine user interest and discovery.
Hindsight & Future Trails: Lessons from the Baon Journey
This journey of creating Baon Buddy from scratch has been incredibly insightful:
Technical Wisdom Gained: The project solidified my understanding of asynchronous programming in JavaScript, the nuances of Svelte’s reactivity and store management, and the practicalities of mobile app development with Capacitor, especially regarding native filesystem interactions and plugin integration. The importance of robust data migration strategies when evolving storage mechanisms also became crystal clear.
Process Reflections: As my first foray into building a mobile app with SvelteKit and Capacitor, the development process was, at times, “messy.” I learned many things on the fly, particularly around CSS structure for a scalable app. For future projects, I’ll implement more thorough upfront planning and templating to streamline development. The iterative feedback loop with closed testers proved absolutely indispensable – I learned to truly listen and prioritize based on their real-world experience.
User-Centricity is Key: While an “artist’s” passion can drive initial ideas, the “UX researcher and designer” hat must guide feature prioritization and refinement to build something users genuinely need and love.
Future Baon: Users have expressed interest in online functionalities like AI-driven recipe suggestions or linking Baon directly to grocery ingredients. While exciting, these features would significantly expand Baon Buddy’s scope beyond its current lightweight, easy-to-use design. For now, the focus remains on enriching the core experience, such as adding more diverse default Baon ideas, before considering such large-scale expansions. Bloating the app with too many features too soon is a pitfall to avoid.
Ready for Success?
Don’t miss the chance to get a website that truly represents you! Choose a template that suits you or schedule a meeting for a custom design that fits your budget!