Giter Club home page Giter Club logo

muhammadaliashraf / mern-stack-blog-website Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 2.34 MB

This project is a blog website developed using the MERN (MongoDB, Express.js, React.js, Node.js) stack. It allows users to read, create, update, and delete blog posts. The website features a user-friendly interface and integrates various technologies to provide a seamless blogging experience.

Home Page: https://full-stack-blog-app-murex.vercel.app/

axios blog blog-mern blog-web blog-web-app blog-webapplication blog-website curd-operation expressjs free

mern-stack-blog-website's Introduction

Blog Website using MERN Stack

Overview

This project is a blog website developed using the MERN (MongoDB, Express.js, React.js, Node.js) stack. It allows users to read, create, update, and delete blog posts. The website features a user-friendly interface and integrates various technologies to provide a seamless blogging experience.

LINK_URL=https://full-stack-blog-app-murex.vercel.app/

Features

  • User Authentication: Implement user authentication to allow users to register, login, and logout securely.
  • Change Password: Provide an option for users to Change their Password if needed.
  • Create Blog Posts: Users can create new blog posts, including titles, content, and optional images.
  • Read Blog Posts: Display a list of blog posts on the homepage, allowing users to read the full post by clicking on them.
  • Update Blog Posts: Allow users to edit their own blog posts, including modifying the title, content, and images.
  • Delete Blog Posts: Provide an option for users to delete their blog posts if needed.
  • Responsive Design: Ensure the website is responsive and works well on various devices, including desktops, tablets, and smartphones.
  • Search Functionality: Coming Soon....

Technologies Used

Frontend:

  • React.js: Used for building the user interface and managing state.
  • Redux: State management library for managing application state.
  • React Router: Used for client-side routing.
  • Axios: HTTP client for making requests to the backend server.

Backend:

  • Node.js: JavaScript runtime environment for server-side code.
  • Express.js: Web application framework for building RESTful APIs.
  • MongoDB: NoSQL database for storing blog posts and user data.
  • Mongoose: ODM (Object Data Modeling) library for MongoDB and Node.js.

Image Uploading:

  • Cloudinary: Cloud-based image and video management service for uploading, storing, and managing images. Used for image uploading functionality

Authentication:

  • JSON Web Tokens (JWT): Used for secure authentication and authorization.
  • bcrypt.js: Library for hashing passwords before storing them in the database.

Deployment:

  • Vercel: Platform used for deploying and hosting the frontend application. Installation

How To Use This

Clone the repository: git clone repository-url

  • Front End Side
  • Navigate to the client directory: cd client
  • Install dependencies: npm install
  • Run Commad For Front End: npm start
  • http://localhost:3000/
  • Server End Side
  • Navigate to the client directory: cd Server
  • Install dependencies: npm install
  • Run Commad For Front End: npm run dev
  • http://localhost:9001

Create a .env file in the root directory and add necessary environment variables.

  1. DB_URL=YOUR_MONGODB_URL
  2. PORT=YOUR_PORT
  3. JWT_SECRET=YOUR_JWT_SECRET
  4. JWT_EXPIRE=TOKEN_LIFE_TIME_FOR_EXPIRE

DEMO VIDEO

Coming Soon....

Contributing Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.

#Source Code is available on the given link below: https://www.patreon.com/posts/blog-website-109222005?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link

Best regards, Muhammad Ali

mern-stack-blog-website's People

Contributors

muhammadaliashraf avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.