CookBook Mobile App
Utilizing Apple native elements in XCode
Summary
CookBook is a mobile app, designed and developed over the course of 7 weeks. Users can search for recipes using keyword matching and filters, and add those recipes to user-made collections and a weekly meal plan. Another feature is a shopping list, where users can easily add and remove ingredients.
CookBook is a native iOS application, developed in XCode with Swift UI and Swift Data.
Roles
I completed this project alone, from ideation to final product, with an independently set project roadmap.
UI/UX Designer
Full Stack Developer
Project Manager
Challenge
Completing an application from design to development taught me about UI/UX design feasibility. I started with an idea, researched and found APIs, designed the UX/UI, and then started development. This meant I was developing to match the UI from my Figma file. I ran into issues where iOS/Apple native Swift UI elements could not match the visual elements I designed. This meant balancing expectations of a perfect UI with full functionality within my limited 7-week development period.
Competitor Research
Before starting development, I looked at apps on the market that were competitors, making a feature graph. I decided that my app would need a mix of common features and a special feature to set it apart. CookBook (“My App”, bottom row) has ingredients, a shopping list, recipe search, meal planning, full recipe steps from an external link, and favorites. I ended up dropping the “Smart Shopping List” concept due to time, and the complexity of the algorithm.
Pre-Development API Research
I looked at multiple APIs, prioritizing the quality of information, and a high request limit. I chose Edamam for its high monthly limit, significant data structure information, and the fact that Edamam had a sister API for ingredients, which used the same data model as the ingredients within the recipe API.
This discovery saved the app’s ability to have an ingredient and shopping list section. Although I couldn’t hook up the recipe ingredients to the shopping list directly, I still ended up using the Edamam ingredient API.
I did testing with the Edamam endpoint before starting back-end development of the CookBook app.
Wireframes and UI Design
Through mid-fidelity wireframes, I determined the visual style of the app. When looking at competitors I noticed a problem with navigation and organizing the content. I quickly decided on a 4 tab navigation, and the use of rounded corner cards to separate recipe items.
I had some experience with XCode and Swift Navigation structures and understood where I would use navigation views and stacks. This was important to development because navigation stacks would depend on data sharing between the Views and View Models.
Development
I utilized the model, view, and view model architecture system (MVVM).
I used Apple’s Swift Data structures of Models to house the data structures for the API’s models and for my own models ie. “Collections.”
The image details my development timeline and goals for each weekly sprint.
Final Application and Branding
With the app nearly completed, I included an app icon/logo for the home screen, and used that logo for the app-startup process.
CookBook
Simulated on iPhone 15 with XCode Device Simulation.