Online Image Editor

Easily edit your images in just a few clicks.

Overview

The challenge

Users should be able to:

• view the optimal layout for the site depending on their device's screen size;
• upload images from their device by drag & drop or using the prompt window;
• apply various filters such as brightness, grayscale, blur, hue-rotation, opacity, contrast, saturation, and sepia on the image (each filter has a specific range and value which can be modified using the range slider);
• flip or rotate the image;
• reset all filters at once;
• download and save the final image on their device.

Links

• Project homepage
• GitHub repository
• Issues
• Pull requests
• My other projects

My process

Built with:

• Semantic HTML
• Modern Vanilla CSS
• TypeScript
• Astro - JavaScript Framework

I learned how to:

• utilize TypeScript to add basic typing annotations;
• leverage Astro for static site generation (SSG) and deploy it on GitHub Pages;
• customize <input type="range" /> to have a consistent appearance across all major browsers;
• benefit modern Vanilla CSS features such as nesting, custom media queries, media query ranges, and cascade layers using Lightning CSS;
• receive an image from the user through drag & drop or the prompt widnow; then, preview it on the page;
• apply CSS filters, rotations, and flips on an image;
• draw a canvas based on an image and let the user download it as a new image file.

Development setup

1. First, you need to clone the project:

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

Alternatively, you can copy the source of the project directly to your local environment using Degit:

pnpm i -g degit

degit https://github.com/ShayanTheNerd/image-editor new-project-folder

2. Then, install required packages:

pnpm i

3. Finally, run the dev script to start the dev server and locally preview the project in development mode:

pnpm run dev

Deployment and production

Before deploying the project or creating a new pull request, run the following commands and make sure there are no errors:

pnpm run format

pnpm run build

Style Guide

If you want to develop this project, please stick to these rules:

• Follow the current architecture, coding paradigm, and project folder structure.
• Follow the current character case principals for ids, classes, variables, file and folder names, etc.
• Code based on the current tools, frameworks, and packages included in the project.
• Add Git commit messages considering Conventional Commits.

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'.
6. Push everything to your feature branch: git push origin feature/branch-name.
7. Create a new Pull Request.

License

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