Skip to content

Page developed during an student-exclusive event hosted by Alura.

Notifications You must be signed in to change notification settings

sucodelarangela/alura-challenge-front-end

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AluraDEV: Compartilhe seu código | 2º Challenge Front-end Alura

Read it in English

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

🔼 Voltar ao topo


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

🔼 Back to top


Developed with 🧡 by @sucodelarangela 🍊