Cookbook

A new app that allows you to easily save and store your favourite recipes into categories. 

• Create and delete categories.

• TheMealDB API to source recipes.

• Create bookmarks to store your favourite recipes into categories.

• Challenge:  My biggest challenge was seeding suggested recipes. 

• Solution: I overcame this challenge by using TheMealDB API, open-uri, and JSON. 

• SCSS stlying using partials, nesting, and chaining

• Balancing information density with usability

• Color theory and contrast for accessibility

I planned the DB schema for the app, getting feedback from a TA before building.

This helped me visualise the back-end structure and ensure each model table contained the correct columns, with the corresponding data-type, and foreign keys! 

Next I created the models, based off the DB schema. 

The main  challenges were foreign keys and adding the correct validations to ensure users could enter invalid data.

Created the base controllers, actions, and views. 

Added create and destroy actions for the categories and bookmarks controllers, with redirects and notices.

To implement the DRY rule, I used a set_category before_action for the new and create actions so I wouldn't repeat my code.

I refractored the initial HTML into partials for code that was reusable, such as index and show cards.

This helped me organise my code to improve readability by seperating components into manageable elements, and enabled me to update it and apply tailored SCSS later on.

For the new booking form I rendered a simple_form_for from a partial, the category is selected automatically from the page they were on, the user then selects the recipe to associate the bookmark with, and adds a comment.

Added delete feature to categories and bookmarks with a notification and redirect to events index page.

My biggest challenge was seeding suggested recipes. I overcame this challenge by using TheMealDB API. 

I interpolated the ID parameter into the URL. Then parsed it using open-uri.  Next, I used JSON to parse the serialised meal. I then accessed the meal from index 0 of the array inside the 'meals' key in the hash.  Lastly, I created a new recipe using data extracted from the meal via keys.

Using the partials and classes I created in the HTML, I linked corresponding tailored SCSS stylesheets.

For example; I added box-shadow and border-radius to cards to make them stand out from the back-ground. 

I used flexbox to arrange and align the image and content within the cards to ensure responsive layouts.

I changed the colour and styling of the CTA buttons so they stand out but still fit into the colour scheme.

To ensure my code is clean, organised and easy to read I utilised SCSS partials, nesting and chaining.

I chose a green and gold color scheme I wanted to evoke a sense of freshness, natural ingredients, and a sophisticated, luxurious feel. 

Foodies are attracted to bold and vibrant colors that reflect the excitement and passion they feel for food. So I used rich colors such as bright yellows, and vibrant greens to help my branding stand out and catch the eye of foodies.