Poly Blog 📝

Poly Blog is a modern blogging platform built using React on the frontend and Node.js with Express on the backend. It offers an interactive and responsive user experience for managing and sharing blog posts. This project demonstrates key web development concepts, including form handling, API interaction, file uploads, and state management using React.

Features ✨

• Create Blog Posts: Easily create new blog posts with a title, summary, content, and optional file uploads. 📤
• Rich Text Editor: Use ReactQuill, a WYSIWYG (What You See Is What You Get) rich text editor, to format the blog content. 🖋️
• Mobile-First Design: The platform is built with responsive web design in mind, ensuring a smooth experience on desktops, tablets, and mobile devices. 📱💻
• Post Creation Flow: After submitting a new post, users are redirected back to the homepage with the updated content. 🔄
• File Upload: Users can upload media files (images, PDFs, etc.) while creating posts, adding a multimedia aspect to the content. 📸

Tech Stack 💻

• Frontend:

  • React (with hooks) ⚛️
  • ReactQuill for rich text editing ✍️
  • CSS for styling (Bootstrap, custom CSS) 🎨
  • React Router for page navigation 🚗
  • Axios for API requests 🔌

• Backend:

  • Node.js with Express 🚀
  • MongoDB for database (or any other DB you choose) 🗄️
  • Multer for handling file uploads 📂
  • CORS for cross-origin requests 🌍

Setup Instructions 🛠️

To get started with Poly Blog, follow these steps:

Frontend (React) 🚀

1. Clone the repository:

   git clone https://github.com/yourusername/poly-blog.git
   cd poly-blog
   

2. Clone the repository:

   git clone https://github.com/yourusername/poly-blog.git
   cd poly-blog
   
   

3. Install the dependencies::

   npm install

4. IStart the React development server::

npm start

Backend (Node.js) ⚡ 🚀

1. Clone the backend repository (if separate from frontend)::

   git clone https://github.com/yourusername/poly-blog-backend.git
   cd poly-blog-backend
   

2. Install the dependencies::

   npm install
   

3. ISet up environment variables: Create a .env file and define the following variables::

   MONGO_URI=<your_mongo_connection_string>
   PORT=4000
   JWT_SECRET=<your_jwt_secret_key>

4. Start the backend server:::

      npm start
   

The backend will be available at http://localhost:4000.

Connecting the Frontend to the Backend 🔗

Ensure that the API endpoints on the backend match the frontend API calls. Modify the URLs in the React components where the fetch or Axios requests are made.

Usage 💡 🔗

Creating a Post: 🔗

Go to the "Create Post" page. 📝
Fill in the title, summary, and content. 🖋️
Optionally, upload an image or other media file. 📸
Click "Create Post" to submit the form. On success, you'll be redirected to the homepage. 🔄

Viewing Posts: 🔗

All posts will be displayed on the homepage. 📜
You can click on each post to view its full content. 👀

Important Files 🗂️: 🔗

Frontend: 🔗

src/App.js – Main app routing and layout. 🛣️
src/pages/CreatePost.js – Page for creating new posts. 📝
src/components/BlogPost.js – Component for rendering individual blog posts. 🖼️
src/utils/api.js – Utility file for handling API requests. 🔌

Backend: 🔗

server.js – Main server file. 🖥️
routes/postRoutes.js – Routes for handling CRUD operations on posts. 🔀
models/Post.js – Mongoose model for the blog post schema. 🗃️

API Endpoints 🌐 🔗

POST /post – Create a new post. 📝
Request Body:

title: String 📌
summary: String 🗣️
content: String 🖋️
file: File (optional) 📂
Response: JSON with created post details.

GET /posts – Retrieve all posts. 📜🌐 🔗

Response: JSON array with post details.
### **GET /post/:id – Retrieve a single post by ID. 🔍** 🔗
Response: JSON with post details.
### **GET /post/:id – Retrieve a single post by ID. 🔍** 🔗
### **License 🛡️🤝* 🔗
This project is licensed under the MIT License – see the LICENSE file for details. ### **Contributing 🤝* 🔗
If you'd like to contribute to the development of Poly Blog, feel free to fork this repository and submit pull requests. Please ensure all code adheres to the project’s coding standards and write clear commit messages. ✍️
###**Future Improvements 🔮* 🔗
User authentication (signup/login) for managing posts. 🔐 Adding tags/categories for better content organization. 🏷️ Implementing comments and likes for engagement. 💬👍 Adding post edit and delete functionality. ✏️🗑️ Enhancing mobile responsiveness and accessibility. 🌍📱