https://github.com/sahilsapariya/blog-application

A minimalistic web application for blogs, made with ReactJs and SpringBoot
https://github.com/sahilsapariya/blog-application

html5 mysql reactjs sass spring-boot

Last synced: about 2 months ago
JSON representation

A minimalistic web application for blogs, made with ReactJs and SpringBoot

• Host: GitHub
• URL: https://github.com/sahilsapariya/blog-application
• Owner: sahilsapariya
• Created: 2024-03-04T15:13:14.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-20T12:35:02.000Z (about 1 year ago)
• Last Synced: 2025-02-12T02:39:45.172Z (3 months ago)
• Topics: html5, mysql, reactjs, sass, spring-boot
• Language: JavaScript
• Homepage:
• Size: 1.77 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Blog Application

This is a simple blog application built using React.js for the frontend and Spring Boot for the backend. The application allows users to perform CRUD (Create, Read, Update, Delete) operations on blog posts and provide the feature of adding and deleting the comments.

## Table of Contents

- [Features](#features)

- [Technologies Used](#technologies-used)

- [Installation](#installation)

- [Visuals](#visuals)

- [Contributing](#contributing)

## Features

### 1. Blog Post Management

**Create**: Users can create new blog posts by providing a title, content.

**Read**: Users can view existing blog posts with their titles, content.

**Update**: Users can edit existing blog posts to modify their titles, content.

**Delete**: Users can delete blog posts that they have created.

### 2. Commenting System

**Add Comment**: Users can add comments to any blog post.

**Delete Comment**: Users can delete their own comments.

### 3. Responsive Design

The application is designed to be responsive, ensuring a consistent user experience across different devices and screen sizes.

## Technologies Used

**Frontend**: React.js

**Backend**: Spring Boot

**Database**: MySQL

**API Communication**: Axios

## Installation

1.  **Clone the Repository:**

    ```bash

    git clone https://github.com/sahilsapariya/blog-application.git

    ```

2.  **Navigate to the Client Directory:**

    ```bash

    cd blog-application

    ```

3.  **Install Dependencies:**

    > For installation of client dependencies

    ```bash

    cd blog-frontend

    npm install

    ```

    > For installation of server dependencies

    It will download automatically if you have configured the java developing environment. So meaven dependency will automatically get started to install

4.  **Run the Application:**

    To run the frontend (client) part:

    ```bash

    npm start

    ```

    To run the backend part:

    > simply click on the Run button in the MainApplication file.

5.  **Access the Application:**

    - Open a web browser and go to `http://localhost:3000`.

## Visuals

### Home Screen

![Home Screen](./assets/home_screen.png)

### View Blog Screen

![View blog Screen](./assets/view_blog.png)

![View blog 2 Screen](./assets/view_blog-2.png)

### Add Blog Screen

![Add blog Screen](./assets/add_blog.png)

### Blog get added

![Blog added Screen](./assets/new_blog_added.png)

### Update Blog Screen

![Update blog Screen](./assets/update_blog.png)

### Delete Blog Screen

![Delete blog Screen](./assets/delete_blog.png)

## Contributing

If you'd like to contribute to the project, please follow these guidelines:

1. Fork the repository on GitHub.

2. Clone your forked repository (`git clone https://github.com/sahilsapariya/blog-application.git`).

3. Create a new branch for your feature or bug fix (`git checkout -b feature-name`).

4. Make your changes and commit them (`git commit -am 'Add feature'`).

5. Push to the branch (`git push origin feature-name`).

6. Create a new Pull Request on GitHub.

---

# Happy Hacking 🧑🏻‍💻 !