/image-compressor-app

Image Compressor is a tool designed to efficiently compress images

Primary LanguageJavaScriptMIT LicenseMIT

php Javascript HTML CSS

Image Compressor

Image Compressor is a tool designed to efficiently compress images.

Table of Contents

Motivation

I developed this application to apply the principles I've learned while studying PHP.
The goal is to create a user-friendly solution for image compression.

Requirements

  • PHP ^8.3.0
  • Node ^20.6.0

How to use

Follow these steps to compress an image:

  1. Click on the "Upload Image" button.
  2. Select the image you want to compress (supports jpg, png, WebP; maximum file size: 10MB).
  3. Wait for the compression process to complete.
  4. Choose the location to save the compressed image.

Project Structure

/project-root
    index.php            # Main entry point for the application
    src/
        styles/          # CSS files for styling
        media/           # Images, icons, videos
        client/          # Client-side code (JavaScript)
        server/          # Server-side code (PHP)
            temp/        # Temporally server folders and files
        template/        # HTML/PHP views

Useful commands:

npm i                   # install the packages
npm run build           # build the project on folder htdocs
npm run server          # starts the PHP built-in in server

Design

I create the design using the Material 3 design system.
The design is available here: Image Compressor.

Tests

I used Cypress to test the core functionality of the app.
The tests are available here: image-compressor-tests.

Lighthouse Report

loghthouse-report

Preview

The project is available on Image Compressor

Attributions

All media used in this app are free for usage, and the sources are credited below:

  • Octopus Image by catalyststuff on Freepik;
  • Fav icon Image by brgfx on Freepik.

License

The code is under the MIT License.

Author

Developed by @Wesley-Nunes
Connect