Skip to content
/ Blog Public

Full-stack blog platform built with MERN stack featuring secure user authentication, admin-based post moderation (CRUD), and a responsive UI. Deployed with optimized backend performance for smooth cross-device access.

Notifications You must be signed in to change notification settings

kirtick28/Blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

17 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“ BlogWeb: A Lively MERN Stack Blogging Platform 🌟

Welcome to BlogWeb, an engaging full-stack blog application built with the MERN (MongoDB, Express.js, React, Node.js) stack! πŸš€ Dive into a vibrant community where you can sign up, share your stories, manage posts, and connect with others through likes and comments. This is your space to create, engage, and inspire! ✨

πŸŽ‰ Features That Sparkle

  • πŸ”’ Secure Authentication: Effortless sign-up and login with JWT (JSON Web Tokens) for robust security.
  • ✍️ Craft Your Story: Create, edit, and delete blog posts with ease.
  • πŸ“° Dynamic Home Feed: Explore a lively feed displaying all posts in chronological order.
  • πŸ“Š Personal Dashboard: Track your posts, likes, and comments with insightful stats.
  • ❀️ Connect & Engage: Like and comment on posts to fuel conversations.
  • πŸ–ΌοΈ Vivid Visuals: Upload stunning cover images for your posts via Cloudinary.
  • πŸ‘€ Custom Profiles: Personalize your profile with a bio, location, and social media links.

πŸ› οΈ Tech Stack Powering BlogWeb

🌐 Frontend (Client)

  • React βš›οΈ: Build dynamic and sleek user interfaces.
  • React Router 🧭: Navigate smoothly with client-side routing.
  • Axios πŸ“‘: Make seamless API calls with this promise-based HTTP client.
  • React Toastify πŸ””: Display stylish notifications to keep users informed.
  • CSS 🎨: Create a modern, clean, and visually appealing experience.

βš™οΈ Backend (Server)

  • Node.js & Express 🟒: Power the server with a robust and scalable framework.
  • MongoDB & Mongoose πŸ“š: Manage data effortlessly with a NoSQL database and intuitive ORM.
  • JSON Web Token (JWT) πŸ”: Secure API endpoints and manage user sessions.
  • Bcrypt πŸ›‘οΈ: Protect passwords with hashing and salting.
  • Cloudinary ☁️: Store and manage post images in the cloud with ease.

πŸš€ Get Started with BlogWeb

πŸ“‹ Prerequisites

  • Node.js (v14.0.0 or higher) 🟒
  • MongoDB Atlas or a local MongoDB instance πŸ—„οΈ

πŸ–₯️ Setting Up the Server

  1. Navigate to the server directory:
    cd server
  2. Install dependencies:
    npm install
  3. Create a .env file in the server directory and add:
    PORT=5000
    MONGODB_URI=your_mongodb_connection_string
    JWT_SECRET=your_jwt_secret
    CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
    CLOUDINARY_API_KEY=your_cloudinary_api_key
    CLOUDINARY_API_SECRET=your_cloudinary_api_secret
    
  4. Fire up the server in development mode:
    npm run dev

🌍 Setting Up the Client

  1. Navigate to the client directory:

    cd client
  2. Install dependencies:

    npm install
  3. Create a .env file in the client directory with:

    REACT_APP_BASE_URL=http://localhost:5000/api
    
  4. Launch the client app:

    npm start
  5. Visit http://localhost:3000 in your browser to explore BlogWeb! 🌐

🎈 How to Use BlogWeb

  • πŸ–±οΈ Sign Up or Log In: Create an account or log in to start your journey.
  • πŸ“ Manage Posts: Write, edit, or delete your blog posts from your dashboard.
  • πŸ—žοΈ Explore the Feed: Check out the latest posts from the community.
  • πŸ’¬ Interact: Like and comment to join the conversation.
  • 🌟 Personalize: Update your profile with a bio, location, and social links.

🌈 Make It Your Own

Feel free to fork, tweak, or enhance BlogWeb to match your vision! Whether you’re adding new features, revamping the UI, or experimenting with the code, this project is your canvas. Share your creations with the community and let’s build something extraordinary together! πŸš€

About

Full-stack blog platform built with MERN stack featuring secure user authentication, admin-based post moderation (CRUD), and a responsive UI. Deployed with optimized backend performance for smooth cross-device access.

Resources

Stars

Watchers

Forks