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
Table of Contents |
---|
1. Features |
2. Installation |
3. Technical Implementation Details |
4. Future Features |
5. Contact |
6. Special Thanks |
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:
- Clone this repository
git clone https://github.com/nicopierson/hotpotato.git
- Install Pipfile dependencies and create the virtual environment
pipenv install
- Install npm dependencies for the
/react-app
cd react-app
npm install
- In the
/
root directory, create a.env
based on the.env.example
with proper settings - Setup your PostgreSQL user, password and database and ensure it matches your
.env
file - Start the flask backend in the
/
root directory
flask run
- 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
-
Search - search recipes or chefs
-
Second - second feature description
-
Third - third feature description