Anonymous Bulletin Board

An anonymous bulletin board where users can post messages on a canvas that other users can see in real-time.

Features

• 🎨 Interactive canvas for posting messages
• 💬 Real-time message updates using WebSocket
• 🎨 Customizable text colors
• 📱 Responsive design
• 🔄 Drag messages around the canvas
• 🗄️ Persistent message storage with PostgreSQL

Local Development

Prerequisites

• Node.js (v14 or higher)
• PostgreSQL database

Setup

1. Install dependencies:

npm install

2. Create a .env file based on .env.example:

cp .env.example .env

3. Update the .env file with your PostgreSQL connection string:

DATABASE_URL=postgresql://user:password@localhost:5432/bulletin_board

4. Create the PostgreSQL database:

createdb bulletin_board

5. Start the server:

npm start

For development with auto-reload:

npm run dev

6. Open your browser and navigate to http://localhost:3000

Deployment to Render.com

Option 1: Using render.yaml (Recommended)

1. Push your code to a GitHub repository
2. In Render.com dashboard:
   • Click "New +" → "Blueprint"
   • Connect your GitHub repository
   • Render will automatically detect the render.yaml file
   • Click "Apply" to deploy

Option 2: Manual Setup

1. Create PostgreSQL Database:

   • In Render.com dashboard, click "New +" → "PostgreSQL"
   • Choose a name (e.g., "bulletin-board-db")
   • Select the free plan
   • Copy the "Internal Database URL"

2. Create Web Service:

   • Click "New +" → "Web Service"
   • Connect your GitHub repository
   • Settings:
     • Name: anonymous-bulletin-board
     • Environment: Node
     • Build Command: npm install
     • Start Command: npm start
     • Environment Variables:
       • NODE_ENV: production
       • DATABASE_URL: (paste the Internal Database URL from step 1)
   • Click "Create Web Service"

3. Wait for deployment to complete!

Usage

1. Click anywhere on the canvas to post a message
2. Type your message in the modal
3. Choose a text color (optional)
4. Click "Post Message" or press Enter
5. Your message will appear on the canvas and be visible to all users in real-time
6. You can drag messages around the canvas to reposition them

Tech Stack

• Backend: Node.js, Express
• Real-time: Socket.io
• Database: PostgreSQL
• Frontend: HTML5 Canvas, Vanilla JavaScript
• Deployment: Render.com

License

MIT