Inspiration Board

The newly developed digital inspiration board platform empowers users to curate their own inspiration boards. Users have the flexibility to create multiple boards, each serving as a canvas for collecting various inspirational content.

Upon selecting a specific board, users gain access to a curated display of cards associated with that particular board. These cards represent the inspirational content gathered on the platform. What makes this platform engaging is the ability for users to express agreement or appreciation for a particular card by giving it a "+1". This feature enhances the collaborative and interactive nature of the platform, allowing users to not only curate their inspiration but also engage with and acknowledge the content shared by others. Overall, this inspiration board provides a user-friendly and dynamic space for creativity, collaboration, and inspiration.

Back-end Repository

This repository contains the back-end code for Inspiration Board, built in Python using the Flask web framework.

Technologies Used:

• Python
• Flask
• PostgreSQL

Setup:

1. Create a virtual environment:

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

2. Install dependencies (already gathered them into a requirements.txt file):

(venv) $ pip install -r requirements.txt

3. Create a database named inspiration_board_development.
4. Create a file named .env.

• Add this environment variable: FLASK_ENV=development
• Also, add the environment variable SQLALCHEMY_DATABASE_URI to hold the path to your database.

5. Create Models

• Board, table name: board
• Card, table name: card
  
  
• Then follow below to initialize database:
  • Run flask db init (Do this before making the model files.)
  • Create the model files for them
  • Update app/__init__.py to import the two models into create_app
  • Run flask db migrate -m "adds Board and Card models"
  • Run flask db upgrade

6. Run $ flask run or $ FLASK_ENV=development flask run

The back-end repository can be found here

Front-end Repository

This repository contains the front-end code for Inspiration Board, built in JavaScript using React and Create React App.

Technologies Used:

• JavaScript
• React
• HTML
• CSS

Setup:

1. Create a new React app

$ npx create-react-app .

2. Install axios

$ yarn add axios

The front-end repository can be found here

Demo

The demo for Insipiration Board can be found here

Fig. This example displays the Inspiration Board web app, showcasing the available boards to choose from or you can add a new board.

- Creating a New Board Fig. This example displays error handling for missing user input in both the title and owner fields when creating a new board.

Fig. This example displays error handling for missing user input in title field when board owner name has been added only when creating a new board.

Fig. This example displays error handling for missing user input in owner field when board board title name has been added only when creating a new board.

- Hiding Board Form

- Cards Fig. This example displays all the cards associated to the selected board- Travel- in order of insertion by default. Each card can be edited, deleted, liked and disliked. When liking a card, users can boost the like count or unboost until zero likes.

- Sorting Cards Fig. This example displays all the cards sorted by the message content in ascending order.

Fig. This example displays all the cards sorted by the likes count in ascending order.

- Creating a New Card Fig. This example displays error handling for missing user input in the message field when creating a new card.

Fig. This example displays error handling for a message that exceeeds 40 characters when creating a new card.