AI-Powered Blogging Platform

AI-Powered Blogging Platform (Academic Project)

This full-stack blogging platform was developed as a college assignment to demonstrate end-to-end application architecture using React, Flask, and MongoDB.

The project showcases user authentication, API integration, and modular frontend/backend design.

Features

• Full User Authentication: Secure user registration and login system.
• Post Management: Users can create, read, and manage their own blog posts.
• Live Database: All data is stored and retrieved in real-time from a cloud-based MongoDB Atlas database.
• React Frontend: A modern, component-based single-page application (SPA) for a smooth user experience.
• AI Content Tools (Demonstration Mode):
  • AI-powered text summarization.
  • Content polishing for structure and clarity.
  • Spelling and grammar correction.

Tech Stack

• Backend: Python, Flask, PyMongo
• Frontend: React (with Vite), CSS3
• Database: MongoDB Atlas

---

Project Status: Academic Demonstration Build

This repository represents a college submission project focused on demonstrating full-stack architecture and API-driven design.

The application was fully functional in a local environment with:

• User authentication
• MongoDB integration
• Post creation and retrieval

For deployment simplicity and cost considerations:

• The frontend is hosted via GitHub Pages
• Backend and MongoDB connections are not deployed publicly
• AI features are shown using mocked/demo endpoints

However, the live connections to external Generative AI APIs have been replaced with mocked endpoints in the backend. This was a strategic decision for two main reasons:

1. Reliability: To ensure a fast, consistent, and reliable demonstration that is not dependent on the variable response times of external APIs.
2. Cost and Quota Management: To bypass the strict rate limits, request size limitations, and potential costs associated with the free tiers of powerful AI models.

Additionally, the application is designed to run on the free tier of MongoDB Atlas, which has a data storage limit of 512 MB.

---

Key Learning Outcomes

• Gained hands-on experience building a full-stack application with clear separation between frontend (React) and backend (Flask).
• Learned how client-side applications communicate with backend services using REST APIs.
• Implemented user authentication flow and understood session-based application design.
• Worked with MongoDB for storing and retrieving structured data in a real-time environment.
• Built a modular React SPA using reusable components and state-driven UI updates.
• Understood environment configuration using .env files and local virtual environments.
• Practiced integrating external-style APIs (AI features via mocked endpoints) into an application workflow.
• Learned the basics of deployment, static hosting (GitHub Pages), and the challenges of hosting full-stack systems.
• Improved project structuring, folder organization, and documentation practices.

---

Local Setup and Installation

To run this project on your local machine, you will need two terminal windows.

1. Backend Setup:

# Navigate to the backend folder
cd backend

# Create and activate a virtual environment
python3 -m venv venv
source venv/bin/activate

# Install the required packages
pip install -r requirements.txt

# Create a .env file and add your MongoDB URI
# MONGODB_URI="your_mongodb_connection_string"

# Run the backend server
python3 app.py

2. Frontend Setup:

# Navigate to the frontend folder
cd frontend

# Install the required packages
npm install

# Run the frontend development server
npm run dev

Created by Deepak Battula