Image Processor Frontend

• Warning: This Application is designed to use the REST API: https://github.com/VishaL6i9/Image-Processing-SpringBoot-API.git for all of its functionality , Ensure it is up and running before proceeding.

Table of Contents

• Overview
• Features
• Technologies Used
• Installation
• Usage
• Contributing
• License
• Contact
• Acknowledgments

Overview

The Image Processor Frontend is a React application designed to allow users to upload, process, and download images. It offers various image processing functionalities such as inverting colors, flipping, rotating, resizing, and converting to grayscale. The frontend interacts with a backend API to handle image uploads and processing.

Features

• Upload Image: Upload images to the server.
• Invert Colors: Invert the colors of the uploaded image.
• Flip Image: Flip the image horizontally or vertically.
• Rotate Image: Rotate the image by a specified number of degrees.
• Resize Image: Resize the image to specified dimensions.
• Grayscale Conversion: Convert the image to grayscale.
• Download Processed Image: Download the processed image.
• Image Processing History: View and revert to previous image processing states.
• Error Handling: Display error messages using a Snackbar.

Technologies Used

• React: A JavaScript library for building user interfaces.
• Material-UI: A popular React UI framework for designing responsive and beautiful user interfaces.
• Axios: A promise-based HTTP client for making API requests.
• React Router: For handling routing within the application.
• ESLint: For maintaining code quality and consistency.

Installation

To get started with the Image Processor Frontend, follow these steps:

1. Clone the repository:

   git clone https://github.com/VishaL6i9/Image-Processing-Web-Application.git
   cd Image-Processing-Web-Application

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open the application: Navigate to http://localhost:3000 in your web browser.

Usage

1. Upload an Image:

   • Click on the "Choose File" button to select an image from your local machine.
   • Click the "Upload Image" button to upload the image to the server.

2. Process the Image:

   • Use the provided buttons to apply various image processing operations such as inverting colors, flipping, rotating, resizing, and converting to grayscale.

3. Download the Processed Image:

   • After processing the image, a thumbnail preview will be displayed.
   • Click the "Download Processed Image" link below the thumbnail to download the processed image.

4. View Image Processing History:

   • The application maintains a history of all image processing operations.
   • You can revert to any previous state by clicking on the corresponding history item.

5. Error Handling:

   • If an error occurs during image upload or processing, an error message will be displayed using a Snackbar.

Contributing

We welcome contributions to the Image Processor Frontend! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Make your changes and commit them:

   git commit -m "Add some feature"

4. Push to the branch:

   git push origin feature/your-feature-name

5. Create a pull request on GitHub.

Please ensure your code follows the existing coding standards and includes appropriate tests.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

• Name: Vishal Kandakatla
• Email: vishalkandakatla@gmail.com

Acknowledgments

• Thanks to the open-source community for providing the tools and libraries that made this project possible.