Giter Club home page Giter Club logo

back-end-inspiration-board's Introduction

Inspiration Board:

This is a website that allows you to create inspirational boards with notes.

Created using Javascript/React for front-end and Python for back-end.

Demo link: http://ice-ice-inspo-board.herokuapp.com

Canva Slide Presentation: https://www.canva.com/design/DAEi_mbu8HI/ivOCNb491BLizeBCBZDVMg/view?utm_content=DAEi_mbu8HI&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink

Screen Shot 2022-01-06 at 9 00 21 PM

Screen Shot 2022-01-06 at 8 51 37 PM

Screen Shot 2022-01-06 at 8 52 07 PM

Feature Set

  • Create new Message Boards
  • Create new inspration cards for each board
  • Add likes to each card
  • Delete cards from Message Boards
  • Sends notification on slack when someone posts a new board and or card

Managing Dependencies

Inspiration Board relies on:

  - React 
  - Axios
  - Flask
  - Yarn
  - SQLAlchemy

Front-end Environment & Set-up

In the project directory, you can run:

$ npx create-react-app .

Add axios

Install axios:

$ yarn add axios

Creating a .env File

Create a file named .env.

The front-end layer needs to send API requests to the back-end layer. In order to handle this, the front-end layer repo must include a .env file with this line:

REACT_APP_BACKEND_URL=http://localhost:5000

Use this environment variable to send your API requests. You can read it by using the expression process.env.REACT_APP_BACKEND_URL. For example, we may use it like this in any component:

axios.get(`${process.env.REACT_APP_BACKEND_URL}/ice-ice-inspo-board`, {
    // ...

This will make Heroku deployment easier.

Commit and Push

Commit and push your files to your repo, especially including the package.json file!

Back-End Environment & Set-up

Setup

The goal for setup is to cover all of the set up needed at the beginning of this project, which includes:

  1. Forking and cloning
  2. Managing dependencies
  3. Setting up development and test databases
  4. Setting up a .env file
  5. Running $ flask db init
  6. Running $ flask run and $ FLASK_ENV=development flask run

Requirements

Fork and Clone

  1. Fork this project repo to your own personal account
  2. Clone this new forked project

Managing Dependencies

Create a virtual environment:

$ python3 -m venv venv
$ source venv/bin/activate
(venv) $ # You're in activated virtual environment!

Install dependencies (we've already gathered them all into a requirements.txt file):

(venv) $ pip install -r requirements.txt

Setting Up Development and Test Databases

Create a database:

  1. A development database named your_database_name

Creating a .env File

Create a file named .env.

Create two environment variables that will hold your database URLs.

  1. SQLALCHEMY_DATABASE_URI to hold the path to your development database
  2. [OPTIONAL] SQLALCHEMY_TEST_DATABASE_URI to hold the path to your development database

Your .env may look like this:

SQLALCHEMY_DATABASE_URI=postgresql+psycopg2://postgres:postgres@localhost:5432/your_database_name

back-end-inspiration-board's People

Contributors

mairandomness avatar tildeee avatar julianadecarvalho avatar leilaniallen avatar

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.