Blog Frontend

A modern, full-stack blog application built with React, Node.js, Express, MongoDB, and Firebase. This project supports real-time updates, user authentication, commenting, and upvoting features, providing a dynamic and interactive blogging platform.

Table of Contents

• Features
• Tech Stack
• Project Structure
• Installation
• Configuration
• Running the Application
• Usage
• Contributing
• License

Features

• User Authentication: Secure sign-up, login, and logout using Firebase Authentication.
• Real-Time Updates: Firebase enables real-time updates for comments and upvotes.
• Blog Management: Create, read, update, and delete (CRUD) blog posts.
• Commenting System: Users can comment on blog posts with real-time synchronization.
• Upvoting System: Users can upvote posts, with vote counts updated in real time.
• Responsive Design: Built with React and styled for seamless use across devices.

Tech Stack

• Frontend: React, JavaScript, HTML, CSS
• Backend: Node.js, Express
• Database: MongoDB (for storing blog posts, comments, and user data)
• Real-Time & Authentication: Firebase (Firestore for real-time data, Firebase Authentication for user management)
• Deployment: (Add deployment details if applicable, e.g., Vercel, Heroku, or Firebase Hosting)

Project Structure

blog_frontend/
├── public/                   # Static assets (images, favicon, etc.)
├── src/                      # React source code
│   ├── components/           # Reusable React components
│   ├── pages/                # Page components (Home, Blog, Login, etc.)
│   ├── context/              # React context for state management
│   ├── firebase/             # Firebase configuration and utilities
│   ├── styles/               # CSS/SCSS files for styling
│   ├── App.js                # Main App component
│   └── index.js              # Entry point for React
├── server/                   # Backend code
│   ├── routes/               # Express routes for API endpoints
│   ├── models/               # MongoDB schemas/models
│   ├── middleware/           # Custom middleware (e.g., authentication)
│   └── server.js             # Main Express server file
├── .env                      # Environment variables (not tracked in Git)
├── package.json              # Project dependencies and scripts
└── README.md                 # Project documentation

Installation

Follow these steps to set up the project locally:

1. Clone the Repository:

   git clone https://github.com/imRahul05/blog_frontend.git
   cd blog_frontend
   

2.Install Frontend Dependencies: npm install

3.Install Backend Dependencies: Navigate to the server/ directory and install dependencies: cd server npm install

Configuration Create a .env file in the root directory and add the following environment variables: bash# Backend (server/.env) MONGO_URI=mongodb://localhost:27017/blog_db PORT=5000

Frontend (root .env)

REACT_APP_FIREBASE_API_KEY=your_firebase_api_key REACT_APP_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain REACT_APP_FIREBASE_PROJECT_ID=your_firebase_project_id REACT_APP_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id REACT_APP_FIREBASE_APP_ID=your_firebase_app_id

Replace the Firebase variables with your actual Firebase configuration values. Running the Application

Start the Backend Server: In the server/ directory, run: bashnpm start The Express server will start on http://localhost:5000 (or the port specified in .env). Start the Frontend: In the root directory, run: bashnpm start The React app will start on http://localhost:3000. Access the Application: Open your browser and navigate to http://localhost:3000 to view the blog application.

Usage

Sign Up/Login: Create an account or log in using Firebase Authentication. Create a Blog Post: Authenticated users can create new blog posts via a form. Commenting: Add comments to blog posts, which are synced in real time using Firestore. Upvoting: Click the upvote button to increase a post's vote count, updated in real time. View Blogs: Browse all blog posts on the homepage, with options to filter or sort.

Contributing Contributions are welcome! To contribute:

Fork the repository. Create a new branch (git checkout -b feature/your-feature). Make your changes and commit (git commit -m "Add your feature"). Push to your branch (git push origin feature/your-feature). Open a Pull Request.

Please ensure your code follows the project's coding standards and includes relevant tests.