Back to Projects

Creating a website to track homebrew recipes using Flask and React.

A web application which allows users to create and share homebrewing recipes.

Visit Brewcipes at https://www.brewcipes.com
See the test codebase at https://github.com/anorum/BeerNotes

Skills


ReactJS


Styled Components


Javascript


HTML


Git


Flask


Python


ElasticSearch

The Problem

Most homebrewing websites are fantastic! However, they cost money and often times have so many features built in that it’s tough for beginners to even know where to start. They are also not always the most user-friendly UIs to work in.

A huge motivation for this project was to practice and learn React JS!

The Solution

Leveraging back-end Python and front-end React skills to create a new website for homebrewing recipes. Featuring a easy UI, user profiles, and simple approach to recipe creation.

Key Features:

  • User Profiles
  • Private or Public Recipes
  • Reactive Recipe Attributes
  • Use existing ingredients or create your own
  • Search for Recipes by Fermentables, Hops, Yeast, or ABV
  • Add Mash Steps
  • Add General Instructions

The Tech Stack

Front-End

The front-end is built in React JS. More specifically the static site generator NextJS (http://nextjs.org).

This was actually the first React application I ever built (I usually use Vue). I can say I will be using React again! I love the everything Javascript mentality.

Key Libraries Used

  • Styled Components- To make components pretty.
  • ReactiveSearch- Recipes search page and linking to ElasticSearch cluster.
  • NextJS- Page generation, cache manager, and structure.

Back-End

The backend is an API built in Python Flask. The database is Postgres. Search is ElasticSearch hosted on Bonsai.io.

Key Libraries Used

  • Flask Restful - To create the API resources and endpoints.
  • SQLAlchemy - Data model generation for postgres database.
  • Marshmallow - Serialization of SQLAlchemy models.
  • JWT-Extended - User Authentication via JWT cookies.
  • Flask-Migrate - Database version control and auto-migrations.
  • Elasticsearch_dsl - Elasticsearch schema generation at deployment. Provides interface to bonsai.io elasticsearch cluster.
  • AWS SES - Email for user confirmation and password reset.

Hosting

Code is hosted on separate Github repositories (one for front-end and one for back-end). A push to master auto deploys to Heroku.

Initially I had the application hosted on a full AWS solution (Elastic Beanstalk, ElasticSearch, RDS), but Heroku significantly cheaper (by cheaper.. I mean free).