🎬 React Fast & Furious App

Aplicação desenvolvida com React + Vite com o objetivo de evoluir um projeto originalmente baseado em HTML/CSS para uma arquitetura moderna, reativa e escalável.

Este projeto foi utilizado como prática para aplicar hooks modernos do React, boas práticas de componentização e melhoria da experiência do usuário.

---

🚀 Tecnologias utilizadas

• React

• Vite

• CSS3 (sem dependência de frameworks)

• react-photo-album

---

🧠 Conceitos aplicados

• Componentização

• Gerenciamento de estado com hooks

• Concorrência no React

• UI otimista

• Tratamento de erros

• Separação de responsabilidades

---

📄 Funcionalidades

🎬 Página de Filmes

• Grid responsivo de filmes

• Sistema de busca otimizado com:

  • useTransition

  • isPending para feedback de carregamento

---

📩 Página de Contato

• Formulário com simulação de envio para API

• Implementação com:

  • useActionState

• Feedback visual para:

  • Envio em andamento

  • Sucesso

  • Falha

---

🖼️ Página de Fotos

• Galeria dinâmica utilizando react-photo-album

• Layout responsivo e otimizado

---

💬 Página de Comentários

• Sistema de comentários com atualização otimista

• Uso de:

  • useOptimistic

• Funcionalidades:

  • Renderização imediata do comentário

  • Reversão automática em caso de erro

  • Exibição de mensagem de erro

---

🎨 Diferenciais de UI/UX

• Interações avançadas usando apenas CSS

  • Efeito hover onde apenas o item ativo fica em destaque

• Navbar com toggle simples:

  • Controle via estado no React

  • Estilização controlada via CSS

---

🧩 Hooks utilizados

• useState

• useRef

• useTransition

• useActionState

• useOptimistic

---

⚙️ Tratamento de erros

• Uso de try/catch nas requisições simuladas

• Controle de erro com estado (useState)

• Reversão de estado otimista em falhas

---

📈 Evolução do projeto

Antes

• Estrutura baseada em HTML/CSS dentro do React

• Baixo uso de recursos reativos

Agora

• Aplicação moderna e reativa

• Código mais limpo e organizado

• Melhor experiência do usuário

• Uso consistente de hooks avançados

---

▶️ Como executar o projeto

# Clone o repositório
git clone <url-do-repositorio>

# Acesse a pasta
cd <nome-do-projeto>

# Instale as dependências
npm install

# Execute o projeto
npm run dev

---

📌 Objetivo

Este projeto foi desenvolvido com foco em:

• Evolução técnica

• Prática de React moderno

• Construção de portfólio

---

📄 Licença

Este projeto está sob a licença MIT.