PhotoCraftStudio

A modern, web-based photo editor built with React and TypeScript. Edit your images with a powerful set of tools right in your browser.

Features

• Layer-based editing: Add multiple images as layers and edit them independently
• Real-time dragging: Smoothly reposition layers with intuitive drag-and-drop
• Image adjustments:
  • Brightness
  • Contrast
  • Saturation
  • Hue
  • Opacity
• Filters:
  • Grayscale
  • Sepia
  • Invert
  • Blur
  • Vintage
  • Cool
  • Warm
  • Sharpen
• Layer operations:
  • Resize layers while maintaining aspect ratio
  • Multiple blend modes
  • Layer visibility toggle
  • Layer reordering
• Modern UI: Built with Tailwind CSS and Radix UI components

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/nstefi/Outlier-PhotoCraftStudio-R.git
cd Outlier-PhotoCraftStudio-R

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Usage

1. Upload an image by clicking "Browse files" or drag-and-drop
2. Use the right sidebar to:
   • Add more layers
   • Apply filters
   • Adjust image properties
   • Change blend modes
3. Drag layers to reposition them
4. Use the scale slider to resize layers
5. Download your edited image

Built With

• React
• TypeScript
• Vite
• Tailwind CSS
• Radix UI

License

This project is licensed under the MIT License - see the LICENSE file for details.