{"id":21206896,"url":"https://github.com/sucodelarangela/codeshare","last_synced_at":"2025-07-10T08:33:15.455Z","repository":{"id":111845067,"uuid":"552147642","full_name":"sucodelarangela/codeshare","owner":"sucodelarangela","description":"Plataforma de compartilhamento de código, similar a uma rede social para desenvolvedores (em desenvolvimento), feito com React, MongoDb, Firebase, Node, Express, Axios, Styled-Components e MaterialUI..","archived":false,"fork":false,"pushed_at":"2024-07-11T22:10:43.000Z","size":462,"stargazers_count":19,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-12T00:38:14.595Z","etag":null,"topics":["axios","express","firebase","firebase-auth","mongodb","mongodb-atlas","node","react","styled-components","vitrinedev"],"latest_commit_sha":null,"homepage":"https://code--share.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sucodelarangela.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-15T23:38:18.000Z","updated_at":"2024-07-11T22:10:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"68eaeaa9-75a4-4fb5-8f2a-87f9977edf5c","html_url":"https://github.com/sucodelarangela/codeshare","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodelarangela%2Fcodeshare","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodelarangela%2Fcodeshare/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodelarangela%2Fcodeshare/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sucodelarangela%2Fcodeshare/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sucodelarangela","download_url":"https://codeload.github.com/sucodelarangela/codeshare/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225629863,"owners_count":17499295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","express","firebase","firebase-auth","mongodb","mongodb-atlas","node","react","styled-components","vitrinedev"],"created_at":"2024-11-20T20:57:10.475Z","updated_at":"2024-11-20T20:57:11.180Z","avatar_url":"https://github.com/sucodelarangela.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id='top'\u003e\n\n# CodeShare: compartilhamento de códigos\n\n\u003c/div\u003e\n\n_[Read it in English](#English)_\n\nO **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](https://github.com/sucodelarangela/alura-challenge-front-end), 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.\n\nEsta 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.\n\n\u003e 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 :)\n\u003e\n\u003e 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 sobre `cross-origin` que podem resultar na não renderização de fotos de usuários de URL's externas no \u003ccanvas\u003e.\n\n\u003c!-- prettier-ignore --\u003e\n| 🪧 Vitrine. Dev |     |\n| -------------- | --- |\n| ✨ Nome        | **Codeshare: compartilhamento de códigos** |\n| 🏷️ Tecnologias | React, MongoDb, Firebase, Styled-Components, Material UI, Axios |\n| 🚀 URL         | https://code--share.vercel.app/ |\n\u003c!-- | 🔥 Desafio     | [Figma](https://www.figma.com/file/mhAelfm31DohdGVS1iuDGY/Alura-Challenge---Edi%C3%A7%C3%A3o-Front-end-(Copy)?node-id=207%253A729) | --\u003e\n\n![](https://raw.githubusercontent.com/sucodelarangela/codeshare/main/public/og-image.png#vitrinedev)\n\n\u003cdiv\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/mongodb-ffffff?style=for-the-badge\u0026logo=mongodb\u0026logoColor=47A248\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/styled components-3C3C3C?style=for-the-badge\u0026logo=styled-components\u0026logoColor=DB7093\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/firebase-051e34?style=for-the-badge\u0026logo=firebase\u0026logoColor=FFCA28\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/axios-ffffff?style=for-the-badge\u0026logo=axios\u0026logoColor=5A29E4\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/mui-ffffff?style=for-the-badge\u0026logo=mui\u0026logoColor=007FFF\"\u003e\n\u003c/div\u003e\n\n## 📈 Status de Desenvolvimento\n\n- [x] Criação do banco de dados com MongoDb Atlas, definição de _models_, _controllers_ e rotas;\n- [x] Inicialização do projeto com Vite e configurações iniciais (ESLint, _absolute imports_, etc.);\n- [x] 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_;\n- [x] Criação do _AuthContext_ que compartilhará as informações de usuário logado entre páginas;\n- [x] 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_);\n- [x] 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);\n- [x] Criação de um _toast_ informando que o usuário foi logado (a melhorar);\n- [x] 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;\n- [x] 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;\n- [x] Organização do grid dos Cards com o uso do componente _Masonry_ do _Material UI_ para otimização de espaço em tela;\n- [x] 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;\n- [ ] Criação de um _toast_ informando que o código foi criado com sucesso no banco de dados;\n- [x] Redirecionamento à página Comunidade após criação de um novo post;\n- [x] Integração com o banco de dados do _MongoDb_ para edição de códigos existentes na página Comunidade;\n- [x] Uso de syntax highlight (com [react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter)) nos Cards;\n- [x] Criação de uma página Dashboard para gerenciamento de códigos por parte do usuário logado (similar ao Dashboard do projeto [**MiniBlog**](http://curso-react-udemy.vercel.app/));\n- [x] Criação da funcionalidade Deletar;\n- [x] Melhorar de forma geral a UX da _dialog_ de _login_;\n- [x] Criação da funcionalidade de pesquisa para filtrar os cards (por palavra chave ou linguagem);\n- [ ] Criação de uma página de perfil para que o usuário possa alterar nome, senha e/ou imagem do avatar;\n- [x] Criação de uma página de Sobre;\n- [x] Opção de salvar o card como imagem (usando [html2canvas](https://html2canvas.hertzen.com/) ou similar);\n- [x] Opção de copiar o código do card para a área de transferência;\n- [ ] Criação de opção de idiomas pt/br/en (a avaliar);\n- [ ] Refatoração geral do código para melhor organização e boas práticas.\n\n\u003ca href='#top'\u003e🔼 Voltar ao topo\u003c/a\u003e\n\n---\n\n\u003cdiv id=\"English\"\u003e\n\n_English version_\n\n\u003c/div\u003e\n\n## 🔎 Overview\n\n**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](https://github.com/sucodelarangela/alura-challenge-front-end), developed at the time with vanilla JavaScript, HTML and CSS, besides some extra libs, and it used _localStorage_ to save the data locally.\n\nThis 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.\n\n\u003e 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\" :)\n\u003e\n\u003e 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 unresolved `cross-origin` issues which may result in some external images not rendering on \u003ccanvas\u003e.\n\n## 📈 Development Status\n\n- [x] Create database in _MongoDb Atlas_, definitions of _models_, _controllers_ and routes;\n- [x] Initiate the project with Vite and set initial configs (_ESLint, absolute imports_, etc.);\n- [x] Develop the basic design of pages: styles with _styled-components_ and routes for _react-router-dom_;\n- [x] Create of _AuthContext_ which shares the logged user info between pages;\n- [x] Integrate app with _Firebase_ for user authentication and create a _custom hook_ for login, logout and accounte deletion (_useAuth_);\n- [x] 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);\n- [x] Create a toast notification informing user logout (to improve);\n- [x] Integrate with _MongoDb_ API for GET, POST and DELETE users when authenticating, registrating and deleting account;\n- [x] Create a _custom hook_ to fetch the data from the API (_useFetch_) and dinamically feed the Cards in Community Page;\n- [x] Organize the Cards grid with Masonry component from Material UI for better screen spacing otimization;\n- [x] Integrate the code editor with MongoDb database for creating new codes on Community page;\n- [ ] Create a toast notification informing the successful creation of a new post;\n- [x] Redirect user to Community page after creating a new post;\n- [x] Integrate with MongoDb database for editing codes on Community page;\n- [x] Syntax highlighting (with [react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter)) for the Cards;\n- [x] Create a Dashboard so the user can manage her/his codes (similar to the Dashboard page from the [**MiniBlog**](http://curso-react-udemy.vercel.app/) project);\n- [x] Create delete functionality;\n- [x] General enhancement of the login dialog UX;\n- [x] Create Search functionality to filter cards (by keyword or language);\n- [ ] Create a Profile page so the user may change her/his name, password and/or profile image;\n- [x] Create an About page;\n- [x] Create option to save the card as image (by using [html2canvas](https://html2canvas.hertzen.com/) or similar);\n- [x] Create option to copy the code content of the card to the clipboard;\n- [ ] Create option for different languages (idea in evaluation);\n- [ ] General refactoring of the code for better organization and good practices.\n\n\u003ca href='#top'\u003e🔼 Back to top\u003c/a\u003e\n\n---\n\nDeveloped with 🧡 by [@sucodelarangela](https://angelacaldas.vercel.app)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsucodelarangela%2Fcodeshare","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsucodelarangela%2Fcodeshare","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsucodelarangela%2Fcodeshare/lists"}