A aplicação tem como objetivo permitir que alunos e professores de diferentes assuntos ou matérias possam entrar em contato entre si.
As seguinte tecnologias foram utilizadas na construção da aplicação, que deve ser responsiva e seguir as diretrizes de mobile-fist:
- HTML
- CSS
- TypeScript
- React
- Node
- MySQL
- Docker
A aplicação é composta por três páginas distintas:
- Landing Page
- Listagem de Aulas
- Formulário de Cadastro de Aulas
A página consiste de três elementos principais:
- Logo e Título
- Imagem Principal
- Botões de Navegação
O primeiro botão direciona o usuário para a página de Listagem de Aulas, enquanto o segundo leva para o Formulário de Cadastro de Aulas. Abaixo o layout desktop e mobile da tela em questão:
A página é composta por três elementos principais:
- Cabeçalho com o logo e seta para retornar à página anterior.
- Campos de Filtragem: Matéria, dia da semana e horário.
- Lista de Aulas
Abaixo o layout mobile e desktop da página:
A página consiste em um formulário que permite que as informações do professor, da aula e dos horários disponíveis sejam cadastradas:
Algumas melhorias foram realizadas em relação ao projeto original e serão descritas conforme sua classificação.
De forma a facilitar o processo de desenvolvimento e deploy do projeto, a infraestrutura foi implementada através de um conjunto de containers descritos através de serviços no arquivo docker-compose.yml. Mesmo tendo o mesmo ambiente de execução (Node), é interessante que as dependências do back-end e do front-end fiquem sejam isoladas por questões de segurança e manutenção.
A solução é implementada originalmente utilizando um banco SQLite, que é uma solução robusta e adequada em diversos contextos, porém tendo em vista que o back-end e front-end já estão em ambientes de execução isolados, não faria sentido violar essa organização colocando a camada de dados no mesmo container do back-end, já que o SQLite é um banco de dados local. Dessa forma, a solução que mais se adequa a organização já existente é utilizar um banco que permita o acesso via rede e a opção escolhida de banco de dados foi o MySQL.
Durante o bootcamp a configuração da conexão com o banco de dados é hard-coded, o que viola o terceiro princípio do já difundido conjunto de boas práticas 12 factor app que diz que configurações que variem conforme o ambiente devem ser estritamente separadas do código e preferencialmente armazenadas em variáveis de ambiente. Dessa forma, a biblioteca dotenv foi utilizada juntamente de um arquivo .env.