MERN Blog

MERN stack blog with authentication Live demo here

Table of Contents

• General Info
• Technologies Used
• Features & Challenges
• API Source
• Usage

• Room for Improvement

General Information

Idea / Motivation

• To create a blog that can be registered by people to share information

Purposes / Intentions

• To create my own API using node.js
• To work with authentication by using JWT
• To practice MVC (Model-View-Controller) pattern
• To practice MERN stack development
• To practice CRUD
• To deploy: a combined server on Heroku

Technologies Used

react.js

• react props, useState(), react events, useEffect()
• react-router-dom
• contextAPI

styles

• styled-components

node.js

• express.js, mongoose

JSON Web Tokens

• jsonwebtoken

others

• Window localstorage

other libraries

• axios
• crypto-js
• http-proxy-middleware
• multer
• dotenv

Features & Challenges

Authentication and Authorization

For every one

• Every one can view the blogs and also can view them by categories or users
• Ask a user to log in when a user click the button to write an article
• Ask a user to log in when a user click the button to see their own article

For a user who has registered and logged in

• Only a person who has registed and logged in can write an article
• Show the name of the user who logged on the top-right screen
• Show the photo of the user who logged on the bottom-left screen
• Only a user who is authenticated can edit or delete their own article as well as update their personal info

API

CRUD (Create, Read, Update and Delete)

• The basic operations to be done in a data
• Used the same component (SinglePost.jsx) to switch viewing mode or edited mode

useContext

• Using user information across the app
• In "Navbar" component, if user exist, they can view their own posts

Usage

Please feel free to register or use the below user info to log in

username: user2
password: 123qwe

Room for Improvement

To do:

• Error handling
• Adding admin consol
• CREATE category feature
• Pagination for blog
• To show the author's photo on each post
• To show the author's photo on sidebar