🖼️ Image Compressor

Uma ferramenta para comprimir imagens mantendo a melhor qualidade. Suporta JPEG, PNG, WebP e AVIF.

Sobre

Image Compressor é uma aplicação web construída com Next.js que permite comprimir imagens mantendo a melhor qualidade possível. Suporta múltiplos formatos de saída (JPEG, PNG, WebP, AVIF) e oferece controle de qualidade através de uma interface intuitiva.

Funcionalidades

• 📤 Arraste e solte ou clique para carregar imagens
• 🎚️ Ajuste de qualidade (10-100%)
• 🖼️ Múltiplos formatos de saída: JPEG, PNG, WebP, AVIF
• 📊 Estatísticas em tempo real (tamanho original, tamanho comprimido, redução %)
• ⬇️ Download com um clique
• 🔔 Notificações toast para feedback do usuário
• ♿ Acessível e otimizado para SEO

Tecnologias

• Framework: Next.js 16
• Linguagem: TypeScript
• Estilização: Tailwind CSS
• Gerenciamento de Estado: Zustand
• Processamento de Imagens: Sharp
• Notificações: Sonner
• Gerenciador de Pacotes: Bun

Começando

Pré-requisitos

• Bun instalado (recomendado)
• ou Node.js 18+ com npm/yarn/pnpm

Instalação

# Clone o repositório
git clone https://github.com/ruanvalente/image-compressor.git

# Navegue até o diretório do projeto
cd image-compressor

# Instale as dependências
bun install
# ou
npm install
# ou
yarn install
# ou
pnpm install

Executando o Servidor de Desenvolvimento

bun dev
# ou
npm run dev

Abra http://localhost:3000 no seu navegador.

Construindo para Produção

bun build
# ou
npm run build

Iniciando o Servidor de Produção

bun start
# ou
npm start

Estrutura do Projeto

src/
├── app/
│   ├── api/compress/           # Endpoint da API de compressão
│   ├── layout.tsx             # Layout raiz com metadados
│   ├── page.tsx               # Componente da página principal
│   ├── robots.txt            # Arquivo robots para SEO
│   └── globals.css           # Estilos globais
├── components/
│   ├── ui/                   # Componentes UI puros (sem lógica)
│   │   ├── button.ui.tsx
│   │   ├── card.ui.tsx
│   │   ├── badge.ui.tsx
│   │   └── range-slider.ui.tsx
│   └── widgets/              # Componentes funcionais com lógica
│       ├── file-dropzone.widget.tsx
│       ├── format-selector.widget.tsx
│       ├── quality-control.widget.tsx
│       ├── image-preview.widget.tsx
│       └── compression-result-card.widget.tsx
├── hooks/                    # Hooks React personalizados
│   └── use-image-compression.ts
└── lib/
    ├── store/                # Gerenciamento de estado Zustand
    │   └── compressor-store.ts
    └── utils/               # Funções utilitárias
        ├── format-bytes.ts
        └── toast.ts

Contribuir

Contribuições são bem-vindas! Por favor, sinta-se à vontade para enviar um Pull Request.

1. Fork o repositório
2. Crie sua branch de funcionalidade (git checkout -b feature/nova-funcionalidade)
3. Commit suas alterações (git commit -m 'feat: adicione nova funcionalidade')
4. Push para a branch (git push origin feature/nova-funcionalidade)
5. Abra um Pull Request

Licença

Este projeto é código aberto e está disponível sob a Licença MIT.

📬 Contato / Contact

Criado por Ruan Valente.

• 🌐 Portfolio: ruanvalente-portfolio.vercel.app
• 💼 LinkedIn: linkedin.com/in/ruan-valente
• 💻 GitHub: github.com/ruanvalente

⭐ Se este projeto foi útil para você, considere dar uma estrela no GitHub!