Max Wix

UX/UI Devloper, Designer

Organizing a library of recipes into an online cookbook

In this project, I introduce a client's collection of recipes to the digital world with a successfully designed and developed recipe website. I used newly gained knowledge in PHP and SQL databases to convert my client's Excel spreadsheet into a scalable database with which they can continue to add. In addition to incorporating a database into HTML, CSS, and JS using PHP, I built a site that is aesthetically pleasing, logically organized, and accessible.

Project Info:

Tools Used

Challenge

The Problem:

  1. My client had a database of 37 recipes that they wanted to be organized into a professional and functional recipe website.
  2. The client wanted a home page with a search functionality and a filter menu organized by protein.
  3. Lastly, the client wanted each recipe to have a comprehensive and approachable page outlining the recipe.

Goals and Objectives

  1. Design an aesthetically pleasing and accessible website,
  2. Develop a functional website using HTML, CSS, JS, and PHP that meets all of the client's requests and meets professional standards,
  3. Gain a greater understanding of HTML, CSS, JS, and PHP and using SQL databases.

Process and Insights

Styles

I used Times for my home page and Georgia for all of my recipe pages. Since this is a very simple, almost one-task website I didn't see any need to overwhelm the user with a ton of colors, sticking to one primary green and a grey for the occasional hover state. I let the imagery the client provided do most of the visual heavy lifting.

Project Goals

Excel to MySQL

The client provided me with an Excel document of everything I needed for the database. I converted the Excel doc to a table in a mySQL database so that I could incorporate the database into my alpha version.

Project Goals

Alpha

In the alpha version of this project, I fully developed the home page and incorporated the provided database.

Testing Takeaways

  • Most of the feedback was overwhelmingly positive, both testers and the client agreed that this page felt professional and was organized in an effective manner.
  • The client pointed out that the filter menu was missing Turkey as an option.
  • The titles for each recipe should be the primary green, both to emphasize the visual hierarchy between the title and subtitle as well as to increase visual appeal.
Project Goals

Beta

In the beta version of this project, I fully developed a recipe page and incorporated the provided database.

Testing Takeaways

  • There was some confusion regarding which image correlated with which step, I needed to increase the spacing between each step to make this less confusing.
  • To go back to the home page, the user had to scroll to the top of the page. I needed to add a back button at the top and bottom of the page.
Project Goals

The Solution

Project Goals

The Results

Overall this project was a success. The first indicator was the client's positive reaction to this project. I designed and developed a fully functional recipe website that incorporated the client-provided database and was built to a professional standard.

This project was also a great personal success. This was my first time using PHP and incorporating SQL databases into code. I learned enough to apply this knowledge to future projects, greatly broadening my skillset in what I can produce. Additionally, I further enhanced my skills in HTML, CSS, and JS.