Refactor e melhorias na UI, estado global e experiência de uso

README.md

@@ -1,94 +1,111 @@
-# Studio Flow - Teste Técnico
+# Studio Flow - Solução do Teste Técnico 🚀
+<p align="center">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Globo_logo_and_wordmark.svg/960px-Globo_logo_and_wordmark.svg.png" width="100" style="margin-left: 48px" />
+</p>
+<p align="center">
+  <img src="https://www.noesis.pt/-/media/Project/Noesis/Site/brand/logo.svg?iar=0&hash=8BE9FEC81E94CF0B07FE787047937623&hash=8BE9FEC81E94CF0B07FE787047937623" width="170" />&nbsp;&nbsp;&nbsp;&nbsp;
+  <img src="https://i.ibb.co/SPGby68/jordanio.png" width="150" />
+</p>
 
-Este repositório contém um projeto fictício chamado **Studio Flow**, criado exclusivamente para fins de avaliação técnica.
+Este repositório contém a minha solução para o **Teste Técnico Studio Flow**.
 
-A proposta simula uma ferramenta de **kanban de cenas**, utilizada (hipoteticamente) por um estúdio para organizar a produção de conteúdo audiovisual. O funcionamento esperado é simples: cada "cena" passa por etapas sequenciais (ex: planejada → em produção → finalizada) e deve poder ser movida entre elas conforme seu progresso.
+O projeto original simulava uma ferramenta simples de **kanban de cenas** para gestão de produção audiovisual, mas foi propositalmente entregue com diversas falhas e limitações técnicas.
 
-## Contexto
+Durante os **5 dias de prazo**, meu foco foi:
 
-Este projeto foi propositalmente iniciado de forma incompleta e com diversas limitações, como se tivesse sido desenvolvido por uma pessoa com pouca experiência técnica. A intenção é simular um cenário realista onde você deve assumir um código legado e levá-lo até uma versão funcional e bem estruturada.
+- Corrigir todos os bugs mapeados ✅  
+- Refatorar e reestruturar o código ✅  
+- Melhorar a tipagem e a organização geral ✅  
+- Implementar as funcionalidades faltantes ✅  
+- Garantir um código limpo, estável e de fácil manutenção ✅  
 
-Você terá **5 dias** para entregar uma solução que funcione conforme o esperado, com foco tanto na correção de erros quanto na qualidade e clareza do código.
+---
 
-Este teste serve para avaliar sua capacidade de:
+## ✅ Principais Melhorias
 
-* Compreender e evoluir código existente
-* Resolver bugs e inconsistências
-* Refatorar e estruturar melhor o projeto
-* Implementar novas funcionalidades
-* Tomar decisões técnicas com autonomia e bom senso
+### 💡 Qualidade de Código e Arquitetura
 
-## O que precisa ser feito
+- **Melhoria na Tipagem Global:**  
+  Refinei a tipagem em todo o projeto, incluindo actions dos contexts, estados globais, props de componentes e respostas de API.
 
-Você tem liberdade para alterar, reestruturar ou remover qualquer parte do código — o objetivo é que, ao final, o projeto esteja funcionando bem, com código limpo, estável e fácil de manter.
+- **Providers Tipados e Centralizados:**  
+  Criei **Providers React com tipagem forte**, centralizando as regras de negócio de produção e cena, facilitando a escalabilidade.
 
-Não se prenda apenas aos problemas já mapeados. Se identificar pontos fracos ou melhorias importantes, sinta-se à vontade para agir.
+- **Refatoração dos Reducers:**  
+  Substituí os `switch cases` por **funções de dispatch com arrow functions tipadas**, garantindo melhor legibilidade e evitando actions não tratadas.
 
-## Bugs identificados
+- **Padronização de Nomeclaturas:**  
+  Renomeei componentes para seguir uma **convenção de nomenclatura clara e consistente**, melhorando a experiência de desenvolvimento.
 
-A seguir, estão listados alguns comportamentos considerados incorretos que foram propositalmente deixados no projeto:
+- **Tratamento de Erros de API:**  
+  Implementei a função `safeFetch`, garantindo **tratamento centralizado de erros** e melhor feedback visual para falhas de requisição.
 
-1. **Movimentação incorreta de cenas no fluxo**
-   Atualmente é possível mover cenas para qualquer etapa, mas o correto é permitir apenas a movimentação para a **próxima etapa imediata**. Não deve ser possível voltar ou pular etapas.
+---
 
-2. **Status inválidos no modal de detalhes**
-   O campo de status no modal permite selecionar qualquer valor. Ele deve exibir apenas o **próximo status válido** no fluxo da cena.
+### 🎨 Camada de UI e Componentes
 
-3. **"Piscar" visual na coluna ao mover uma cena sobre ela**
-   Quando se arrasta uma cena e o ponteiro passa sobre a própria coluna de origem, ela alterna rapidamente entre estilos de hover e desabilitado, causando um efeito visual incômodo.
+- **Melhorias no Drag and Drop:**  
+  Alterei o componente `Column`, responsável por controlar o arrastar e soltar de cenas entre etapas e também o reordenamento dentro da mesma coluna.
 
-4. **Validação incorreta de data de gravação**
-   Ao editar uma cena, não deve ser permitido selecionar uma data de gravação no passado. A data deve ser **igual ou posterior à data atual**.
+- **Filtro e Criação de Cenas:**  
+  Implementei a possibilidade de filtrar e criar novas cenas diretamente no Kanban.
+---
 
-5. **Falta de tratamento visual para erro da API**
-   Quando ocorre uma falha na atualização da cena (por exemplo, a API retorna 404), a aplicação não exibe nenhuma mensagem de erro, e o estado local é atualizado como se a operação tivesse sido bem-sucedida. Isso causa inconsistência: o usuário acredita que a alteração foi salva, mas ao recarregar a página a mudança se perde. O sistema deve sinalizar falhas de forma clara e evitar que a interface mostre dados como se estivessem persistidos quando não estão.
+### 🛠️ Experiência do Desenvolvedor (DX)
 
-## Outros problemas conhecidos
+- **Scripts Unificados no `package.json`:**  
+  Configurei scripts para iniciar o Frontend e o JSON-server juntos com um único comando.
 
-Além dos bugs acima, há outros pontos que merecem atenção:
+- **Estrutura de Projeto Organizada:**  
+  Reestruturei pastas e a hierarquia de componentes para maior clareza e separação de responsabilidades.
 
-* Performance insatisfatória ao lidar com listas grandes de cenas
-* Estrutura de código desorganizada e com baixa coesão
-* Ausência de tratamento de erros em pontos críticos
+- **Formatação Padronizada:**  
+  Ajustei imports, espaçamentos e a estrutura de código para seguir um padrão único e consistente.
+---
 
-## Funcionalidades a serem implementadas
+## ✅ Funcionalidades Entregues
 
-Além da correção dos problemas, você deverá implementar duas funcionalidades que **ainda não existem no projeto**:
+- Correção de **todos os bugs descritos no teste original**.
+- Implementação das funcionalidades obrigatórias:
 
-* Criação de **novas cenas** diretamente no kanban
-* **Reordenação de cenas** dentro de cada coluna (drag and drop entre posições)
+  - **Criação de novas cenas** diretamente no Kanban.
+  - **Reordenação de cenas** dentro das colunas.
 
-## Como rodar o projeto
+---
 
-### Aplicação
+## 🔜 Próximos Passos Recomendados
 
-```bash
-# Instale as dependências
-pnpm install
+Embora o projeto já esteja funcional e estável, recomendo as seguintes melhorias para uma versão mais próxima de produção:
 
-# Rode o servidor de desenvolvimento
-pnpm run dev
-```
+- **Implementar Testes Unitários:**  
+  Começando por contexts, reducers e funções utilitárias.
 
-A aplicação ficará disponível em `http://localhost:3000`.
+- **Implementar Testes End-to-End (E2E):**  
+  Usando ferramentas como **Cypress** ou **Playwright**, especialmente para validar drag-and-drop e modais.
 
-### API (json-server)
+- **Paginação ou Virtualização de Listas:**  
+  Como o teste menciona problemas de performance com listas grandes.
 
-Para simular uma API, usamos o [json-server](https://github.com/typicode/json-server), com os dados armazenados no arquivo `data/api.json`.
+- **Mensagens de Feedback Visual Pós-Ação:**  
+  Exibir pequenos toasts ou mensagens de sucesso após ações como "Cena criada", "Movimentação concluída", etc.
 
-Para iniciar a API fake:
+- **Acessibilidade:**  
+  Adicionar foco visível nos elementos interativos, ARIA labels nos botões de drag-and-drop e garantir navegação por teclado.
 
-```bash
-pnpm install -g json-server
+- **Implementar Skeleton Loading:**  
+  Adicionar componentes de Skeleton para melhorar a experiência de carregamento, garantindo melhor percepção de performance durante requisições mais longas.
+---
 
-# Rode o json-server apontando para o arquivo de dados
-json-server --watch data/api.json --port 3001
-```
+## 🖥️ Como Rodar o Projeto Localmente
 
-A API ficará acessível em `http://localhost:3001`.
+### 1. Instalar as dependências:
 
-## Entrega
+```bash
+pnpm install
+```
 
-O foco aqui não é acertar tudo "de primeira", mas sim demonstrar **como você pensa, organiza e estrutura seu trabalho**. Por isso, sinta-se livre para fazer refatorações, quebrar componentes, ajustar estruturas ou até mudar o que achar necessário.
+### 2. Iniciar Frontend e API juntos:
 
-O importante é entregar um sistema funcional, com código limpo, coeso e fácil de evoluir.
+```bash
+pnpm run dev
+```

data/api.json

@@ -53,33 +53,33 @@
     },
     {
       "id": "2",
+      "title": "O Encontro 23",
+      "description": "João conhece Maria na praça da cidade",
       "step": 2,
       "episode": "1",
-      "title": "O Encontro",
       "columnId": "column-2",
-      "recordDate": "2024-03-20",
-      "recordLocation": "Praça Central",
-      "description": "João conhece Maria na praça da cidade"
+      "recordDate": "2026-03-20",
+      "recordLocation": "Praça Central"
     },
     {
       "id": "3",
+      "title": "A Conversa",
+      "description": "João e Maria conversam sobre seus sonhos 35",
       "step": 3,
       "episode": "1",
-      "title": "A Conversa",
       "columnId": "column-3",
-      "recordDate": "2024-03-25",
-      "recordLocation": "Café da Esquina",
-      "description": "João e Maria conversam sobre seus sonhos"
+      "recordDate": "2030-03-25",
+      "recordLocation": "Café da Esquina"
     },
     {
       "id": "4",
+      "title": "O Desafio 23",
+      "description": "João enfrenta seu primeiro desafio no trabalho",
       "step": 4,
       "episode": "1",
-      "title": "O Desafio",
       "columnId": "column-4",
-      "recordDate": "2024-04-01",
-      "recordLocation": "Escritório",
-      "description": "João enfrenta seu primeiro desafio no trabalho"
+      "recordDate": "2026-04-01",
+      "recordLocation": "Escritório"
     },
     {
       "id": "5",
@@ -103,13 +103,13 @@
     },
     {
       "id": "7",
+      "title": "O Projeto 37",
+      "description": "João e Maria começam um projeto juntos",
       "step": 2,
       "episode": "2",
-      "title": "O Projeto",
       "columnId": "column-7",
-      "recordDate": "2024-04-15",
-      "recordLocation": "Sala de Reuniões",
-      "description": "João e Maria começam um projeto juntos"
+      "recordDate": "2030-04-15",
+      "recordLocation": "Sala de Reuniões"
     },
     {
       "id": "8",
@@ -223,13 +223,13 @@
     },
     {
       "id": "19",
+      "title": "A Mudança 2",
+      "description": "Instalando-se no novo lar",
       "step": 4,
       "episode": "4",
-      "title": "A Mudança",
       "columnId": "column-19",
-      "recordDate": "2024-06-15",
-      "recordLocation": "Novo Apartamento",
-      "description": "Instalando-se no novo lar"
+      "recordDate": "2030-06-15",
+      "recordLocation": "Novo Apartamento"
     },
     {
       "id": "20",
@@ -1040,6 +1040,92 @@
       "recordDate": "2025-07-30",
       "recordLocation": "Auditório",
       "description": "Celebrando a vitória"
+    },
+    {
+      "title": "Nova Cena",
+      "description": "Descrição da nova cena",
+      "step": 1,
+      "episode": "21",
+      "columnId": "column-101",
+      "recordDate": "2025-08-01",
+      "recordLocation": "Estúdio Central",
+      "id": "V_5rESW"
+    },
+    {
+      "title": "123",
+      "description": "123",
+      "episode": "123",
+      "recordDate": "2030-12-12",
+      "recordLocation": "12",
+      "id": "Y4UxOWf"
+    },
+    {
+      "title": "Cena Legala",
+      "description": "updateScene",
+      "episode": "12",
+      "recordDate": "2030-12-12",
+      "recordLocation": "Brasilia",
+      "id": "rTVoQgm"
+    },
+    {
+      "title": "Nova Cena",
+      "description": "Descrição da nova cena",
+      "step": 1,
+      "episode": "21",
+      "columnId": "column-101",
+      "recordDate": "2025-08-01",
+      "recordLocation": "Estúdio Central",
+      "id": "RxiSNUn"
+    },
+    {
+      "title": "123",
+      "description": "123",
+      "episode": "123",
+      "recordDate": "2030-12-12",
+      "recordLocation": "123",
+      "id": "L9cIfFe"
+    },
+    {
+      "title": "Agradeço",
+      "description": "Agradecido",
+      "episode": "12",
+      "recordDate": "2030-12-12",
+      "recordLocation": "123",
+      "id": "ieSPg5r"
+    },
+    {
+      "title": "Nega",
+      "description": "Nega",
+      "episode": "123",
+      "recordDate": "2030-12-12",
+      "recordLocation": "Nega",
+      "id": "qype9WI"
+    },
+    {
+      "title": "Comom",
+      "description": "Comom",
+      "episode": "12",
+      "step": 1,
+      "recordDate": "2030-12-12",
+      "recordLocation": "Comom",
+      "id": "K8JORwj"
+    },
+    {
+      "title": "123",
+      "description": "123",
+      "episode": "123",
+      "recordDate": "2030-12-12",
+      "recordLocation": "12",
+      "id": "H3sPe2R"
+    },
+    {
+      "id": "h5K56TN",
+      "title": "Cena Nova",
+      "description": "Nooova",
+      "step": 3,
+      "episode": "12",
+      "recordDate": "2030-12-12",
+      "recordLocation": "Nooova"
     }
   ]
 }

package.json

@@ -4,21 +4,28 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --mode dev",
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:client": "vite --mode dev",
+    "dev:server": "json-server --watch data/api.json --port 3001",
     "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "lint": "eslint . --fix",
     "preview": "vite preview"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^2.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "concurrently": "^9.1.2",
+    "daisyui": "^5.0.43",
+    "json-server": "0.17.3",
     "lucide-react": "^0.511.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.1",
+    "react-toastify": "^11.0.5",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.8"
   },