Skip to content

Latest commit

 

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

README.md

Blog Website in React, Node, Express and MongoDB

A blog web app where one can view blogs from various bloggers from PDEU. One needs to sign up or login with their PDEU’s Gmail account only in order to write their own blogs. This blog app is personalized just for staff and students of PDEU.

Features

  1. Google Authentication: One can only use their PDEU Gmail accounts to write content on the web app which makes sure outsiders do not enter and spam the app.
  2. Dark/Light Theme: Our application supports Dark and Light themes which allows the user to select a theme comfortable to their eyes.
  3. Basic Blog Operation: Blogs can be edited, updated and deleted only by the author of the blog after they are posted.
  4. Rich Text Editor: Writing the blogs is very simple as user is provided with formatting options that makes a blog look organized and attractive. There is no limitation in the length of blog content.
  5. Blog Category: Each blog can be assigned to any pre-defined category which can be used to filter blogs based on their category.
  6. Search Blogs: You can search blogs by blog title, subtitle, author and their content.

Tech Stack / Services Used

  1. React: Frontend JavaScript Library
  2. Node: Open-Source Server Environment
  3. Express: Library for creating scalable backend APIs
  4. MongoDB: NoSQL Database
  5. Redux: Easier way to manage data in browser
  6. Chakra.UI: UI library for creating beautiful designs
  7. Cloudinary: For storing blog images
  8. Heroku / Netlify / DevOps / GitHub / Azure

We've deployed the backend on Azure Web App and Heroku.

Azure Web App: API Endpoint

Heroku: API Endpoint

We've deployed our app on Azure Web App and Netlify.

Azure Web App: Website URL

Netlify: Website URL

Sample Screenshots

1. Home Page

Without Authentication

image

After Authentication

Dark Mode:

image

Light Mode:

image

2. Blogs Page

Dark Mode:

image

Light Mode:

image

3. Blog Detail Page

Dark Mode:

image

Light Mode:

image

4. Add Blog Modal

image

5. Edit Blog Modal

image

6. Delete Blog Warning

image

By Rajan Gautam and Prakhar Jajoo