Skip to content

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

Contributors