Blog Platform

A Blogspot-inspired blogging platform built with React and Node.js. This application allows users to create, read, update, and delete blog posts, as well as interact with other users through comments.

Features

• User authentication (register, login, logout)
• Create, edit, and delete blog posts
• Comment on posts
• Categorize posts with categories and tags
• Search functionality
• User profiles
• Responsive design

Tech Stack

Frontend

• React.js
• React Router for navigation
• CSS for styling

Backend

• Node.js
• Express.js
• In-memory data store (can be replaced with a database)
• JWT for authentication

Project Structure

blog-platform/
├── client/                  # React frontend
│   ├── public/              # Static files
│   └── src/
│       ├── components/      # UI components
│       ├── pages/           # Page components
│       ├── context/         # React context for state
│       ├── utils/           # Utility functions
│       └── styles/          # CSS styles
├── server/                  # Node.js backend
│   ├── controllers/         # Request handlers
│   ├── models/              # Data models
│   ├── routes/              # API routes
│   ├── middleware/          # Express middleware
│   └── data/                # In-memory data storage
└── shared/                  # Shared code between client/server

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)

Installation

1. Clone the repository

git clone <repository-url>
cd blog-platform

2. Install dependencies for the server

cd server
npm install

3. Install dependencies for the client

cd ../client
npm install

Running the Application

1. Start the server (from the server directory)

npm run dev

2. Start the client (from the client directory)

npm start

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

API Endpoints

Posts

• GET /api/posts - Get all posts
• GET /api/posts/:id - Get a single post
• POST /api/posts - Create a new post
• PUT /api/posts/:id - Update a post
• DELETE /api/posts/:id - Delete a post
• GET /api/posts/search/:query - Search posts

Users

• GET /api/users - Get all users
• GET /api/users/:id - Get a single user
• POST /api/users/register - Register a new user
• POST /api/users/login - Login user

Comments

• GET /api/comments/post/:postId - Get all comments for a post
• POST /api/comments - Create a new comment
• PUT /api/comments/:id - Update a comment
• DELETE /api/comments/:id - Delete a comment

Categories

• GET /api/categories - Get all categories
• POST /api/categories - Create a new category

Tags

• GET /api/tags - Get all tags
• POST /api/tags - Create a new tag

Future Improvements

• Add a real database (MongoDB, PostgreSQL, etc.)
• Implement image upload functionality
• Add rich text editor for post creation
• Implement social sharing
• Add analytics dashboard
• Implement email notifications
• Add pagination for posts and comments

Deployment

The application is configured for deployment to Microsoft Azure. For detailed deployment instructions, see:

• Azure Deployment Guide - Step-by-step instructions for deploying to Azure App Service
• GitHub Actions Workflow - Automated deployment using GitHub Actions

Deployment Options

1. Manual Deployment:

   • Use the deploy.js script to build and package the application
   • Deploy the package to Azure App Service manually

2. Continuous Deployment with GitHub Actions:

   • Set up GitHub Actions to automatically deploy to Azure on code push
   • Configure the necessary secrets in your GitHub repository

Environment Variables

For production deployment, the following environment variables should be set:

• NODE_ENV: Set to production
• PORT: The port on which the server will run (default: 8080)
• REACT_APP_API_URL: The URL of the API (for the frontend)