dekiakbar / image-optimizer-fe

Imageoptimizer image is a simple app for compressing any image file. It takes a single input file and compresses it to a much smaller output file.

Image Optimizer Frontend

Image Optimizer Frontend is a frontend application for image optimizer API. Build by Next Js

Installation

this project created use the following tool

node version : v20.11.0

npm version : 10.2.4

Backend

You must install image optimizer backend.

Frontend (this repo)

Clone this repository

git clone https://github.com/dekiakbar/image-optimizer-fe

Navigate to project dir

cd image-optimizer-fe

Install node modules and dependencies

npm install

Environment Variable

Copy env.example to .env

cp .env.example .env

Fill NEXT_PUBLIC_API_SERVER_URL and NEXT_PUBLIC_API_CONFIG_URL

# Created by Vercel CLI
VERCEL="1"
VERCEL_ENV="development"
VERCEL_URL=""
VERCEL_GIT_PROVIDER=""
VERCEL_GIT_REPO_SLUG=""
VERCEL_GIT_REPO_OWNER=""
VERCEL_GIT_REPO_ID=""
VERCEL_GIT_COMMIT_REF=""
VERCEL_GIT_COMMIT_SHA=""
VERCEL_GIT_COMMIT_MESSAGE=""
VERCEL_GIT_COMMIT_AUTHOR_LOGIN=""
VERCEL_GIT_COMMIT_AUTHOR_NAME=""
NEXT_PUBLIC_API_SERVER_URL="<YOUR_BACKEND_URL_FOR_OPTIMIZE_IMAGE>"
NEXT_PUBLIC_API_CONFIG_URL="<YOUR_BACKEND_URL_FOR_CONFIG>"

Development

run this project :

npx next dev

License

MIT

image-optimizer-fe's Issues

update seo

• Seo meta tags
• robots.txt
• sitemap.xml

Update Design and dockerized app

• install tailwind
• update design
• dockerized app

Prepare for new release

Prepare for new release

Update Next and dependencies

• Update Next
• Update Uppy

set grid full width for result grid

set grid full width for result grid

css issue, when mobile in dark mode

sometime if mobile enable dark mode on chrome, the website theme turn in to black

github action

• lint
• build

Duplicate result when upload multiple image

Duplicate result when upload multiple image

First Contentful Paint, Largest Contentful Paint issues

• First Contentful Paint
• Largest Contentful Paint