EAT MY FOOD PHP SITE

PHP, MySQL, DESIGN

OVERVIEW

A data driven recipe website was build with PHP and MySQL to replace 40+ static HTML pages with dynamic templates. This was a 10 week project and my first time working with databases and server side code.

THE PROBLEM

Building a recipe site with 40+ recipes as individual HTML files would mean duplicating the same layout dozens of times. Any design change would require editing every single page. I needed a system where content lived separately from presentation, and pages built themselves from data. This is where PHP and MySQL come into light.

DATABASE STRUCTURE

The recipe was shared with dozens. Through a collaborative effort with my classmates who were building sites from the same recipe set, we divided the work among our group to quickly finish the spreadsheet in an efficient manner. Each row contains the recipe title, subheading, description, category, an image folder reference, a hero thumbnail, and fields for up to 10 step-by-step images.

PHP ARCHITECTURE

I broke the codebase into reusable components: db.php handles the database connection, recipe_card.php renders the card layout, and shared header/footer files appear on every page. The recipe card function works identically on the homepage and recipes page: one piece of code, two contexts, zero duplication.

SEARCH & FILTERING

The recipe page is included in the navigation bar and home page. Incorporating a search bar alongside this would decrease the need to locate an essential part of a recipe website. The code grabs whatever the user types or selects from the URL, then builds a SQL query to find matching recipes. If someone searches for "chicken," it looks for that word in the recipe titles. If they pick a category like "meat," it only shows recipes tagged with that category.

Similar to this was the category filtering. This checks against values like "meat," "vegetarian," and "pasta," and both search and filter can combine in a single query. However, this proved to be the trickiest part. Many of the recipes could reasonably fit multiple categories. A pasta dish with chicken could be "meat" or "pasta." I had to make deliberate choices about primary categorization so filters returned useful, non-overlapping results.

DEPLOYMENT

All code was pushed to an external server via FileZilla, requiring configuration of the host, username, and port for SFTP transfers. This added a layer of real world deployment experience beyond local development by remote file structure, ensuring database credentials stayed secure, and testing on a live environment.

DESIGNING THE LOOK

I defined the entire visual language as CSS custom properties, with a small variety of browns, greens, and tans. Open Sans was the primary typeface with a consistent use of radius and box shadow to add depth. This was simplified to prevent the need to memorize hex codes and give the ability to tweak the entire palette from a single :root block cross platform.

RESULTS

  • 40+ recipes managed from a single database table

  • One template file generates all individual recipe pages

  • Search works site-wide from any page via the header

  • Category filters reduce browse time

  • Adding a new recipe requires zero new files

CONCLUSION

The final site makes it easy for users to find what they want. The search bar is always visible in the header, filters let people narrow down by category, and the recipe cards give a quick preview before clicking in.
From a development side, planning the database structure early made the rest of the project smoother. Breaking the code into reusable pieces like the recipe card function means less repetition and fewer places for things to break.
Overall the site does what it needs to do. Users can browse, search, and view recipes.

READ MORE Personal Projects

  • Eat My Food PHP Recipe Site

    Eat My Food PHP Recipe Site

    A 10 week PHP oriented class focused on 40+ recipes. Here, I was tested in MySQL abilities to replace any static HTML with more dynamic templates.

    VIEW PROJECT

  • Street Tails Website

    A redesign of a Philadelphian animal shelter's website. Here, I include a micro interaction input and incorporate cross-device functionality.

    View Project
  • To Do Interaction Design

    To Do Interaction Design

    Involves a thorough rework of the widely used task management app, Todoist. Here, I outline its strengths and weaknesses.

    VIEW PROJECT
  • Petfinder Micro-interactions

    Petfinder Micro-interactions

    A CSS/HTML site featuring a detailed description of PetFinder’s slideshow micro interaction, as well as a redesign.

    View Project