A aplicação foi desenvolvida durante a segunda edição do Alura Challenges - Front End, utilizando Angular.
A proposta do projeto é a criação de um site onde o usuário possa armazenar e compartilhar pequenos trechos de código com o destaque de sintaxe.
Ao iniciar a aplicação, no ciclo de vida ngOnInit() do AppComponent, o método getUser() do UserService é invocado, atribuindo nome e imagem ao UserComponent.
Para criar um novo projeto, basta inserir os seguintes dados:
- trecho de código na área principal
- linguagem utilizada
- título
- breve descrição
- cor da borda do card
Clicar no botão Salvar projeto.
O ProjectService realiza a comunicação com o backend - no caso é utilizado o localStorage - para manipular essas informações entre CodeEditorComponent e CommunityComponent, através da injeção de dependência.
O destaque de sintaxe no CodeEditorComponent é realizado com auxílio da biblioteca Highlight.js, ao clicar no botão Visualizar com o highlight, através do HighlightJsService.
Já nos cards do CommunityComponent, o destaque é feito através da chamada do método hljs.highlighText() dentro do ciclo de vida ngOnInit() do próprio componente.
Clone o projeto. No seu terminal de preferência, digite:
git clone https://github.com/juamerico/desafio-alura-frontend-2.git
Abra a pasta do projeto com:
cd desafio-front-end-2
Instale as dependências com:
npm install
Execute o projeto com:
npm run start
Ou disponibilize o projeto em sua rede local http://${seuEndereçoDeIP}:4200 através do comando:
npm run public