Centro Pokémon

Desafio para desenvolvimento Front-end – React/Next.js. | codie.digital

---

Entrega

O prazo para entrega é de 07 dias. 🗓️ Início: 29/02 ✅ Entregue: 04/02

---

Ferramentas utilizadas

• TypeScript
• React.js
• Next.js
• Axios
• React Toastify
• React Hook Form
• Yup
• Styled-Components
• Inversify
• PNPM

---

Setup

Instale as dependências do código com:

pnpm install

Inicie o projeto

pnpm run dev

---

O que foi feito?

Uma aplicação web em Typescript com Next.js. Com interface totalmente responsiva, e atendendo aos requisitos e ao design predefinido, aplicando os princípios da Clean Architecture no Front-end.

Requisitos

• ✅ Tratar possíveis erros de API
• ✅ Demonstrar conhecimento do uso de hooks
• ✅ Criar um código desacoplado, organizado e testável
• ✅ Demonstrar conhecimento de modularização de componentes
• ✅ Utilizar CSS in JS – styled components para estilizar as páginas
• ✅ Demonstrar conhecimento de TypeScript e suas features para organizar o projeto
• ✅ Obrigatório o uso do react-hook-form + yup para o desenvolvimento do formulário
• ✅ Deve ser usado Page Router do Next.js e não a nova versão >=14.0.0 no desenvolvimento deste projeto.
• ✅ Demonstrar organização, desacoplamento e separação de responsabilidades no código; obrigatório o uso de Inversify + Clean Architecture

Diferencial

• ✅ Demonstrar conhecimentos de técnicas específicas de Next.js para lidar com estilos e server-side rendering.
• ✅ Demonstrar em pelo menos 1 chamada de api o uso de SSR Next.js
• 🟨 Demonstrar conhecimento com react-query.
• ✅ Demonstrar conhecimento em classes Javascript POO.

---

Uso de APIs

Originais do projeto

• http://localhost:3000/api/scheduling/date para obter as datas disponíveis para agendamento
• htttp://localhost:3000/api/scheduling/time para obter os horários disponíveis para agendamento
• pokéAPI para obter os dados de região, cidades, e pokémons a serem usados no agendamento

Criado por mim

• htttp://localhost:3000/api/scheduling/schedule foi criado para lidar com o envio do formulário de agendamento de consulta

---

Design implementado

O projeto implementa o design predefinido que pode ser consultado em Design - Figma.

Abaixo estão telas reais da aplicação

Home

Obs: O logo segue o seguinte comportamento: inicia expandido na home, e reduz após 05 segundos, da direita para a esquerda.

Quem Somos

Agendar Consulta

Caso de Sucesso

Caso de Falha

Criadas por mim

404 Not Found

Caso de erro ao obter dados da PokéAPI