AluraDev - Challenge Alura
AluraDEV: Compartilhe seu código | 2º Challenge Front-end Alura
Olá, Devs!
A AluraDEV simula uma rede social para desenvolvedores, onde é possível compartilhar com a comunidade trechos de códigos diversos através de cartões personalizáveis. O projeto foi desenvolvido como resultado de um Desafio Front-End (2ª edição) exclusivo para alunos da escola de tecnologia Alura.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | AluraDev - Challenge Alura |
| 🏷️ Tecnologias | HTML, CSS, JavaScript, Highlight, SweetAlert, Masonry |
| 🚀 URL | Acesse o site. Veja mais detalhes de uso no item ⚙️ Como usar |
| 🔥 Desafio | Protótipo do Figma |
Detalhes do projeto
⚙️ Como usar
A primeira página que você verá é a página do Editor de Código. Seu primeiro passo é fazer o login no canto superior direito, inserindo seu nome de usuário do Github na janela que aparecerá.
Em seguida, você pode escrever o seu trecho de código no campo central, selecionar a linguagem (HTML, CSS, JavaScript, JSON, Python ou TypeScript) no menu dropdown e visualizar seu código estilizado com o Highlight. Também é possível dar um nome e uma descrição para o seu projeto, bem como escolher a cor que o seu cartão terá ao ser exibido na página da Comunidade.
Ao salvar o seu cartão, a aplicação utilizará o localStorage para enviar as informações para a página da Comunidade. Lá você poderá ver o seu cartão pronto!
🗑️ Deletando um projeto
Caso tenha salvo um cartão com um código errado ou simplesmente cansou daquilo ali, você pode passar o botão do mouse sobre o cartão e você verá a opção de apagá-lo. Nas versões mobile, basta tocar uma vez sobre o cartão.
♻️ Limpando os dados do localStorage
Mesmo que você feche a página da aplicação, o localStorage vai manter seus dados salvos. Para limpar esses dados, você pode abrir as Ferramentas de Desenvolvimento do Navegador usando a tecla F12 do seu teclado. Vá até a aba "Console" e digite o comando abaixo e pronto: seu navegador está limpo e você pode testar novos códigos na plataforma!
localStorage.clear();
🩹 Melhorias necessárias
- Falta implementar o sistema de busca;
- O código inteiro precisa de refatoração por ter sido feito no início dos estudos. A ideia é recriar a aplicação com React, para aprendizado;
- Implementar login via autenticação;
- Implementar banco de dados em vez de localStorage.
🛡️ Badges recebidas pelo projeto
|
|
|
|
| Badge de Participação | Badge de Apoio à Comunidade |
Badge de Repostório do Github |
Badge de Interação do LinkedIn |
English version
🔎 Overview
Hello, devs!
The app AluraDEV simulates a social media platform for developers where it is possible to share samples of codes with the development community through customizable cards. This project was development as a result of a Front-End Challenge (2nd edition) exclusively for students of Alura tech school.
⚙️ How to use it
The first thing you will see is the Code Editor Page. Your first step is to log in to your Github account by clicking the right upper button and providing your Github user name.
Then, you can write your piece of code in the center input field, select the appropriate language (HTML, CSS, JavaScript, JSON, Python or TypeScript) in the dropdown menu and view your styled code by hitting the Highlight button. It is also possible to give a name and a description to your project, as well as choosing the color your card will display when it appears on Community Page.
After saving your project, the application will use your browser's localStorage to send the info to the Community page, where you can view your newly created card!
🗑️ Deleting a project
In case you have saved a card with a mistyped code or you simply feel you want to have a card removed, you can hover the mouse cursor over the card and a delete button will appear. In mobile versions you can touch the card once and the delete button will show.
♻️ Cleaning localStorage data
Even if you close the application page, localStorage will keep your data safe i.e. the Community page will keep showing you your previous projects/cards. To clean these data you should open your browser's Dev Tools by hitting the F12 key. Go to the "Console" tab, type the command below and your browser will be clear. Now you can test new codes on the platform!
localStorage.clear();
🩹 Improvements needed
- Implementing the search functionality;
- The whole code needs refactoring as it was written in the beginning of my studies. My idea is to recreate the application with React, for learning purposes;
- Implementing login with authentication;
- Implementing database instead of localStorage.
🛡️ Badges received in this project
|
|
|
|
|
| Participation Badge | Community Support Badge |
Github Repo Shared Badge |
LinkedIn Interaction Badge |
Developed with 🧡 by @sucodelarangela 🍊