hmlauth / Yum-me

Yum-me

A fully RESTful web application that allows users to search, save, edit, create and delete recipes. Yum(me) is the new age equivalent of a personalized cookbook!

Video Demonstration: YouTube
Website Live: yumme.recipes
Heroku Link: https://yumme.herokuapp.com/

Set-Up

Yum(me)! relies heavily on NPM packages! After running npm init -y — to initialize the package.json file — proceed installing all of the following node packages:

Node packages

• DotEnv

• Axios

• Express

• Express-Handlebars

• mysql

• mysql2

• sequelize

• path

Technologies Used

• Node and Express Web Server
• Backed by a MySQL Database with a Sequelize ORM
• CRUD routes for retrieving, adding, updating, and deleting data
• Firebase user authentication
• Bootstrap and Express Handlebars front-end frameworks
• MVC Paradigm file structure
• Heroku deployment

Files

.gitignore

.gitignore file, inclusive of the following lines, was created to protect API keys and "secret" information.

node_modules
.DS_Store
.env

Primary Functionalities of Yum(me)!

• AJAX call: Pulls the value from the "search" term input and queries the mealdb API. The appropriate response object data is selected and then dynamically added as data-attributes to the <a> tag surrounding "Save to Favorites."

• POST request: When a user clicks 'Save to Favorites', jQuery selects pulls the data-attributes stored on the <a> link then sends that data as a POST request to be stored in the Recipe table.

• GET request - When a user logs in, all their saved recipes automatically appear on their Favorites page. This information is selected via their unique Firebase User ID from the User table.

• PUT Request - When a user adds comments to a saved recipe, the added comments are saved in the database. Upon reopening this saved recipe, they will be able to see all their comments!

• DELETE Request - A user has the ability to delete one of their favorite recipes.

• Input Validation - While minor at this time, if a user does not enter a search term, a notification will appear requesting they please enter a search term.

Future Development

• Database Efficiency - At this time, ingredients and measurements are each stored in strings which means we have duplicates! To be scalable, we would need to store each ingredient and each measurement once and then use foreign keys to access the correct data.

• Improved Input Validation - This will eventually include the functionality of updating ingredients, measurements, and instructions in the "View Full" modal on the Favorites page. Additionally, when a user creates a recipe, we need to ensure that specific special characters are not allowed or more than one ingredient and measurement per space. It is critical that as the database structure changes so does the logic storing and retrieving information.

• Reduce Data - At this time there are no constraints on the number of results rendered to the page. Additionally, each card contains all requisite response object data == limitless data could be send to the page! Not good. Ideally, we would love to limit to 3 - 5 results and then include a "Next" button in the bottom right corner. Furthermore, this will also create a nicer user experience because they will not be overwhelmed with results, exhausted from choosing, and then being unstaisfied because they weren't sure if they picked the right one! #paradoxofchoice The user will be pleased with a few options, be energized by their easy choice, and then be even more sastisfied with it as they start cooking and eating!

• Better API for Search Page - The current api used for the Search page is very limited in the number and variety of recipes with only about 200 recipes to search through.

• Filter Recipes on Favorites Page - Add functionality to the Favorites page where in users could search by ingredient, cuisine or name of recipe, or have the option to filter alphabetically, date saved, or with a possible ranking feature. We could even include a "Top 5" most used. This could include creating different "cookbook" profiles, or print recipes to a physical cookbook (long-term).

• Shared Accounts - Families could have accounts together for sharing family recipes!

• Social Commenting and Sharing

• Mobile App

---

The Creators

Nate Micinski

• Primary Contributions: Back end routing, JavaScript logic, Database Storage
• Soft Skills:
  • Leader
  • Distilling complex ideas
  • Enthusiasm & Communication
  • Presenting
  • Time Management
• Favorite Aspect:

"Create Your Own Recipe functionality!"

• What I learned:

"I learned a lot about building an MVC file structure and creating RESTful route conventions."

Hanna Lauth

• Primary Contributions: Front-End Design and Functionality including Express.Handlebars views, View Full and Create Your Own Recipe design and functionalities, Mobile-Responsiveness, README.md
• Soft Skills:
  • Leader
  • Presenting
  • Team Collaboration
  • Planning & Time Management
  • Big Picture Conceptualization & Visualization
  • Ethusiasm & Communication
• Favorite Aspect:

"The View Full modal and Create Your Own Recipe are my favorite features!"

• What I learned:

"That both Bootstrap and Materialize have particular functionality when it comes to buttons and input fields... you must click on the exact right spot for it to work! We spent a good 4 hours trying to figure out why I couldn't log in or sign up on the deployed heroku app from my computer... come to find out I only needed to click exactly on the text and wait 2 seconds - BOOM! Signed In. On a more technical note, I learned about pulling user input from multiple input fields simuntaneously, furthered my understanding and comfortability with CRUD, back-end, and jQuery/JavaScript, learned how to make HTML elements editable (contentedible), and became best friends with Modals, GitHub, Bash, and Slack Channel threads. "

Mike Wilkenson

• Primary Contributions: Firebase User Authentication, Recipe and User Models,
• Soft Skills:
  • Eagerly embraces challenges
  • Communication & Teamwork
  • Presenting
• Favorite Aspect:

"Personalized greetings based on Firebase uid"

• What I learned:

"I became much more proficient with GitHub deployment and resolving merge conflicts. I also learned about user authentication with a third party user base."

Jenn Goldman

• Primary Contributions: Front-End Design including Main & About Us views, Photography, Mobile-Responsiveness, Color Palette
• Soft Skills:
  • Communication & Teamwork
  • Research
• Favorite Aspect:

My team <3

• What I learned:

"Finally mastered the development workflow of GitHub in regards to creating branches and pull requests! Also, gained more familiarity with Express.Handlebars."