Hotpotato

Hotpotato is a recipe portfolio App that assists users to discover and comment new recipes. It is a fullstack React App made with a Redux state manager and a backend using Python, Flask, SQL-Alchemy, and PostgresSQL.

• View the Hotpotato App Live

• It is modeled after the Behance App

• Contains recipes for Vegetarians, Vegans, and Gluten-Free diets.

• Reference to the Hotpotato Wiki Docs

Technologies

Features

Feed Page

Hotpotato feed displays all recipes and chefs Discover and search for new recipes

• Example - ./readme_assets/sign_up.jpg

Sign In and Sign Up

View Recipe

Single recipe of name, photos, ingredients, directions, and comments

Edit Recipe Ingredients

Edit a recipe direction(s) in the database

Edit Recipe Directions

Edit a recipe direction(s) in the database

Comment

Users can add comments for a recipe

Edit and Delete Comment

Edited Comment is highlighted and can be deleted

Add Recipe

Add a new recipe to the database

Installation

To build/run project locally, please follow these steps:

1. Clone this repository

git clone https://github.com/nicopierson/hotpotato.git

2. Install Pipfile dependencies and create the virtual environment

pipenv install

2. Install npm dependencies for the /react-app

cd react-app
npm install

3. In the / root directory, create a .env based on the .env.example with proper settings
4. Setup your PostgreSQL user, password and database and ensure it matches your .env file
5. Start the flask backend in the / root directory

flask run

6. Start the frontend in the /react-app directory

npm start

Technical Implementation Details

First Implementation

First Description

Code snippet is shown here:

const [state, setState] = useState(false);

useEffect(() => {

}, [state]);

Second Description

return (
    <div>
      {show &&
         <Recipe 
            setState={setState}
          />
      }
      {!show &&
         <EditRecipe 
            setState={setState}
         />
      }
    </div>
  );

Second Implementation

Second Description

Code snippet is shown here:

const [state, setState] = useState(false);

useEffect(() => {

}, [state]);

Future Features

1. Search - search recipes or chefs

2. Second - second feature description

3. Third - third feature description

Contact

Casey Tuer

• [email protected]
• LinkedIn
• AngelList
• Github

Leslie Owiti

• [email protected]
• LinkedIn
• AngelList
• Github

Nico Pierson

• [email protected]
• LinkedIn
• AngelList
• Github

Wes Trinh

• [email protected]
• LinkedIn
• AngelList
• Github

Special Thanks

• Any Special Thanks
• Mentors who have given me their time and effort: Zach, Ed, and Javier