top of page
Category:

Web Development

Difficulty:

Intermediate

Prerequisite(s):

ReactJS, NodeJS

Skills to be Learned:

User authentication and authorization, Rich text editor development

Medium Blog Application

This project will develop a blog application using ReactJS. The application will allow users to register and login, create and edit blog posts, and view and comment on blog posts created by other users.

Project Overview

In this app we will be building a complete Blog application just like Medium website. A user will first register and login in our website. He will create his basic profile with his details such as name, email, description, and interests etc. Then he will have a option of creating a public blog in our platform for the visitors. Visitors or Viewers of the blog can add comment, likes to the blog.


Project Timeline

The project is expected to take approximately 1 week to complete.


Technologies Covered

The following technologies will be covered in this project:

  • ReactJS

  • Material UI

  • Tailwind CSS

  • React Quill

  • Redux Toolkit

  • NodeJS

  • Express

  • MongoDB

  • Mongoose


Learning Outcomes

The following learning outcomes are expected from this project:

  • Managing user authentication

  • Performing CRUD operations in a MERN app

  • Building a rich text editor

  • Building beautiful and responsive UIs with Material UI and Tailwind CSS

  • Adding routing in React apps

  • Managing states with Redux Toolkit


Tasks

The following tasks will need to be completed in order to complete this project:

  1. Create a ReactJS app

  2. Install the necessary dependencies

  3. Set up the authentication system

  4. Create the blog post editor

  5. Create the blog post listing page

  6. Implement the commenting system

  7. Test the application

  8. Deploy the application



Challenges

Some of the challenges that may be encountered in this project include:

  • Understanding how to use the different technologies involved

  • Troubleshooting errors

  • Deploying the application to a production environment


Benefits

The benefits of completing this project include:

  • Gaining experience in developing web applications

  • Learning how to use the MERN stack

  • Creating a portfolio project that can be used to showcase your skills

bottom of page