aulify · Mini-Projecto
UC UC00621 · T. Desenv. Software
Versão · Aluno
Mini-Projecto · App React completa
SPA com routing, fetch e deploy
Contexto
Cada par/trio constrói uma Single Page Application em React com routing, fetch a API externa, formulários e deploy público. Cenários à escolha:
- A: Catálogo de filmes (TMDB API) com favoritos persistidos.
- B: App de pesquisa de utilizadores GitHub com detalhe e repos.
- C: Weather app com pesquisa por cidade (OpenWeather API).
- D: Notes/Diary app com CRUD completo e localStorage.
- E: Pokédex (PokéAPI) com filtros por tipo.
Requisitos
Funcionais
- Mínimo 3 rotas (React Router).
- Componentes reutilizáveis (mínimo 5).
- Fetch a API externa com loading + error states.
- Formulário controlado com validação básica.
- Persistência com localStorage (favoritos, settings, etc.).
- Estado partilhado (Context API ou prop drilling justificado).
- Lista com filtro/busca.
Não-funcionais
- Responsive (mobile + desktop).
- Loading states em todas as chamadas async.
- Error boundaries ou error handling visível.
- Código organizado (pastas components, pages, hooks).
- Deploy no Vercel (URL público).
- README com setup, features, screenshots, link demo.
Fases
Fase 1 · Planeamento + setup (1h)
- Escolher cenário + API.
- Esboçar páginas e componentes.
npm create vite@latest.- Instalar React Router.
- Entregável: estrutura de pastas + componentes vazios.
Fase 2 · Routing + layouts (1h)
- React Router com 3+ rotas.
- Componente Layout com nav + footer.
- Página 404.
- Entregável: navegação funcional entre páginas (mesmo sem conteúdo).
Fase 3 · Fetch + listagem (2h)
- Componente que faz fetch à API.
- Estado: loading, data, error.
- Render da lista.
- Filtro/busca.
- Entregável: lista funcional com dados reais.
Fase 4 · Detalhe + rotas dinâmicas (1h)
- Rota com parâmetro
/item/:id. - Fetch do detalhe.
- Navegação a partir da lista.
- Entregável: lista → detalhe funcional.
Fase 5 · Favoritos + localStorage (1h)
- Botão "favoritar" em cada item.
- Lista de favoritos numa rota separada.
- Persistir entre refreshes.
- Entregável: favoritos funcionais.
Fase 6 · Polish + responsive (1h)
- CSS bonito.
- Mobile responsivo.
- Loading states elegantes.
- Entregável: app utilizável.
Fase 7 · Deploy + README (1h)
npm run build.- Deploy no Vercel.
- README completo.
- Entregável: URL público + repo limpo.
Critérios de avaliação
| Item | Peso |
|---|---|
| Componentes bem estruturados | 15% |
| useState + useEffect correctos | 15% |
| Fetch com loading/error states | 10% |
| React Router | 10% |
| localStorage funcional | 10% |
| Filtro/busca | 5% |
| CSS + UX | 10% |
| Responsive | 5% |
| Deploy funcional | 10% |
| README + apresentação | 10% |
Reflexão
Em meia página: qual hook achaste mais difícil — useState ou useEffect? Como estruturaste o estado (local vs Context)? Que erros mais comuns apanhaste em desenvolvimento e como os debug-aste? React DevTools foi útil? Voltarias a usar React ou querias experimentar Vue/Svelte/Solid?