O CodeShare é uma plataforma de compartilhamento de código, similar a uma rede social para desenvolvedores. Trata-se de uma releitura de um projeto desenvolvido no começo da minha carreira, na época desenvolvido com JavaScript, HTML e CSS, além de algumas bibliotecas extras, e que utilizava o localStorage como forma de armazenamento dos dados.
Esta nova versão está sendo desenvolvida atualmente com React, além de contar com um banco de dados do MongoDb e autenticação através do Firebase. O design da página foi melhorado em relação ao anterior, acrescentando mais páginas para melhor usabilidade da aplicação.
NOTA: No primeiro carregamento da página, pode haver alguma demora no carregamento dos cards. Isso acontece pois a hospedagem do back-end "hiberna" quando a aplicação não está em uso e precisa de alguns segundos para sair desse estado :)
NOTA 2: A lib usada para a exportação do card em PNG possui algumas limitações na renderização de algumas propriedades CSS (como
clip-path). Além disso, ela também possui algumas issues não resolvidas sobrecross-originque podem resultar na não renderização de fotos de usuários de URL's externas no .
| 🪧 Vitrine. Dev | |
|---|---|
| ✨ Nome | Codeshare: compartilhamento de códigos |
| 🏷️ Tecnologias | React, MongoDb, Firebase, Styled-Components, Material UI, Axios |
| 🚀 URL | https://code--share.vercel.app/ |
- Criação do banco de dados com MongoDb Atlas, definição de models, controllers e rotas;
- Inicialização do projeto com Vite e configurações iniciais (ESLint, absolute imports, etc.);
- Desenvolvimento do design básico das páginas da aplicação: estilização com styled-components e definições das rotas para o react-router-dom;
- Criação do AuthContext que compartilhará as informações de usuário logado entre páginas;
- Integração com o Firebase para autenticação do usuário e criação de um custom hook para interações de login, logout e exclusão de conta (useAuth);
- Criação de dialog com formulário de login e cadastro de usuários, com fechamento por botão, por clique no overlay ou com a tecla ESC (para melhor acessibilidade);
- Criação de um toast informando que o usuário foi logado (a melhorar);
- Integração com a API do MongoDb para GET, POST e DELETE de usuários quando na autenticação, cadastro e exclusão de conta;
- Criação de um custom hook para busca de dados na API (useFetch) e alimentação dinâmica dos Cards na página de Comunidade;
- Organização do grid dos Cards com o uso do componente Masonry do Material UI para otimização de espaço em tela;
- Integração do editor de códigos com o banco de dados do MongoDb para funcionalidade de criação de novos códigos na página Comunidade;
- Criação de um toast informando que o código foi criado com sucesso no banco de dados;
- Redirecionamento à página Comunidade após criação de um novo post;
- Integração com o banco de dados do MongoDb para edição de códigos existentes na página Comunidade;
- Uso de syntax highlight (com react-syntax-highlighter) nos Cards;
- Criação de uma página Dashboard para gerenciamento de códigos por parte do usuário logado (similar ao Dashboard do projeto MiniBlog);
- Criação da funcionalidade Deletar;
- Melhorar de forma geral a UX da dialog de login;
- Criação da funcionalidade de pesquisa para filtrar os cards (por palavra chave ou linguagem);
- Criação de uma página de perfil para que o usuário possa alterar nome, senha e/ou imagem do avatar;
- Criação de uma página de Sobre;
- Opção de salvar o card como imagem (usando html2canvas ou similar);
- Opção de copiar o código do card para a área de transferência;
- Criação de opção de idiomas pt/br/en (a avaliar);
- Refatoração geral do código para melhor organização e boas práticas.
English version
CodeShare is an application for saving and sharing code, similar to a social network page for devs. It is a new version of an older project from the beginning of my career, developed at the time with vanilla JavaScript, HTML and CSS, besides some extra libs, and it used localStorage to save the data locally.
This new version is currently being developed in React, with a MongoDb database and Firebase authentication. The design was improved in comparison to the previous project, adding more pages to better usability.
NOTE: When loading the page for the first time, it may take some time to load the cards on Community page. This happens because the back-end hosting "hibernates" when the application is not in use and it needs some aditional seconds to "wake up" :)
NOTE 2: The lib used for exporting the card in PNG format has some limitations when rendering some CSS properties (such as
clip-path). Also, it also has some unresolvedcross-originissues which may result in some external images not rendering on .
- Create database in MongoDb Atlas, definitions of models, controllers and routes;
- Initiate the project with Vite and set initial configs (ESLint, absolute imports, etc.);
- Develop the basic design of pages: styles with styled-components and routes for react-router-dom;
- Create of AuthContext which shares the logged user info between pages;
- Integrate app with Firebase for user authentication and create a custom hook for login, logout and accounte deletion (useAuth);
- Create a dialog with a form for user login and registration, which can be closed by clicking the button, clicking the overlay of hitting ESC key (for accessibility purposes);
- Create a toast notification informing user logout (to improve);
- Integrate with MongoDb API for GET, POST and DELETE users when authenticating, registrating and deleting account;
- Create a custom hook to fetch the data from the API (useFetch) and dinamically feed the Cards in Community Page;
- Organize the Cards grid with Masonry component from Material UI for better screen spacing otimization;
- Integrate the code editor with MongoDb database for creating new codes on Community page;
- Create a toast notification informing the successful creation of a new post;
- Redirect user to Community page after creating a new post;
- Integrate with MongoDb database for editing codes on Community page;
- Syntax highlighting (with react-syntax-highlighter) for the Cards;
- Create a Dashboard so the user can manage her/his codes (similar to the Dashboard page from the MiniBlog project);
- Create delete functionality;
- General enhancement of the login dialog UX;
- Create Search functionality to filter cards (by keyword or language);
- Create a Profile page so the user may change her/his name, password and/or profile image;
- Create an About page;
- Create option to save the card as image (by using html2canvas or similar);
- Create option to copy the code content of the card to the clipboard;
- Create option for different languages (idea in evaluation);
- General refactoring of the code for better organization and good practices.
Developed with 🧡 by @sucodelarangela