Code Monkey home page Code Monkey logo

cookbook's Introduction

ABOUT:

A Personal Recipe book that allows you to create recipes and share them with others.

Application Architecture

CookBook's backend was built using Flask for Python. The server has a RESTful API layer for all CRUD actions. It is connected to a PostgreSQL database which leverages the SQLAlchemy ORM for information retrieval and data manipulation. The frontend was built using React and Hooks and uses built-in context for client storage and global state management. All outgoing client requests are proxied to Flask server.

Minimum Viable Product

  • Authentication
  • Recipe Creation
  • Recipe Deletion
  • Image Link

WIP:

  • S3 image upload
  • Reviews
  • Make Recipe Private
  • Editing
  • Favorites

Future Features:

  • Smart Search
  • Ingredients Stock (displaying what you have and when to use by)
  • Mobile App with React Native

Dependencies

Backend

  • Flask
  • SQLAlchemy
  • Flask Login
  • Flask JWT
  • Werkzeug
  • Psycopg2

Frontend

  • React
  • Material UI
  • Bootstrap
  • Moment
  • HTTP Proxy Middleware

Images:

Screenshot 2024-03-12 at 6 46 50 PM Screenshot 2024-03-12 at 6 47 11 PM Screenshot 2024-03-12 at 6 47 25 PM Screenshot 2024-03-12 at 6 47 49 PM Screenshot 2024-03-12 at 6 48 05 PM Screenshot 2024-03-12 at 6 48 29 PM Screenshot 2024-03-12 at 6 48 56 PM

Getting started

  1. Install dependencies

    pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt
  2. Create a .env file based on the example with proper settings for your development environment

  3. Setup your PostgreSQL user, password and database and make sure it matches your .env file

  4. Get into your pipenv, migrate your database, seed your database, and run your flask app

    pipenv shell
    flask db upgrade
    flask seed all
    flask run
  5. To run the React App in development, checkout the README inside the react-app directory.


IMPORTANT! If you add any python dependencies to your pipfiles, you'll need to regenerate your requirements.txt before deployment. You can do this by running:

pipenv lock -r > requirements.txt

ALSO IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on apline-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.


Deploy to Heroku

  1. Create a new project on Heroku

  2. Under Resources click "Find more add-ons" and add the add on called "Heroku Postgres"

  3. Install the Heroku CLI

  4. Run

    heroku login
  5. Login to the heroku container registry

    heroku container:login
  6. Update the REACT_APP_BASE_URL variable in the Dockerfile. This should be the full URL of your Heroku app: i.e. "https://flask-react-aa.herokuapp.com"

  7. Push your docker container to heroku from the root directory of your project. This will build the dockerfile and push the image to your heroku container registry

    heroku container:push web -a {NAME_OF_HEROKU_APP}
  8. Release your docker container to heroku

    heroku container:release web -a {NAME_OF_HEROKU_APP}
  9. set up your database:

    heroku run -a {NAME_OF_HEROKU_APP} flask db upgrade
    heroku run -a {NAME_OF_HEROKU_APP} flask seed all
  10. Under Settings find "Config Vars" and add any additional/secret .env variables.

  11. profit

cookbook

cookbook's People

Contributors

cmolerov avatar

Watchers

 avatar

cookbook's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.