- 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:
| Request | URL | Observações |
|---|---|---|
| GET | /alunos | Busca todos os alunos |
| GET | /alunos/1 | Busca por um aluno |
| POST | /alunos | Salva um aluno na base de dados |
| PUT | /alunos/1 | Atualiza os dados do aluno |
| DELETE | /alunos/1 | Remove um aluno |
Rotas Disciplina:
| Request | URL | Observações |
|---|---|---|
| GET | /disciplinas | Busca todos as disciplinas |
| GET | /disciplinas/1 | Busca por uma disciplinas |
| POST | /disciplinas | Salva uma disciplinas na base de dados |
| PUT | /disciplinas/1 | Atualiza os dados de uma disciplinas |
| DELETE | /disciplinas/1 | Remove uma disciplinas |
O objetivo desse desafio é medir o conhecimento do aluno em relação ao desenvolvimento de aplicativos Web com foco no front-end.
- 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