PixelFlow 🖼️

A Next.js-based Image Editor web app that enables users to upload and edit images with essential filters and transformations — all right in the browser.
Try the live version here: 👉 https://image-editor-omega-ten.vercel.app/

---

🧠 What is PixelFlow?

PixelFlow is a simple, interactive image editing application built with Next.js, React, TypeScript, and modern CSS, focused on providing an easy-to-use platform for basic image manipulation tasks such as filters and transformations. This project showcases essential frontend skills in React and Next.js while giving users practical editing tools in a polished UI.

The app resembles popular online photo editors with features like filters, brightness/saturation controls, rotate/flip, and save functionality.

📦 Features

✅ Upload an image from your device
✅ Apply filters like grayscale, saturation, inversion, etc.
✅ Adjust brightness and other visual settings
✅ Rotate or flip images
✅ Reset filters
✅ Download edited image

---

🧰 Tech Stack

Layer	Technology
Framework	Next.js
Frontend	React
Language	TypeScript
Styles	CSS Modules / Tailwind (as configured)
Bundler / Build	Vercel / Next.js Build

---

🛠️ Installation & Setup (Dev)

To run PixelFlow locally:

1️⃣ Clone the repository

git clone https://github.com/FurquanAnwer/PixelFlow.git

2️⃣ Enter the project directory

cd PixelFlow

3️⃣ Install dependencies

npm install

4️⃣ Run the dev server

npm run dev

5️⃣ Open your browser at:

http://localhost:3000

Now you’ll see the PixelFlow interface ready to use locally!

---

🧠 How to Use

1. Click Choose Image and upload a photo.
2. Adjust filters like brightness, inversion, and saturation.
3. Rotate and flip the image as needed.
4. Click Save Image to download the edited result.

---

🎯 Goals & Motivations

This project was created to:

• Demonstrate frontend mastery using React + Next.js
• Build a practical web-based tool users can interact with
• Practice image handling and UI responsiveness

---

🤝 Contributions

Contributions are welcome! If you’d like to improve PixelFlow:

1. Fork the repo
2. Create a new branch (git checkout -b feature/your-change)
3. Commit your changes (git commit -m "Add new feature")
4. Push (git push origin feature/your-change)
5. Open a Pull Request

---

📝 License

This project is open-source and available under the MIT License.

---