Simple Image Viewer

A lightweight and user-friendly image viewer application built with React and TypeScript. Features basic image manipulation tools and a canvas-based drawing utility.

Features

• Image upload and display
• Image rotation
• Zoom in/out functionality
• Draw on images
• Reset image to original state
• Color picker for drawing

Technologies

• React 18
• TypeScript
• Canvas API
• Radix UI

Installation

To run this project in your local development environment:

# Clone the repository
git clone https://github.com/3mincan/simple-image-viewer.git

# Navigate to project directory
cd simple-image-viewer

# Navigate to server directory
cd server

# Install the libraries & dependencies
npm install

# Run the server
npm run dev

# Back to project root
cd ..

# Navigate to client directory
cd client

# Install the libraries & dependencies
npm install

# Run the client
npm run start

Usage

1. Click "Choose File" to upload an image
2. Use rotation buttons to rotate the image
3. Use zoom in/out buttons to adjust image size
4. To draw on the image:
   • Select a color using the color picker
   • Draw on the canvas using your mouse
5. Click "Reset" to return the image to its original state