All Projects → nicopierson → hotpotato

nicopierson / hotpotato

Licence: other
Hotpotato is a space for chefs to display their creations. Follow your favorite chef. Like your favorite recipes. And find the latest gluten-free, vegetarian, and multi-culinary recipes.

Programming Languages

python
139335 projects - #7 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to hotpotato

portfolio
My personal portfolio website, proudly built with Next.js, TypeScript and Tailwind
Stars: ✭ 165 (+1169.23%)
Mutual labels:  portfolio
stream2segment
A Python project to download, process and visualize medium-to-massive amount of seismic waveforms and metadata
Stars: ✭ 18 (+38.46%)
Mutual labels:  sqlalchemy
nutri.gram
Nutrition is the main source of life and although it has been our secondary instinct to check for nutritional value in the food we eat, the effect any diet has on our body and health is consequential. From the fact which connotes the value of nutrition in our diet, springs the idea of nutri.gram. nutri.gram is a mobile application that scans the…
Stars: ✭ 21 (+61.54%)
Mutual labels:  food
product crawler
The Open Source Search Engine for Product Components
Stars: ✭ 23 (+76.92%)
Mutual labels:  food
steren
My personal website
Stars: ✭ 36 (+176.92%)
Mutual labels:  portfolio
Portfolio
I have created this portfolio in React and used tailwind for styling. In this portfolio, I have my 5 best projects to display. A contact form, which is in progress to post. You can email me through my email id which is at the bottom after the contact form. All the social icons are connected to my social profiles.
Stars: ✭ 16 (+23.08%)
Mutual labels:  portfolio
argon-portfolio
The latest and greatest portfolio site leveraging nuxt.js and argon design system
Stars: ✭ 16 (+23.08%)
Mutual labels:  portfolio
framequery
SQL on dataframes - pandas and dask
Stars: ✭ 63 (+384.62%)
Mutual labels:  sqlalchemy
AMYs-Portfolio
This project is for HTML & CSS practice. AMY is a fictional character. She is a freelance web designer. We made this nice portfolio for her with mainly HTML & CSS. Though we used few lines of js but the main purpose of this project is to practice HTML & CSS
Stars: ✭ 68 (+423.08%)
Mutual labels:  portfolio
GardenHub
Improve urban food distribution by connecting community gardeners with pickers 🍆
Stars: ✭ 15 (+15.38%)
Mutual labels:  food
telethon-session-sqlalchemy
SQLAlchemy backend for Telethon session storage
Stars: ✭ 34 (+161.54%)
Mutual labels:  sqlalchemy
Syk-Houdeib
My full front-end portfolio; web development skills, examples of my projects, contact links, and a bit about me.
Stars: ✭ 12 (-7.69%)
Mutual labels:  portfolio
fastapi-boilerplate
FastAPI boilerplate for real world production
Stars: ✭ 145 (+1015.38%)
Mutual labels:  sqlalchemy
theodorusclarence.com
💠 Personal website and blog made using Next.js, TypeScript, Tailwind CSS, MDX Bundler, FaunaDB, and Preact.
Stars: ✭ 205 (+1476.92%)
Mutual labels:  portfolio
gsurma.github.io
Greg's Portfolio 🌎.
Stars: ✭ 24 (+84.62%)
Mutual labels:  portfolio
execute-engine
基于Ansible API的任务执行引擎,支持adhoc和playbook两种任务的执行
Stars: ✭ 18 (+38.46%)
Mutual labels:  sqlalchemy
reactant
Generate code for "models, views, and urls" based on Python type annotations. Supports Django REST, SQLAlchemy, Peewee.
Stars: ✭ 14 (+7.69%)
Mutual labels:  sqlalchemy
codebadges
Code badges to display your progress on FreeCodeCamp, CodeSchool, Codecademy, CodeWars, GitHub etc.
Stars: ✭ 24 (+84.62%)
Mutual labels:  portfolio
foodies
A clean MVVM architecture android application
Stars: ✭ 14 (+7.69%)
Mutual labels:  food
reactjs-portfolio
Welcome to my portfolio react.js repository page.
Stars: ✭ 109 (+738.46%)
Mutual labels:  portfolio

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

Sign In and Sign Up

Sign Up Login

Feed Page

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

Sort Recipes in Feed

Sort Recipes based on a category Feed Sort by Category

View Recipe

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

Add Recipe

Add a new recipe to the database Add Recipe Cancel adding recipe Cancel Add Recipe

Create, Read, Update, Delete Recipe Preparations

View preparations to make recipe Recipe Preparations Edit and Add a recipe preparation(s) in the database Edit Recipe Preparations Add Recipe Preparations

Create, Read, Update, Delete Recipe Ingredients

View Ingredients to make recipe Recipe Ingredients Edit and Add a recipe preparation(s) in the database Edit Recipe Ingredients Add Recipe Ingredients

Comment

Users can add comments for a recipe Comments

Follow

Follow or unfollow a chef

follow unfollow

Installation

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

  1. Clone this repository
git clone https://github.com/nicopierson/hotpotato.git
  1. Install Pipfile dependencies and create the virtual environment
pipenv install
  1. Install npm dependencies for the /react-app
cd react-app
npm install
  1. In the / root directory, create a .env based on the .env.example with proper settings

  2. Setup your PostgreSQL user, password and database and ensure it matches your .env file

  3. In the root folder, create the database by running in the terminal:

flask db create
  1. In the root folder, migrate tables to the database by running in the terminal:
flask db migrate
  1. In the root folder, seed the database by running in the terminal:
flask seed all
  1. Start the flask backend in the / root directory
flask run
  1. Start the frontend in the /react-app directory
npm start

Technical Implementation Details

Follow

Follow feature was a key element for our project and we implemented by creating a self-referential table from the Users table. It was also necessary to add class methods to follow and to unfollow a user or chef. It was challenging to integrate the table and append or remove users to the table.

Part of our user model is shown below:

follows = db.Table(
  "follows",
  db.Column("user_id_follow_owner", db.Integer,
            db.ForeignKey("users.id")),
  db.Column("user_id_follower", db.Integer, db.ForeignKey("users.id"))
)
followers = db.relationship(
  "User",
  secondary=follows,
  primaryjoin=(follows.c.user_id_follow_owner == id),
  secondaryjoin=(follows.c.user_id_follower == id),
  backref=db.backref("follows", lazy="dynamic"),
  lazy="dynamic"
)

def follow(self, user):
  if not self.is_following(user):
    self.follows.append(user)
    return user
  return False

def unfollow(self, user):
  if self.is_following(user):
    self.follows.remove(user)
    return user
  return False

In order to connect the backend to the frontend, we connected the follows api routes to update the following in the redux store. When the Follow component button is clicked, either a removeFollowing or createFollowing dispatch action is called to update the follow and profile slice of state in redux store. As a result the Profile page will re-render because React notices a change in the profile state and updates the followers attribute and the follow button.

export const removeFollowing = (id) => async (dispatch) => {
    const response = await fetch(`/api/follows/users/${id}`, {
        method: 'DELETE',
    });

    if (response.ok) {
        await dispatch(deleteFollowing(id));
        await dispatch(getProfile(id));
        return response;
    } else {
        return ['An error occurred. Please try again.']
    }
}

export const createFollowing = (id) => async (dispatch) => {
    const response = await fetch(`/api/follows/users/${id}`, {
        method: 'POST',
    });

    if (response.ok) {
        const { following } = await response.json();
        await dispatch(addFollowing(following));
        await dispatch(getProfile(id));
        return following;
    } else {
        return ['An error occurred. Please try again.']
    }
}

Integrating React Carousel

In order to show more than main thumbnail, we integrated a third-party react component.

Code snippet is shown here:

<Carousel 
  className='recipe-carousel' 
  renderArrow={arrows} 
>
  { getPhotos()?.map(recipe => (
    <img 
      src={recipe.img_url} 
      alt={recipe} 
      key={recipe.id} className='recipe-carousel-images'
    />
  ))}

  { getVideos()?.map(video => (
      <ReactPlayer url={video}></ReactPlayer>
    ))
  }

  {addVideo &&
    <ReactPlayer url={videoUrl}></ReactPlayer>
  }
</Carousel>

Future Features

  1. Search - search recipes or chefs

  2. Edit Profile - users edit profile info and add banner

  3. Add Tags - add tags to recipes and profile

Contact

Casey Tuer

[email protected]

Leslie Owiti

[email protected]

Nico Pierson

[email protected]

Wes Trinh

[email protected]

Special Thanks

  • Mentors who have given us their time and effort: Zach, Ed, and Javier
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].