neliofrazao / arquitetura-fe Goto Github PK

• Configurar o ESlint
• Confighurar o Prettier
• Configurar o EditorConfig

• Meu primeiro componente
• Utilização de Props para passagem de dados entre componente
• Propriedades opcionais e padrões (defaultProps)

• Interfaces
• Enum
• Type

• Gerenciamento de estado com o Hook useState
• Compreendendo o ciclo de vida dos componentes funcionais com o Hook useEffect
• Lidando com efeitos colaterais em componentes

• Criando formulários controlados
• Lidando com eventos de formulários
• Validando dados de entrada com TypeScript

• Introdução ao Axios e configuração
• Realizando requisições GET, POST, PUT e DELETE
• Tratamento de erros e feedback ao usuário

• Configurando e utilizando o React Router
• Navegação entre diferentes componentes
• Passagem de parâmetros pela URL

• Utilizando outros hooks como useContext e useReducer
• Criando hooks personalizados

Projeto desenvolvido para servir de apoio e referência para os alunos de pós graduação em Desenvolvimento de Aplicações Web na disciplina de Introdução a programação com scripts

No diretório do projeto, você pode executar:

Executa o aplicativo no modo de desenvolvimento. Open http://localhost:5173/ para visualizá-lo em seu navegador.

npm install -g json-server

Crie um arquivo de nome db.json na raiz do projeto.

{
  "alunos": [
    {
      "id": 1,
      "name": "Laura Eliane Evelyn Gonçalves",
      "registration": "001",
      "course": "Sistemas para internet"
    }
  ],
  "disciplinas": [
    {
      "id": 1,
      "name": "Introdução a progração com scripts",
      "courseWorkload": "36h",
      "professor": "Tiago Daniel Fernando Baptista",
      "status": "Obrigatória",
      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit."
    }
  ]
}

Execute o comando para inicar o servidor. Por padrão a API vai funcionar no enderço: http://localhost:3000

json-server --watch db.json

Rotas Aluno:

Rotas Disciplina:

O objetivo desse desafio é medir o conhecimento do aluno em relação ao desenvolvimento de aplicativos Web com foco no front-end.

https://www.figma.com/design/HqaxMspNeWLU7zYY3qRtWA/Rick-and-Morty-Project?node-id=0-1&m=dev&t=LwTSjsBr1ej9zhQN-1

https://rickandmortyapi.com/

• https://vitejs.dev/ (Para criar o projeto)
• https://reactrouter.com/en/main ( Para criar rotas no projeto)
• https://axios-http.com/ptbr/docs/intro ( Consumir as APIS)

O desafio deverá conter um cabelhaço com um menu para a lista de Personagens, Episódios e Localização

Cada card de personagem deve exibir:

• Nome do personagem;
• Foto do personagem;
• Status do personagem;
• Espécie do personagem;
• Localização do personagem;
• schema: https://rickandmortyapi.com/documentation/#character-schema.

Comportamento esperado:

Ao clicar em um card na listagem de personagens o usuário deve ser redirecionado para a página de detalhamento do persoagem clicado.

Deve ser exibida as seguintes informações na página detalhamento:

• Nome do personagem;
• Foto do personagem;
• Status do personagem;
• Espécie do personagem;
• Origem do personagem;
• Localização do personagem;
• lista com o nome dos episódios no qual o personagem aparece.
• schema: https://rickandmortyapi.com/documentation/#character-schema

Comportamento esperado:

Ao clicar em qualquer item da lista episódios usuário deve ser redirecionado para a página de detalhamento do episódio clicado.

Cada card de episódios deve exibir:

• Nome do Episódio
• Data de estreia
• schema:https://rickandmortyapi.com/documentation/#episode-schema

Comportamento esperado:

Ao clicar em um card na listagem de espisódios o usuário deve ser redirecionado para a página de detalhamento do episódio clicado.

Deve ser exibida as seguintes informações no detalhamento de cada episódio:

• Nome do Episódio;
• Data de estreia;
• Lista de personagens que estão no episódio;
• Para cada item da Lista de personagem deve ter nome, foto e link para o detalhamento do personagem.
• schema: https://rickandmortyapi.com/documentation/#episode-schema

Comportamento esperado:

Ao clicar em qualquer item da lista personagens usuário deve ser redirecionado para a página de detalhamento do personagem clicado.

Cada card de localização deve exibir:

• Nome da localização
• Tipo da localização
• Dimensão da Localização
• schema: https://rickandmortyapi.com/documentation/#location-schema

Comportamento esperado:

Ao clicar em um card na listagem de localização o usuário deve ser redirecionado para a página de detalhamento da localização clicada.

Deve ser exibida as seguintes informações no detalhamento de cada localização:

• Nome da localização
• Tipo da localização
• Dimensão da Localização
• Lista de personagens que residem nessa localização
• Para cada item da lista de personagem deve ter nome, foto e link para o detalhamento do personagem.
• schema: https://rickandmortyapi.com/documentation/#location-schema Comportamento esperado:

Ao clicar em qualquer item da lista personagens usuário deve ser redirecionado para a página de detalhamento do personagem clicado.

Paginação para a listagem de Personagens, Episódios e Localizações.

O adicional irá garantir 2 (dois) pontos na avaliação.

O prazo final para entrega do projeto será para o dia 29/07, o projeto deverá estar disponivel no GIT(https://github.com/) e o link do repositório deverá ser encaminhado para o email [email protected]. Por favor, no assunto informar o seu nome acompanhado o texto “projeto disciplina arquitetura front end”.

No corpo do email deverá conter o nome completo, matrícula e o link do repositório do projeto