CookMyFridge 🍳🍽️

A website designed to automate cooking reciepes for ingredients the user has in their fridge at the current momement. View the frontend of the site live here ➡️ CookMyFridge. View the backend of the site live here ➡️ CookMyFridge-Backend.

Table of Contents

• Overview
  • Summary
  • Demo Video
  • Team
• Getting Started
  • Setup
  • Project Structure
• Contributing
  • Making Changes
  • Committing Changes
  • Making Pull Requests
• Documents and Artifacts
  • Code Coverage

Overview

Summary

This project was developed as part of CSC 307 Intro to Software Engineering instructed by Professor BJ Klingenberg. Technologies used in this project are React on the frontend, Node.js and Express on the backend, and MongoDB for the database. Development took place over three sprints (two weeks each). We went through the entire software development lifecycle from planning and design to implementation and deployment. We also implemented CI/CD with Github Actions and Azure.

Key Features:

1. CI/CD Pipelines
2. Ability to register accounts
3. Ability to save recipes you like
4. Ability to search for recipes based on inputted ingredients and dietary restrictions
5. Hashed passwords with Bcrypt
6. Recipe cards with drop down menus of steps and summary of recipe
7. Ability to rate recipes and review other user reviews.

Demo Video

Video on Youtube

Team

The CookMyFridge team consists of 5 Cal Poly students. The team members are listed below:

• Aaron Ahmadyar
• Killian Brait
• Luis D. Garcia
• Junseo Lee
• Wesley Luu

Getting Started

Here is all you need to know to setup this repo on your local machine to start developing!

Setup

1. Clone this repository git clone https://github.com/luisdavidgarcia/CookMyFridge.git
2. Change directories into the /react-frontend subfolder
3. Install yarn with your OS package manager (apt install, brew, pacman)
4. Run yarn install in the react-frontend subfolder of the repository
5. Change directories to /backend subfolder
6. Run npm i in the backend subfolder of the repository
7. Install IDE Extensions
   • Prettier
8. Enable format on save in your IDE
   1. Click the settings button in the bottom left
   2. Search "formatter" and set your default formatter to Prettier
   3. Search "format on save" and click the checkbox
9. Reach out to an existing developer for environment variables
10. Verify by running npm start in the react-frontend folder and npm run dev in the backend folder

Project Structure

• .github Github Actions CI/CD
• backend Root folder for backend API - index.js Top level file
  • models Schema definitions for data
  • controllers Express endpoint definitions and controllers
  • tests All test cases for functions
• react-frontend Root folder for React app
  • public Assets for frontend
  • src Frontend code - App.js Top level React component
    • components All React components
    • pages Pages for frontend
    • images All images for pages
    • css All CSS

Contributing

Here are all of the steps you should follow whenever contributing to this repo!

Making Changes

1. Before you start making changes, always make sure you're on the main branch, then git pull and npm i on both frontend and backend to make sure your code is up to date
2. Create a branch with the name relating to the change you will make git checkout -b <name-of-branch>
3. Make changes to the code
4. npm run test in the backend and react-frontend subfolder to ensure code standards. (running npx prettier --write . will fix most of the styling errors)

Commiting Changes

When interacting with Git/GitHub, feel free to use the command line, VSCode extension, or Github desktop. These steps assume you have already made a branch using git checkout -b <branch-name> and you have made all neccessary code changes for the provided task.

1. View diffs of each file you changed using the VSCode Github extension (3rd icon on far left bar of VSCode) or GitHub Desktop
2. git add . (to stage all files) or git add <file-name> (to stage specific file)
3. git commit -m " <description>" or git commit to get a message prompt
4. git push -u origin <name-of-branch>
5. Check the Github Actions page to ensure all workflows are successful

Making Pull Requests

1. Go to the Pull Requests tab on this repo
2. Find your PR, and provide a description of your change, steps to test it, and any other notes
3. Link your PR to the corresponding Issue
4. Request a reviewer to check your code
5. Once approved, your code is ready to be merged in 🎉

Documents and Artifacts

• UI Prototype on Figma Last updated 05/02/23
• Class Diagram Last updated 06/08/23
  • Old Class Diagram Last updated 05/10/23
• Project Board Last updated 06/08/23
• Deployed Backend Last updated 06/08/23

Code Coverage