What's Cookin'?

Built With:
Javascript | HTML | CSS | REST API
Testing Technologies:
Mocha & Chai

Abstract:

This is a recipe website that uses the fetch API to display information about a variety of recipes. This web app also allows searching recipes by name, ingredients, tags, and allows users to save their favorite recipes! This is a collaborative project, created to ensure cohesive usage of newly learned concepts such as Rest APIs, and array prototype methods to implement CRUD functionality.

User Stories:

• Users can click on a recipe to view more information.
• Users are able to save and delete recipes from the main landing page as well as from inside the recipe display.
• Users are able to view a graph representing which recipes are most popular across multiple users.

Technical pointers:

• The data for this website is fetched from an API endpoint.
• Recipe display is responsive across, small, medium, and large screens, including cell phones and tablets.
• Testing was implemented with the Mocha framework and Chai library.

Installation Instructions

• In order for this application to function, it will require accessing both our backend server repository as well as our front-end repository.

Client App Setup

• Open a separate tab in your terminal using command T
• Fork this repository.
• Clone it to your local machine using the command: git clone git@github.com:lauraguerra1/whats-cookin.git.
• Run the command: cd whats-cookin
• Run the command: npm install
• Run the command: npm start
• Once the modules have finished compiling, enter http://localhost:8080/ into your browser to see the live web page.

Preview of App:

Cell Phone Display:

Desktop Display:

Context:

• Mod 2, Week 2 - Week 4:

  • We are current students of Turing School of Software & Design.
  • Turing is a 7 month program, which offers a total of 4 modules.
  • This project was completed during the second module that the program has to offer.

• A total of approximately 80 hours was spent on this project between 3 contributors.

Contributors:

• Laura Garcia Guerra

• Matt Fowler

• Taranveer Singh

Learning Goals:

• Use object and array prototype methods to perform data manipulation.
• Create a user interface that is easy to use and clearly displays information.
• Write DRY, reusable code that follows SRP and trends toward function purity
• Implement a robust testing suite using Test Driven Development.
• Make network requests (using fetch API) to create, read, update, and destroy data.
  • (Apply newly learned concepts including GET, POST, PATCH, and DELETE network requests)
• Collaborate productively and professionally as a team.
• Implement the use of a project board, task delegation tickets, and thorough code reviews.