Skip to content

srinjoywork/Module-4

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Yellow and Orange Rectangles Modern Business Retractable Exhibition Banner

πŸš€ CapsiTech Module 4: TechBlog - A MERN Stack Blogging Platform

Welcome to TechBlog, a powerful and interactive blogging platform built using the MERN stack (MongoDB, Express.js, React.js, and Node.js). πŸŒπŸ’» This platform allows users to write, publish, and engage with blogs, fostering an active tech community. πŸš€

πŸ“Œ Live Link

πŸ‘‰ View Live Project

πŸ“Œ API EndPoints Documentation

πŸ‘‰ View API Documentation

πŸ“Œ Demo Video of Whole Project

πŸ‘‰ View Demo video

πŸ“Œ Key Features

πŸ” User Authentication

  • βœ… Secure sign-up, login, and logout functionality.
  • βœ… JWT-based authentication for secure user sessions.
  • βœ… Password hashing using bcrypt.js to enhance security.

πŸ“ Blog Management

  • βœ… Registered users can create, edit, and delete blog posts.
  • βœ… Published blogs are accessible to all users.
  • βœ… Clean and responsive UI for easy content management.

πŸ’¬ Comment System

  • βœ… Users can post comments on blogs.
  • βœ… Comments update in real-time, promoting active discussions.

πŸ“± Responsive Design

  • βœ… Optimized for all devices – desktops, tablets, and mobiles.
  • βœ… Tailwind CSS ensures a modern, sleek UI.

πŸ› οΈ Technologies Used

🌟 Frontend

  • βœ… React.js (with Hooks & Context API) – for an interactive UI.
  • βœ… Tailwind CSS & Fluent UI – for fast, seamless, and responsive styling.
  • βœ… Formik & Yup – for form validation and handling.

πŸš€ Backend

  • βœ… Node.js & Express.js – for building the server-side API.
  • βœ… MongoDB & Mongoose – for a robust database structure.
  • βœ… JWT (JSON Web Tokens) – for user authentication.

πŸ”§ Other Tools

  • βœ… Axios – for smooth frontend-backend communication.
  • βœ… bcrypt.js – for secure password hashing.
  • βœ… dotenv – for managing environment variables.

πŸ“₯ Installation and Setup

πŸ”° Prerequisites

Before you begin, ensure you have the following installed on your system:βœ”οΈ Node.js and npm (Node Package Manager) πŸŸ’βœ”οΈ MongoDB (running locally or via MongoDB Atlas) πŸ—„οΈ

πŸ“‚ Installation Steps

1️⃣ Clone the Repository πŸ› οΈ

git clone https://github.com/srinjoywork/techblog.git cd techblog

2️⃣ Install Dependencies πŸ“¦

npm install

3️⃣ Set Up Environment Variables 🌍

  • Create a .env file in the root directory.

  • MONGO_URI=your_mongodb_connection_string

  • JWT_SECRET=your_secret_key

4️⃣ Run the Backend Server πŸƒβ€β™‚οΈ

npm run server

5️⃣ Start the Frontend 🎨

npm start

6️⃣ Open the Application πŸš€

πŸ“Œ Future Enhancements

πŸš€ Like & Share Blogs – Allow users to like & share blog posts.πŸš€ User Profiles – Personalized profiles with bio & social links.πŸš€ Categories & Tags – Organize blogs for better discoverability.πŸš€ Dark Mode πŸŒ™ – Enhance user experience with theme switching.

πŸ™Œ Conclusion

TechBlog is a dynamic and interactive blogging platform built with the MERN stack. 🌟 Whether you're a developer sharing knowledge or a reader looking for insights, this platform provides a seamless experience. Happy blogging! πŸ“πŸš€

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages