PubLink - Social News Web App

A simple, clean social news web application where users can submit and share links. Built with Express.js backend and vanilla JavaScript frontend.

Features

• 📝 Submit new links with title, URL, and author
• 🔗 Automatic URL formatting (adds http:// if missing)
• 💬 Real-time success/error notifications
• 📱 Responsive Bootstrap-based design
• 🎨 Clean, modern UI with yellow theme
• ⚡ Fast and lightweight

Tech Stack

• Backend: Node.js, Express.js
• Frontend: Vanilla JavaScript, HTML5, CSS3
• UI Framework: Bootstrap 3.3.7
• File Upload: Multer
• Body Parsing: body-parser

Project Structure

url_app/
├── server.js          # Express server and API endpoints
├── package.json       # Node.js dependencies
├── public/            # Static frontend files
│   ├── index.html     # Main HTML page
│   ├── app.js         # Frontend JavaScript logic
│   ├── script.js      # Additional scripts (unused)
│   └── style.css      # Custom styles
└── README.md          # This file

Installation

1. Clone the repository:

git clone <your-repo-url>
cd url_app

2. Install dependencies:

npm install

3. Start the server:

node server.js

4. Open your browser and navigate to:

http://localhost:3000

Usage

Adding a New Link

1. Click the "Submit" button in the navigation bar
2. Fill out the form with:
   • Title: The title of your link
   • URL: The web address (http:// will be added automatically if missing)
   • Author: Your name or username
3. Click "Submit" to add the link
4. The link will appear at the top of the page

Example Links

The app comes with two example links pre-loaded:

• "Hacker" by HeroMan (hero.com)
• "Book" by BookMan (book.com)

API Endpoints

POST /addlink

Accepts form data or JSON to add a new link.

Request Body:

{
  "title": "Example Link",
  "url": "example.com",
  "author": "John Doe"
}

Response:

{
  "message": "The link Example Link has been successfully added!"
}

Code Overview

Backend (server.js)

• Express.js server with CORS enabled
• Handles POST requests to /addlink
• Serves static files from the public directory
• Logs submitted links to console

Frontend (app.js)

• Link Class: Represents a link with title, URL, and author
• Message Class: Handles success/error notifications
• Form Handling: Dynamic form creation and submission
• DOM Manipulation: Adds new links to the page dynamically