https://github.com/bscript07/reactjs-blog-app

MERN Blog App
https://github.com/bscript07/reactjs-blog-app

axios express javascript-time-ago nodejs react react-dom react-icons react-quill react-router-dom react-scripts react-time-ago reactjs reactjs-components

Last synced: 5 months ago
JSON representation

MERN Blog App

• Host: GitHub
• URL: https://github.com/bscript07/reactjs-blog-app
• Owner: bscript07
• Created: 2024-07-25T11:37:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-22T19:11:14.000Z (11 months ago)
• Last Synced: 2025-03-15T22:14:46.632Z (9 months ago)
• Topics: axios, express, javascript-time-ago, nodejs, react, react-dom, react-icons, react-quill, react-router-dom, react-scripts, react-time-ago, reactjs, reactjs-components
• Language: JavaScript
• Homepage:
• Size: 15.7 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# ReactJS - June 2024

## Welcome to the MERN Blog Application

Welcome to the MERN Blog Application! This guide will help you understand how to use the features of the app, manage your account, and get the most out of the platform.

## Getting Started

1. **Registering an Account**

   - **Visit the Registration Page**: Navigate to the registration page via the menu.

   - **Fill Out the Form**: Provide your name, email, and password.

   - **Submit**: Click on the "Register" button to create your account.

2. **Logging In**

   - **Visit the Login Page**: Navigate to the login page via the menu.

   - **Enter Your Credentials**: Input your email and password.

   - **Submit**: Click on the "Login" button to access your account.

3. **Managing Your Profile**

   - **View Profile**: Click on your username or avatar to view your profile.

   - **Edit Profile**: You can update your profile information, including your avatar.

   - **Change Password**: Access the settings to change your password if needed.

## Using the Blog Features

1. **Creating a Post**

   - **Navigate to the Create Post Page**: Use the "Create Post" button from the main menu.

   - **Fill Out the Form**: Enter the title, select a category, and add your content using the rich text editor.

   - **Add a Thumbnail**: Upload an image to serve as the thumbnail for your post.

   - **Submit**: Click "Create" to create your post.

2. **Editing a Post**

   - **View Your Posts**: Navigate to your posts via the dashboard.

   - **Select a Post**: Click on the post you want to edit.

   - **Edit**: Update the content, title, category, or thumbnail.

   - **Save Changes**: Click "Update" to save your changes.

3. **Deleting a Post**

   - **Access the Post**: Navigate to the post you want to delete.

   - **Delete**: Click on the "Delete" button to remove the post from your blog.

4. **Managing Likes**

   - **Liking a Post**: Click on the heart icon to like a post. The number of likes updates in real-time.

   - **Unlike a Post**: Click the heart icon again to unlike the post if you change your mind.

  

5. **Managing Comments**

    **Adding Comments**

   

   - **Navigate to a Post**: View a post and scroll down to the comments section.

   - **Submit a Comment**: Type your comment in the textarea and click "Submit" to add it to the post.

  

   **Editing Comments**

   - **Find Your Comment**: Locate the comment you want to edit.

   - **Edit**: Click on the "Edit" button next to your comment, modify the text, and click "Save" to update it.

  

   **Deleting Comments**

   - **Find Your Comment**: Locate the comment you want to delete.

   - **Delete**: Click on the "Delete" button next to your comment to remove it from the post.

  

## Registered Users

### User List

Here is a list of some registered users on the platform:

| **Name**    | **Email**        | **Posts** |

|-------------|------------------|-----------|

| Vili Petrova| vili@gmail.com | 1 |

|Nikol Petrova| niki@gmail.com | 3 | 

| Alex Petrov | alex@gmail.com | 1 | 

### User Roles

- **Admin**: Manages users, posts, and site settings.

- **Author**: Can create, edit, and delete their own posts. Can also add, edit, and delete their own comments.

- **Reader**: Can view posts, like posts, and interact with comments.

## Tech stack:

![mern](https://github.com/user-attachments/assets/ba83e26e-5f7e-43a9-91a9-510d5653fa43)

Thank you for using the MERN Blog Application! We hope you enjoy the experience and find it useful. If you have any suggestions or need help, don’t hesitate to get in touch!