Uma aplicação web moderna para aprendizado de inglês com foco em pronúncia, construída com Clean Architecture e MVVM usando React e TypeScript.
O projeto segue os princípios de Clean Architecture com MVVM implementado usando hooks React customizados:
src/
├── domain/ # Camada de Domínio (Core Business Logic)
│ ├── entities/ # Entidades de negócio
│ ├── repositories/ # Interfaces dos repositórios
│ └── use-cases/ # Casos de uso (lógica de negócio)
├── infrastructure/ # Camada de Infraestrutura
│ ├── repositories/ # Implementações dos repositórios
│ ├── http/ # Cliente HTTP
│ └── di/ # Container de injeção de dependência
├── presentation/ # Camada de Apresentação
│ ├── view-models/ # ViewModels (hooks customizados)
│ ├── hooks/ # Hooks adicionais
│ ├── providers/ # Providers (React Query, etc.)
│ ├── views/ # Views (páginas)
│ └── components/ # Componentes reutilizáveis
└── shared/ # Código compartilhado
├── types/ # Tipos compartilhados
├── utils/ # Utilitários
└── constants/ # Constantes
ViewModel para autenticação do usuário:
const {
state, // Estado completo
actions, // Métodos (login, signup, logout)
user, // Getters individuais
isAuthenticated,
isLoggingIn,
loginError,
} = useAuthViewModel();ViewModel para operações com cards:
const {
state, // Estado completo
actions, // Métodos (createCard, updateCard, deleteCard)
cards, // Getters individuais
isLoading,
isCreating,
error,
} = useCardViewModel(category, difficulty);ViewModel para chat com IA:
const {
state, // Estado completo
actions, // Métodos (sendMessage, sendAudioMessage)
messages, // Getters individuais
isSending,
currentMessage,
} = useChatViewModel();ViewModel para exercícios de leitura em voz alta:
const {
state, // Estado completo
actions, // Métodos (startRecording, analyzePronunciation)
currentCard, // Getters individuais
isRecording,
feedback,
progress,
} = useReadAloudViewModel(cardId);ViewModel para mapa de progresso:
const {
state, // Estado completo
actions, // Métodos (refetchData, setTimeRange)
progressData, // Getters individuais
isLoading,
error,
} = useProgressMapViewModel();Protege páginas que requerem autenticação:
const { canAccess } = useAuthGuard('/login');Protege páginas que não devem ser acessadas por usuários autenticados:
const { canAccess } = useGuestGuard('/dashboard');Envolva sua aplicação com os providers necessários:
// app/layout.tsx
import { AppProviders } from '@/src/presentation/providers/AppProviders';
export default function RootLayout({ children }) {
return (
<html>
<body>
<AppProviders>
{children}
</AppProviders>
</body>
</html>
);
}// pages/login/page.tsx
import { useAuthViewModel } from '@/src/presentation/view-models/useAuthViewModel';
export default function LoginPage() {
const {
state,
actions,
user,
isAuthenticated,
isLoggingIn,
loginError,
} = useAuthViewModel();
const onSubmit = async (data) => {
try {
await actions.login(data.email, data.password);
} catch (error) {
// Erro já é gerenciado pelo ViewModel
}
};
return (
// JSX usando isLoggingIn, loginError, etc.
);
}// pages/dashboard/page.tsx
import { useAuthGuard } from '@/src/presentation/hooks/useAuthGuard';
export default function DashboardPage() {
const { canAccess } = useAuthGuard();
if (!canAccess) {
return <div>Verificando autenticação...</div>;
}
return (
// Conteúdo da página
);
}O projeto usa shadcn/ui para componentes de interface:
import { Button } from '@/src/presentation/components/ui/button';
import { Card } from '@/src/presentation/components/ui/card';
import { Input } from '@/src/presentation/components/ui/input';- React Query: Cache, sincronização e gerenciamento de estado servidor
- ViewModels: Estado local e lógica de apresentação
- Context API: Estado global quando necessário
- Next.js 15: Framework React
- TypeScript: Tipagem estática
- React Query: Gerenciamento de estado servidor
- Tailwind CSS: Estilização
- shadcn/ui: Componentes UI
- Zod: Validação de schemas
- React Hook Form: Gerenciamento de formulários
src/
├── domain/
│ ├── entities/ # Entidades de negócio
│ ├── repositories/ # Interfaces dos repositórios
│ └── use-cases/ # Casos de uso
├── infrastructure/
│ ├── repositories/ # Implementações dos repositórios
│ ├── http/ # Cliente HTTP
│ └── di/ # Injeção de dependência
├── presentation/
│ ├── view-models/ # ViewModels (hooks)
│ ├── hooks/ # Hooks adicionais
│ ├── providers/ # Providers
│ ├── views/ # Páginas
│ └── components/ # Componentes UI
└── shared/
├── types/ # Tipos compartilhados
├── utils/ # Utilitários
└── constants/ # Constantes
- ✅ Separação de Responsabilidades: Cada camada tem uma função específica
- ✅ Testabilidade: Fácil de testar cada camada independentemente
- ✅ Manutenibilidade: Código organizado e fácil de manter
- ✅ Escalabilidade: Fácil adicionar novas funcionalidades
- ✅ Reutilização: ViewModels e hooks podem ser reutilizados
- ✅ TypeScript: Tipagem completa e segura
- ✅ Performance: React Query otimiza automaticamente
- ARCHITECTURE.md - Documentação detalhada da arquitetura
- VIEWMODEL_VS_HOOKS.md - Explicação da relação entre ViewModels e hooks
# Desenvolvimento
npm run dev
# Build
npm run build
# Lint
npm run lint
# Migração de imports
node migrate-imports.js- Siga a arquitetura estabelecida
- Use ViewModels para lógica de apresentação
- Mantenha a separação de camadas
- Escreva testes para novos ViewModels
- Documente mudanças na arquitetura
SpeechEase - Aprenda inglês com IA e melhore sua pronúncia! 🎤✨