O Ambiente Virtual de Aprendizagem do SUS, AVASUS, é uma plataforma que vem auxiliando na transformação do cotidiano da saúde pública brasileira por meio da formação continuada em trabalho. Acesse aqui https://avasus.ufrn.br/.
Não obstante, o projeto consiste na implementação do front-end de uma plataforma para visualização de módulos educacionais, parceiros e indicadores de transparência pública. A proposta deverá seguir o design system disposto no protótipo de média fidelidade disponibilizado no seguinte endereço: https://bit.ly/laisedital282023.
Os requisitos transversais obrigatórios são aqueles que deverão ser contemplados na construção das páginas dinâmicas, conforme protótipo de média fidelidade disponibilizado. São eles:
As páginas deverão ser dinâmicas, consumindo os dados da API REST do repositório disponível no seguinte endereço: https://bit.ly/laisedital282023_API. Os serviços disponibilizados na API estão descritos na orientação do README.
A aplicação web deverá implementar as telas disponíveis no protótipo de média fidelidade acessível no seguinte endereço: https://bit.ly/laisedital282023.
A utilização de componentes de interface (Tailwindcss, Ant Design, Chakra, Bootstrap,...) será opcional.
A aplicação proposta deverá ser desenvolvida utilizando componentes por meio da biblioteca React ou Vue.js, ou estática utilizando Django/Laravel Templates.
Pode ser utilizado frameworks como Next.js, Remix.run, Gatsby, NuxtJS, etc.
As páginas deverão ser responsivas de forma em que imagens, conteúdos, textos e demais elementos visuais se adaptem a qualquer tela em que o usuário estiver conectado, devendo existir breakpoints para telas de smartphones, tablets e desktop.
Sempre que possível, deverão ser utilizadas variáveis CSS, seja por meio das variáveis CSS nativas ou por meio dos pré-processadores Sass, LESS, Stylus, styled-components ou equivalentes.
Todos os campos de datas e números recuperados da API devem ser tratados para exibição no padrão brasileiro ou uso para algum cálculo, caso seja necessário.
Após acessar a página inicial da aplicação, desejo visualizar informações sobre os módulos educacionais disponíveis pelo sistema.
- CA#01 Exibir menu de navegação, seção de destaques,seção de listagem de módulos educacionais, seção de parcerias e rodapé com links.
- CA#02 Na seção de listagem de módulos educacionais, mostrar 3 módulos por aba. Os módulos mostrados devem ser recuperados da API.
- CA#03: A barra de navegação superior deve ficar fixa no topo ao rolar a página.
- CA#01: Separar os módulos educacionais por categoria.
- CA#02: Ordenar e filtrar os módulos educacionais em suas categorias.
- CA#03: A listagem deve ser paginada.
- CA#04: Exibir total de módulos e a quantidade de módulos mostrados no momento.
- CA#01: Exibir um cabeçalho com o nome, parceiros e imagem de capa do módulo educacional.
- CA#02: Exibir seções de informações gerais, sobre o curo, objetivos, recursos educacionais e créditos.
- CA#01: A listagem deve ser paginada.
- CA#02: Exibir total de parceiros e a quantidade de parceiros mostrado no momento.
- CA#01: Exibição de dados gerais.
-
CA#02: Mapa interativo com usuários por estado.
-
CA#03: Gráfio de usuários por curso.
- CA#04: Todos os dados devem ser recuperados da API.