- 📋 Sobre o Projeto
- 🛠️ Tecnologias
- 📚 Bibliotecas Utilizadas
- 🏗️ Padrões de Projeto
- ⚙️ Configuração e Setup
- 🚀 Como Executar
- 📝 Scripts Disponíveis
Upload Widget é uma aplicação web moderna fullStack
desenvolvida para converter e comprimir imagens com interface intuitiva e responsiva.
O projeto utiliza as mais recentes tecnologias do ecossistema React,
para proporcionar uma experiência de usuário fluida e performática.
Desenvolvido por: Emmanuel Oliveira
Fonte de Estudo: RocketSeat
Tip
Acesse o repositório back-end da aplicação
> Back-end
- React 19.2.0 - Biblioteca JavaScript para construção de interfaces
- TypeScript 5.9.3 - Superset do JavaScript com tipagem estática
- Vite 7.2.4 - Build tool e dev server de alta performance
- Tailwind CSS 4.1.18 - Framework CSS utility-first
- Tailwind Merge - Utilitário para mesclar classes Tailwind
- Tailwind Variants - Sistema de variantes para componentes
- Radix UI - Componentes acessíveis e desacoplados
@radix-ui/react-collapsible@radix-ui/react-progress@radix-ui/react-scroll-area@radix-ui/react-slot
- Lucide React - Biblioteca de ícones moderna
- Zustand 5.0.1 - Biblioteca de gerenciamento de estado leve e simples
- Immer 11.1.3 - Biblioteca para trabalhar com estado imutável
- Axios 1.13.2 - Cliente HTTP baseado em Promises
- React Dropzone 14.3.8 - Componente React para drag & drop de arquivos
- Motion 12.23.26 - Biblioteca de animações para React
- ESLint - Linter para JavaScript/TypeScript
- TypeScript ESLint - Linter específico para TypeScript
{
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-progress": "^1.1.8",
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-slot": "^1.2.4",
"@tailwindcss/vite": "^4.1.18",
"axios": "^1.13.2",
"immer": "^11.1.3",
"lucide-react": "^0.562.0",
"motion": "^12.23.26",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-dropzone": "^14.3.8",
"tailwind-merge": "^3.4.0",
"tailwind-variants": "^3.2.2",
"tailwindcss": "^4.1.18",
"zustand": "5.0.1"
}{
"@eslint/js": "^9.39.1",
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"eslint": "^9.39.1",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^16.5.0",
"typescript": "~5.9.3",
"typescript-eslint": "^8.46.4",
"vite": "^7.2.4"
}src/
├── components/ # Componentes React
│ ├── ui/ # Componentes de UI reutilizáveis
│ └── upload-widget-* # Componentes específicos do widget
├── store/ # Gerenciamento de estado (Zustand)
├── http/ # Configuração e serviços HTTP (Axios)
├── utils/ # Funções utilitárias
├── app.tsx # Componente principal da aplicação
├── main.tsx # Ponto de entrada da aplicação
└── index.css # Estilos globais
- Component-Based Architecture - Componentes modulares e reutilizáveis
- State Management - Zustand para gerenciamento de estado global
- Type Safety - TypeScript para tipagem estática
- Utility-First CSS - Tailwind CSS para estilização
- Accessible Components - Radix UI para componentes acessíveis
- Immutability - Immer para manipulação de estado imutável
- Code Quality - ESLint para manter qualidade do código
- Node.js (versão 22 ou superior)
- pnpm (gerenciador de pacotes)
Se você ainda não possui o pnpm instalado:
npm install -g pnpmou
corepack enable
corepack prepare pnpm --activategit clone https://github.com/emmanuelmarcosdeoliveira/upload-widget
cd upload-widgetpnpm installpnpm devA aplicação estará disponível em http://localhost:5173 (ou outra porta indicada no terminal).
pnpm buildPara que essa aplicação funcione corretamente o servidor back-end tem que estar em execução
Important
### 2. Instale as dependências
```bash
pnpm install
pnpm devA aplicação estará disponível em http://localhost:5173 (ou outra porta indicada no terminal).
pnpm buildOs arquivos de produção serão gerados na pasta dist/.
pnpm preview| Script | Descrição |
|---|---|
pnpm dev |
Inicia o servidor de desenvolvimento |
pnpm build |
Compila o projeto para produção |
pnpm lint |
Executa o linter ESLint |
pnpm preview |
Visualiza a build de produção localmente |
Emmanuel Oliveira
developed by 💫 Emmanuel Oliveira
© Todos os Direitos Reservados
Clique na seta abaixo e veja como você pode contribuir para o projeto
Como fazer uma contribuição ao Projeto ?
Familiarize-se com a documentação do projeto, que geralmente inclui guias de instalação.Explore o código do projeto para entender sua estrutura e funcionamento.
Faça um Fork
Crie uma cópia (fork) do repositório original em sua conta do GitHub.
Clone o Repositório
Isso criará uma cópia local do projeto, onde você poderá fazer suas modificações.
Crie uma Nova Branch:
Crie uma nova branch para isolar suas alterações.
Isso facilita a organização do seu trabalho e a criação de pull requests.
Faça as Alterações:
Crie funcionalidades, mude estilos ou resolva bugs que iram contribuir para a melhoria do Projeto.
Crie um Pull Request:
Inclua uma descrição clara das suas alterações e explique como elas resolvem o problema ou melhoram o projeto.
Solicitação: Envie um pull request para o repositório original, solicitando que suas alterações sejam incorporadas ao projeto.
Revise e Responda a Feedback:
Colabore: Os mantenedores do projeto podem solicitar alterações ou fornecer feedback sobre o seu código.
😁Obrigado por chegar até aqui!
Released in 2025 This project is under the MIT license
