Pixie Edit
Built using React.js, Vite, and Tailwind CSS, this project features a sleek photo editor with real-time filters and image transformations. Icons from Font Awesome and Boxicons, styled with custom CSS, all developed in VS Code.
🌈 Pixie Edit - Photo Editor in React
Pixie Edit is a simple and elegant photo editor built using React.js, powered by Vite, styled with Tailwind CSS, and enhanced with Font Awesome and Boxicons for intuitive user interaction.
🛠️ Tech Stack & Tools Used
| Category | Description |
|---|---|
| ⚛️ Frontend Framework | React.js – For building the UI components |
| ⚡ Build Tool | Vite – Fast build tool and development server |
| 🎨 CSS Framework | Tailwind CSS – Utility-first CSS framework |
| 🖼️ Styling | Custom styles with App.css and index.css |
| 🎯 Icons | Font Awesome 🔁 Boxicons 🎭 |
| 🗂️ Image Handling | Local assets stored in src/assets/ folder |
| 💻 Dev Environment | Visual Studio Code – Code editor |
| 🌿 Version Control | Git & GitHub – For source control and collaboration |
🧠 Functionalities Used in the App
🖼️ 1. Choose Image
- Opens a file picker to load an image from local storage.
🎨 2. Image Filters
Brightness – Adjusts brightness level of the image.
Saturation – Controls intensity of colors.
Inversion – Inverts colors (negative effect).
Grayscale – Converts image to grayscale; includes a slider for fine control.
🔄 3. Rotate & Flip
🔄 Rotate Left – Rotates image 90° counterclockwise.
🔁 Rotate Right – Rotates image 90° clockwise.
↕️ Flip Vertical – Flips image vertically (up-down).
↔️ Flip Horizontal – Flips image horizontally (left-right).
💾 4. Save Image
- Saves the edited image and shows a success modal:
✅ Image successfully saved and downloaded!
🧹 5. Reset Filters
- Resets all filters and transformations to the default/original state.
