Online Image Editor

Easily edit your images in just a few clicks.

Overview

Features:

• Responsive and compatible with various device types and browsers
• Image upload by drag & drop or using the prompt window
• Image flip and rotation
• Filters such as brightness, grayscale, blur, hue-rotation, opacity, contrast, saturation, and sepia
• Reset all edits at once
• Download the edited image

Built with:

• Semantic HTML
• Modern Vanilla CSS transpiled with Lightning CSS
• TypeScript
• Astro - JavaScript Framework

Tested with:

• Vitest
• Cypress

Links

• Project homepage
• Other projects

Development setup

1. Clone the project:

git clone https://github.com/ShayanTheNerd/image-editor.git

2. Install dependencies:

pnpm install

3. Run the dev script to start the dev server:

pnpm run dev

4. Visit http://127.0.0.1:3000/image-editor.

Style Guide

If you want to develop this project, please adhere to these guidelines:

• Add Git commit messages according to Conventional Commits Specification.
• Follow the current architecture, coding paradigm, and project folder structure.
• Follow the current character case principles for ids, classes, variables, file and folder names, etc.
• Add the necessary unit/e2e tests first, then write the appropriate code, and make sure all tests pass.

Contribution

Your contribution is always welcome, please follow these steps:

1. Fork the project.
2. Create your feature branch: git checkout -b feature/branch-name.
3. Make sure to follow instructions in the style guide section.
4. Stage all changes you made: git add -A.
5. Commit all staged changes with a descriptive commit message: git commit -m '✨ feat: add foo bar baz'. Note that the commit fails if any of the format, lint, or test scripts run in the pre-commit Git hook fail.
6. Push everything to the feature branch: git push origin feature/branch-name.
7. Create a Pull Request.

License

This project is licensed under BSD 3 Clause License. Created by Shayan Zamani.