ProImage Tool is a full-stack image processing web application that allows users to upload images, preview them in real-time, and download the processed images in various formats (PNG, JPEG). It provides a smooth user experience with progress bars for uploads, and download buttons, and is styled using Tailwind CSS and React.
- Image Upload: Users can upload images in PNG or JPEG format.
- Real-time Preview: A low-quality preview of the image is shown after upload for fast feedback.
- Download Processed Images: The user can download the processed image in either PNG or JPEG format.
- Progress Bar: A smooth progress bar is displayed, showing the upload progress.
- Responsive Design: The UI is styled using Tailwind CSS and is fully responsive for any device.
- Icons & Animations: Heroicons are used for a modern, intuitive user experience, with smooth animations for progress.
- Background Processing: Uses Sharp.js on the backend to handle image processing tasks (resizing, converting formats, etc.).
- React: For building the user interface.
- Tailwind CSS: For styling the UI.
- Heroicons: For adding professional icons to buttons and indicators.
- Axios: For making HTTP requests to the backend.
- Node.js: For handling server-side operations.
- Express.js: For routing and handling API requests.
- Sharp.js: For image processing tasks (resizing, converting formats, etc.).
- Multer: For handling file uploads.
- TypeScript: For type safety across the backend code.
- Node.js: You need to have Node.js installed.
- Vite: Used as the development server for the frontend.
- npm or yarn: You can use either package manager to install dependencies.
First, clone the repository from GitHub using the following command:
git clone https://github.com/SHERLOCKx90/Image-Processing-Web-Server-with-Real-Time-Preview.git
cd Image-Processing-Web-Server-with-Real-Time-Preview
### 2. Install Dependencies
Navigate to both the `backend` and `frontend` directories and install dependencies for each using the following steps:
#### For Backend:
```bash
cd backend
npm installcd frontend
npm installTo start the backend server, navigate to the backend folder and run:
cd backend
npx ts-node src/app.tsThis starts the backend server on http://localhost:3001.
Navigate to the frontend folder and start the Vite development server:
cd frontend
npm run devThis starts the frontend server on http://localhost:5173.
Once the application is set up and running, follow these steps to use the app:
Open your browser and go to:
http://localhost:5173
- Click on the "Choose File" button to select an image from your local machine (JPEG or PNG format).
- You will see the file name displayed once selected.
- A progress bar will appear, showing the percentage of the upload in real-time.
- The bar will smoothly animate as the upload progresses.
- Once the upload completes, a preview of the image will be shown on the page.
- You can choose to download the image in either PNG or JPEG format using the dropdown menu.
- Click the "Download Image" button, and the processed image will be downloaded to your machine.
Image-Processing-Web-Server-with-Real-Time-Preview/
├── backend/ # Backend code
│ ├── src/
│ │ ├── app.ts # Express server setup
│ │ ├── controllers.ts # Image upload, preview, and download logic
│ │ ├── routes.ts # API routes
│ ├── uploads/ # Directory where uploaded images are stored
│ └── tsconfig.json # TypeScript configuration for backend
├── frontend/ # Frontend code
│ ├── src/
│ │ ├── components/ # React components
│ │ │ └── ImageUploader.tsx # Main component for uploading images
│ │ ├── context/ # Context API for managing image state
│ │ ├── App.tsx # Main React app
│ ├── tailwind.config.js # Tailwind CSS configuration
│ ├── postcss.config.js # PostCSS configuration
│ └── vite.config.ts # Vite configuration
└── README.md # Project readme
POST /preview
- Upload an image and generate a real-time low-quality preview.
- Form Data:
image(file)
- A preview URL of the uploaded image.
POST /upload
- Upload an image and process it for downloading.
- Form Data:
image(file)
- JSON response with the
imageUrlof the processed image.
GET /download?format=png&imageUrl=path
- Download the processed image in the specified format (PNG or JPEG).
format: PNG or JPEGimageUrl: Path to the processed image
If you're pushing your code to GitHub via SSH, follow these steps:
If you don't have an SSH key, generate one:
ssh-keygen -t ed25519 -C "[email protected]"Run these commands to add the key:
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519-
Copy the SSH public key:
cat ~/.ssh/id_ed25519.pub -
Go to GitHub -> Settings -> SSH and GPG keys.
-
Click New SSH key, give it a title, and paste the public key.
-
Save the key.
Run this command to verify that your SSH key works:
ssh -T [email protected]You should see a message like:
Hi your-github-username! You've successfully authenticated, but GitHub does not provide shell access.
Change the remote URL to use SSH:
git remote set-url origin [email protected]:SHERLOCKx90/Image-Processing-Web-Server-with-Real-Time-Preview.git
git push origin mainWe welcome contributions! To contribute to this project, follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/my-feature). - Make your changes and commit them (
git commit -m 'Add some feature'). - Push to the branch (
git push origin feature/my-feature). - Open a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Tailwind CSS: For quick and easy styling.
- Heroicons: For professional, open-source icons.
- Sharp.js: For powerful image processing capabilities.
- Axios: For seamless HTTP requests.
Designed & Developed by Subhadeep Chell ❤️