/whats-cookin

Primary LanguageJavaScript

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:

whats cookin gif for cell phone


Desktop Display:

whats-cookin gif

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:

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.