Ao (seu) REDoor

📝 Índice

Desafio
Ideia / Solução
Planos Futuros
Instalação
Feito Com
Autor

🧐 Desafio

Desenvolver um portal de recursos educacionais digitais (RED) fictício utilizando o padrão PWA (Progressive WebApp).

#### Catálogo
Para cada recurso educacional deve ter as seguintes informações:
+ Imagem de capa do RED;
+ Nome do RED;
+ Descrição;
+ Autor;
+ Categoria;
+ Link para acessar o RED;
+ Palavras chaves
+ Página de detalhes para cada RED

#### Atividades
+ Adicionar pelo menos 50 RED’s exibindo 15 por página;
+ Consumir os dados: https://api.portalmec.c3sl.ufpr.br/v1/learning_objects

💡 Ideia / Solução

Desenvolver um SPA (Single-page application) utilizando o virtual DOM que a biblioteca ReactJS nós prover. Inicialmente, pesquisei por inspirações no behance, dribbble, e o próprio site do portal MEC, dessa forma, entendi um pouco mais sobre as cores, temas e formas relacionadas com esse assunto.

Depois, comecei a prototipar utilizando o figma algum rumo inicial para a cara visual da solução, então elaborei a logo do REDoor (um grande mix da logo do stackoverflow) utilizando o inkscape e figma.

Por fim, comecei a codificação estudando a API que era requisito consumir seus dados, e utilizei o JSON formatter para conhecer seu objetos e desenvolver as interfaces em código, também utilizei MUI para não precisar reiventar a roda com componentes de utilização consolidada.

🚀 Próximos Passos

+ Adicionar API Context para fazer cache dos dados da API
+ Adicionar mais Unit Test
+ Verificar melhorias sugeridas pelo Lighthouse

Pré-requisitos

Node.js v16.15.0

Instalação

## Cloning the repository
git clone https://gitlab.cin.ufpe.br/devcin/intranet/graduate-management/graduate-management-front.git

## Entering the directory
cd graduate-management-front

## Installing the npm dependencies
npm install

## Starting the project (development environment)
npm start

## Building the project (production environment)
npm run build

## Entering the directory
cd build

## Starting the project (production environment)
npx serve

⛏️ Feito Com

MUI - Suite of UI Tools
ReactJS - JavaScript library for building user interfaces
Typescript - JavaScript With Syntax For Types.
NodeJs - JavaScript Runtime

✍️ Autor

@Matheus Silva - Front-end Engineer

dejardim/aoREDoor