Project2 - Clean Fridge App

Requirements

data from an API.
Use React
at least 2 Routes, using React Router.
at least 5 Components, within a file structure that make sense.
Mobile-first and implement a responsive design
Use React Hooks
Deploy on GitHub Pages.
Frequent git commits
Professional ReadMe file
An approved Project Proposal (the worksheet).
Clean up your files:
- naming conventions
  - camelCase for JavaScript
  - kebab-case for CSS class names
  - Removed all console.log's
  - Did you prettier your file manually or using VS Code's prettier?

Project Description

Clean out your fridge app, takes a list of ingredients and searches a database for recipes that use those ingredients.

API

MealDB API
- by ingredient

Wireframes

Minimum Viable Product (MPV/Post MVP)

MVP

App
Main
Input
List
Recipe Cards
Results

Post MVP

Select and Save, or Discard Recipe Cards
Header
Synonyms Api to make search more enclusive
About

Components

App
List
Resaults
Recipe Cards

Component	Priority	Estimated Time	Time Invetsted	Actual Time
MVP
App	H	2hr	-	-
Main	H	2hr	-	-
Input	H	1hr	-	-
List	H	3hr	-	-
Recipe Cards	H	3hr	-	-
Results	H	2hr	-	-
Post MVP
Select Cards	L	1hr	-	-
Save Cards	L	2hr	-	-
Discard Recipes	L	2hr	-	-
Header	L	1hr	-	-

Actual timeframe

Component	Priority	Estimated Time	Time Invetsted	Actual Time
MVP
File structure and linking	H	1hr	45min	45min
	-	-	-	-

Additional Libraries

Code Snippet

📋 List of API's

Pull data into the application using an API

Below is a non-exhaustive list of some free API's you can use. There are many API's out there, however, so if you find one not on this list that you'd like to use, feel free! Please note that some may require signing up for an API key (e.g. the Marvel API).

Games

https://igdb.github.io/api/

Your code must:

Be properly indented.
Be written with semantic, camelCase JavaScript variable names.
Be written with kebab-case (dashes) CSS class names.
Contain no console.log() or commented out code in final version.
Use only React for DOM manipulation.
No pre-loaded create-react-app files or code.

Necessary Deliverables

A Completed Project Proposal:

Refer to the project worksheet file in this repo for structuring your Proposal.

For the project:

A git repository hosted on GitHub, with a link to your hosted project, and frequent commits dating back to the very beginning of the project (YOUR APP SHOULD BE LOCATED IN A SEPARATE STANDING REPO. DO NOT build your app in this repository. YOU MUST initiate a new repo on your GitHub account.)

Tips

Read the following articles posted by previous students into how they planned and organized their thoughts into building a unit project.

REACT.js : A Haunting by Sami Schonefeld
how-i-built-my-first-obama-themed-javascript-game by Sarah Currey
Commit early, commit often: Don't be afraid to break something because you can always go back in time to a previous version.

ijkeller / clean-fridge-react-api Goto Github PK

clean-fridge-react-api's Introduction