Blog App : A MERN Stack Application

Features

• Light and Dark theme (can be added new themes easily)
• Responsive Components
• User Authentication using express sessions
• Direct upload of images to S3 from client
• Profile update page to change user image and other related fields
• Allows to create new blogs using a reach text-editor(Quill) with image drag-drop and copy paste feature

Tech-Stack

• NodeJS - JavaScript runtime built on Chrome's V8 JavaScript engine.
• MongoDB - The application data platform: NoSQL Database
• React- for front-end
• Express - Fast, unopinionated, minimalist web framework for Node.js
• MUI-5 - Provides a robust, customizable, and accessible library of foundational and advanced components, enabling you to build your own design system and develop React applications faster.
• Swagger - Simplify API development for users, teams, and enterprises with the Swagger open source and professional toolset. Find out how Swagger can help you design and document your APIs at scale.
• AWS-S3 - Object storage built to retrieve any amount of data from anywhere
• Quill -A powerful rich text editor
• aws-sdk - To store images to S3
• axios - Promise based HTTP client for the browser and node.js
• react-avatar-edit - Load, crop and preview avatar with ReactJS component
• html-react-parser - Parse the blogs html content
• Heroku - Build data-driven apps with fully managed data services.

Live Demo

https://ok-blogger.herokuapp.com/

Swagger Documentation

https://ok-blogger.herokuapp.com/doc/

Run on worlds fasted-server: localhost

1. Clone the repository

$ git clone -b development https://github.com/Rajpra786/Blog-App.git

2. Install the dependencies and start the development server

cd Blog-App
npm i
npm start

3. Install dependencies of client and start client

cd client
npm i
npm start

What's next? Where you can help?

Server Side

Check Swagger documentation for API endpoints

User related operations

• Get public profile
• Login, logout and Signup
• Update user profile

Blog related operations

• Create new blog
• Get blog by id
• Get blogs based on filters
• Update blog

Comments related operations

• Add comment
• Get comments using blog id
• Update comment

Other

• Get a S3 temporary link to upload image directly

Front-end Side

• Home page with responsive elements
• Display a single blog with an id
• Get all blogs
• Get all the blogs of specific category
• Create blog
• Update a blog
• Profile public view
• Update profile
• Update and crop profile photo
• Login, Sign Up, logout
• Dark and light theme
• Add comment-box for any blog(only when user wants to see the comments)
• Edit comment
• Add more themes
• Add docker file
• Add Google Login

License

MIT

Lets Rock!