Organização após refarotação do código:

https://whimsical.com/alura-challenges-2Hd27jaBNF53cdxv2oGtrF

Alura Challenges: Front-End

O Challenges é um desafio proposto pela Alura aos seus alunos para a prática das tecnologias de front-end. O desafio dessa primeira edição consistiu em desenvolver um site responsivo a partir de um protótipo fornecido pela Alura através do Figma.

Para desenvolver o site proposto foi utilizado o ReactJS. Para ver a aplicação desenvolvida publicada basta acessar: https://alura-challenges-front-end-v2-3hy5p53m2-bernardoblasquez.vercel.app/comunidade.

O desafio ocorreu durante quatro semanas onde uma lista de tarefas eram disponibilizadas via Trello.

Como está organizado esse repositório?

O Alura Challenges ocorreu ao longo de 4 semanas. Para organizar melhor o repositório, os desafios de cada semana estao separados em branches diferentes. Em cada uma das branches é possível ver em mais detalhes o que foi feito.

• Semana 1: focou-se principalmente no desenvolvimento do layout responsivo da header e da página de editor de código. No caso deste projeto, foram criados os principais componentes que formariam o layout do site e algum gerenciamento dos estados da página foram implementados, como os eventos de clicks, focus e blur.
• Semana 2: desenvolvimento da página com listagem de códigos, do componente de syntax highlitght com o pacote react-syntax-highlighter e das rotas, utilizando do react-router-dom. Implementação das micro interções do site.
• Semana 3: modelagem dos dados que serão lidos em JSON, passagem de valores entre os componentes via props, salvamento de dados novos inseridos utilizando localStorage do javascript.

Depois das 3 primeiras semanas, após o término do desafio, resolvi modificar o projeto, melhorando o design e usando recursos do React que não havia usado até então (ainda em desenvolvimento - olhar a aba de projetos).

• a melhora de design está focada na simplificaçãoda ideia do projeto: focar em códigos curtos e somente em poucas linguagens para web e retirar toda a parte do design relacionado a comunidade. Então teremos as funcionalidades de adicionar código, lista-los e ter uma página com mais detalhes sobre o código salvo.
• entre os recursos não utilizado: context API, Refs, hooks personalizados, criação de testes...

Tecnologias e bibliotecas utilizadas

• Normalize
• Sass
• React Syntax Highlighter
• React Router Dom

Referências

• https://www.alura.com.br/challenges/front-end/
• https://trello.com/b/yr8iUfSz/desafio-front-end-semana-01
• https://www.figma.com/file/Ve4hpTfmMa7yAFneoGtGKD/Alura-Challenge---Edi%C3%A7%C3%A3o-Front-end?node-id=207%3A729&viewport=86%2C-1148%2C0.3736729025840759
• https://www.npmjs.com/package/react-syntax-highlighter