Message Board Application

This is a React and Flask-based Message Board application that allows users to post messages and delete them. The application also integrates with MetaMask for user identification and Pinax API for data integration.

Features

Post messages with associated MetaMask ID
Delete messages
MetaMask integration for user authentication
Display user profile data from Plurality Connect
Fetch and display data from Pinax API

Prerequisites

Node.js and npm installed
Python and Flask installed
MetaMask browser extension installed

Installation

Backend (Flask)

Clone the repository:

git clone https://github.com/yourusername/message-board-app.git
cd message-board-app

Set up a virtual environment:

python3 -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`

Install the required packages:
```
pip install -r requirements.txt
```
Run the Flask server:
```
python app.py
```

Frontend (React)

Navigate to the client directory:
```
cd client
```
Install the dependencies:
```
npm install
```
Run the React development server:
```
npm start
```

Usage

Open your browser and navigate to http://localhost:3000.
Connect your MetaMask wallet.
Post a message using the form provided.
Delete messages using the delete button next to each message.

API Endpoints

Messages

GET /api/messages - Retrieve all messages
POST /api/messages - Add a new message
DELETE /api/messages/<message_id> - Delete a message

Substreams (Pinax API)

POST /api/substreams - Retrieve data from the Pinax API

Environment Variables

REACT_APP_PINAX_API_KEY - Your Pinax API key

File Structure

message-board-app/ ├── client/ # Frontend React application │ ├── public/ # Public assets │ ├── src/ # Source files │ │ ├── components/ # React components │ │ │ ├── AddMessageForm.js # Component for adding a new message │ │ │ ├── DeleteMessageButton.js # Component for deleting a message │ │ │ ├── MessageForm.js # Form for submitting messages │ │ │ ├── Messages.js # Displays the list of messages │ │ │ ├── PluralityConnect.js # Component for integrating Plurality Connect │ │ │ ├── SubstreamsData.js # Component for fetching and displaying Pinax API data │ │ ├── App.js # Main App component │ │ ├── index.js # Entry point of the React application │ ├── package.json # npm package configuration ├── app.py # Flask backend application ├── requirements.txt # Python package dependencies └── README.md # Project documentation