{"id":21018278,"url":"https://github.com/abeatrizsc/mini-blog","last_synced_at":"2026-04-28T23:35:03.980Z","repository":{"id":248624920,"uuid":"826026062","full_name":"ABeatrizSC/mini-blog","owner":"ABeatrizSC","description":"Cadastre-se, faça login e crie posts com o projeto Mini Blog. | Javascript, ReactJS, Firebase e Styled Components","archived":false,"fork":false,"pushed_at":"2024-07-19T01:29:44.000Z","size":136,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T17:19:36.682Z","etag":null,"topics":["authentication","baas-integration","blog","firebase","firebase-auth","front-end","javascript","reactjs","styled-components"],"latest_commit_sha":null,"homepage":"https://mini-blog-teal.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/ABeatrizSC.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":"2024-07-09T01:17:24.000Z","updated_at":"2024-07-22T22:56:39.000Z","dependencies_parsed_at":"2024-07-19T05:44:03.486Z","dependency_job_id":"4ce0a7e8-e196-4087-ad0b-647665a27653","html_url":"https://github.com/ABeatrizSC/mini-blog","commit_stats":null,"previous_names":["abeatrizsc/mini-blog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ABeatrizSC/mini-blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ABeatrizSC%2Fmini-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ABeatrizSC%2Fmini-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ABeatrizSC%2Fmini-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ABeatrizSC%2Fmini-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ABeatrizSC","download_url":"https://codeload.github.com/ABeatrizSC/mini-blog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ABeatrizSC%2Fmini-blog/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268531912,"owners_count":24265250,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["authentication","baas-integration","blog","firebase","firebase-auth","front-end","javascript","reactjs","styled-components"],"created_at":"2024-11-19T10:24:44.461Z","updated_at":"2026-04-28T23:34:58.955Z","avatar_url":"https://github.com/ABeatrizSC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e \n    \u003ca ref=\"https://developer.mozilla.org/pt-BR/docs/Web/HTML\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/HTML-E34F26.svg?logo=html5\u0026logoColor=white\" alt=\"HTML\"\u003e\n    \u003c/a\u003e\n    \u003ca ref=\"https://styled-components.com/\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/Styled Components-0E1013.svg?logo=styledcomponents\u0026logoColor=E69280\" alt=\"Styled Components\"\u003e\n    \u003c/a\u003e\n    \u003ca ref=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/JavaScript-F7DF1E.svg?logo=javascript\u0026logoColor=black\" alt=\"JavaScript\"\u003e\n    \u003c/a\u003e\n    \u003ca ref=\"https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/React-313335.svg?logo=react\u0026logoColor=67DEFF\" alt=\"React\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e \n  \u003ch1\u003eProjeto Mini Blog\u003c/h1\u003e\n    \n  [Sobre](#sobre)\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp; [Rotas (Telas)](#rotas)\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp; [Deploy](#deploy)\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp; [Tecnologias](#tecnologias)\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp; [Instalacoes necessarias](#instalacoes)\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp; [Contato](#contato)\n\u003c/div\u003e\n\n\nhttps://github.com/user-attachments/assets/017cc061-83ee-4963-8103-c753dde5dfe7\n\n\n\u003ch2 name=\"sobre\"\u003e📝 Sobre\u003c/h2\u003e\n\u003cul style=\"display: flex; flex-direction: column; gap: 15px\"\u003e\n  \u003cli\u003eAtravés do projeto Mini Blog, é possível realizar cadastro/login, publicar, alterar, visualizar e remover posts;\n  \u003c/li\u003e\n  \u003cli\u003eO Back-End foi feito utilizando a plataforma do \u003ca href=\"https://firebase.google.com/docs/guides?hl=pt-br\" target=\"_blank\"\u003eFirebase\u003c/a\u003e, o qual fornece toda a estrutura necessária e armazena seus dados em um banco NoSQL;\n  \u003c/li\u003e\n  \u003cli\u003eA implementação da autenticação foi feita com \u003ca href=\"https://firebase.google.com/docs/auth?hl=pt-br\" target=\"_blank\"\u003eFirebase Authentication\u003c/a\u003e, sendo necessário apenas um email e senha. Há bloqueio de acesso às páginas que necessitam de um usuário logado, sendo encaminhadas automaticamente para a página de login;\u003c/li\u003e\n  \u003cli\u003eCom este projeto, pude aprender mais sobre o Firebase e sua integração com o lado Front-End da aplicação.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 name=\"rotas\"\u003e📲 Rotas (Telas)\u003c/h2\u003e\n\u003cul style=\"display: flex; flex-direction: column; gap: 15px\"\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e\"/register\"\u003c/strong\u003e: Página de cadastro do usuário, onde deverá ser inserido nome, email, senha e confirmação de senha;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e\"/login\"\u003c/strong\u003e: Após criar um cadastro, o usuário poderá utilizar a Tela de Login para adentrar o sistema;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e\"/\"\u003c/strong\u003e: Página Home (Inicial) assim que é confirmada a autenticação de Login;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e\"/search?q=[tag]\"\u003c/strong\u003e: O usuário é encaminhado para a página assim que uma pesquisa de tag é feita. A palavra digitada no campo de busca é passada para a URL em uma query string para a filtragem de posts por tag;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e\"/posts/create\"\u003c/strong\u003e: Reservada a criação de um post. Todos os campos são obrigatórios: Título do Post, imagem, conteúdo e tags;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e\"/posts/[idDoPost]\"\u003c/strong\u003e: Exibe detalhes de um post específico ao clicar no botão \"Ver post\";\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e\"/posts/edit/[idDoPost]\"\u003c/strong\u003e: Formulário idêntico ao de criação do post, com informações do post selecionado para alteração. Todos os campos obrigatórios;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e\"/dashboard\"\u003c/strong\u003e: Área de gerenciamento de posts de um usuário, onde todos são listados e há ações de visualizar, editar e excluir; \n  \u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 name=\"deploy\"\u003e🔗 Deploy\u003c/h2\u003e\n\u003cp\u003eAcesse a visualização completa do Projeto Mini Blog \u003ca href=\"https://mini-blog-teal.vercel.app\" target=\"_blank\"\u003e aqui\u003c/a\u003e.\u003c/p\u003e\n\n\u003ch2 name=\"tecnologias\"\u003e💻 Tecnologias\u003c/h2\u003e\u003c/p\u003e\n\u003cp\u003eFeito através do editor \u003ca href=\"https://code.visualstudio.com/docs\"\u003eVisual Studio Code.\u003c/a\u003e\n\n\u003cul style=\"display: flex; flex-direction: column; gap: 15px\"\u003e\n  \u003cli\u003e\n    \u003ca href=\"https://developer.mozilla.org/en-US/docs/Glossary/HTML5\" target=\"_blank\"\u003eHTML\u003c/a\u003e: Linguagem de marcação utilizada na construção de páginas na Web;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003ca href=\"https://styled-components.com/\" target=\"_blank\"\u003eStyled Components\u003c/a\u003e: Biblioteca React que permite criar componentes de estilo, utilizando CSS dentro de um arquivo javascript;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\" target=\"_blank\"\u003eJavascript\u003c/a\u003e: Linguagem de programação utilizada principalmente no desenvolvimento web para a criação de interfaces dinâmicas;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003ca href=\"https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\" target=\"_blank\"\u003eReact.js\u003c/a\u003e: Biblioteca Javascript que permite aos desenvolvedores criar interfaces de usuário interativas e reutilizáveis. Sua abordagem baseada em componentes facilita a construção de aplicativos web modulares e escaláveis;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003ca href=\"https://lucide.dev/guide/packages/lucide-react\" target=\"_blank\"\u003eLucide React\u003c/a\u003e: Biblioteca ReactJS de ícones;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003ca href=\"https://firebase.google.com/docs/guides?hl=pt-br\" target=\"_blank\"\u003eFirebase\u003c/a\u003e: Plataforma BaaS multiplataforma que fornece uma estrutura Back-End pronta;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003ca href=\"https://firebase.google.com/docs/database?hl=pt-br\" target=\"_blank\"\u003eFirestore Database\u003c/a\u003e: Banco de dados NoSQL fornecido pelo Firebase;\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003ca href=\"https://vitejs.dev/guide/\" target=\"_blank\"\u003eViteJS\u003c/a\u003e: É um build tool que permite um desenvolvimento rápido para projetos web. Ele simula um servidor durante o desenvolvimento para melhorar o desempenho e a produtividade.\n  \u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 name=\"instalacoes\"\u003e💾 Instalações necessárias\u003c/h2\u003e\n\u003cp\u003ePara executar os seguintes comandos em seu \u003cstrong\u003eterminal\u003c/strong\u003e, é necessário ter o \u003ca href=\"https://git-scm.com/downloads/\" target=\"_blank\"\u003eGit\u003c/a\u003e e o \u003ca href=\"https://nodejs.org/en/download/package-manager\" target=\"_blank\"\u003eNode.JS\u003c/a\u003e (preferencialmente na versão LTS) instalados previamente e configurados.\u003c/p\u003e\n\n\u003ch3\u003eClone o repositório e entre em sua pasta\u003c/h3\u003e\n\u003ccode\u003egit clone https://github.com/ABeatrizSC/mini-blog.git\u003c/code\u003e \n\u003cbr\u003e\n\u003cbr\u003e\n\u003ccode\u003ecd mini-blog\u003c/code\u003e\n\n\u003ch3\u003eInstalação das dependências do projeto\u003c/h3\u003e\n\u003ccode\u003enpm install\u003c/code\u003e\n\n\u003ch3\u003eInicie o servidor local utilizando o Vite.js\u003c/h3\u003e\n\u003ccode\u003enpm run dev\u003c/code\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cp\u003eDê \u003ci\u003ectrl + click \u003c/i\u003e no endereço de link gerado para abrir o projeto em seu navegador.\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eCONFIGURAÇÃO DO FIREBASE\u003c/h3\u003e\n\u003cp\u003ePara criar seu próprio projeto/banco de dados no Firebase, siga o passo a passo:\u003c/p\u003e\n\u003ch4\u003e1. Login/Cadastro\u003c/h4\u003e\n\u003cp\u003eFaça login ou cadastre-se no \u003ca href=\"https://firebase.google.com/?hl=pt-br\" target=\"_blank\"\u003esite oficial do Firebase;\u003c/a\u003e\u003c/p\u003e\n\n\u003ch4\u003e2. Crie o projeto\u003c/h4\u003e\n\u003cp\u003e Ir em \"Go To Console\" ➡ \"Criar um projeto\" ➡ Insira o nome do projeto (mini-blog) ➡ Desative o Google Analytics do Projeto (opcional) ➡ \"Criar projeto\";\u003c/p\u003e\n\n\u003ch4\u003e3. Registre o App\u003c/h4\u003e\n\u003cp\u003eClique no botão \"\u0026lt;/\u0026gt;\" ➡ Registre o App (mini-blog) com a opção de hoisting desativada ➡ substitua a variável \u003ccode\u003efirebaseConfig\u003c/code\u003e do arquivo firebase/config.js com as novas configurações fornecidas;\u003c/p\u003e\n\n\u003ch4\u003e5. Crie a autenticação por e-mail e senha\u003c/h4\u003e\n\u003cp\u003eNo menu lateral esquerdo, vá em \"Criação\" ➡ \"Autenticação\" ➡ \"Método de Login\" ➡ \"E-mail/senha\" ➡ Ative as duas opções e salve;\u003c/p\u003e\n\n\u003ch4\u003e6. Crie o Banco de Dados\u003c/h4\u003e\n\u003cp\u003eAinda no menu lateral esquerdo, vá em \"Firestore Database\" ➡ \"Criar banco de dados\" ➡ \"Próxima\" ➡ \"Iniciar modo teste\" e \"Criar\";\u003c/p\u003e\n\n\u003ch4\u003e7. Adicione índices de busca\u003c/h4\u003e\n\u003cp\u003e\"Firestore Database\" ➡ \"Índices\" ➡ \"Criar índice\";\u003c/p\u003e\n\u003cp\u003eCrie os seguintes índices:\t\u003ccode\u003etagsArray Matrizes createdAt Decrescente __name__ Decrescente \u003c/code\u003e\u0026nbsp;e \u003ccode\u003euid Crescente createdAt Decrescente __name__ Decrescente\u003c/code\u003e\u0026nbsp; para que as buscas dentro do App funcionem.\u003c/p\u003e\n\n\u003ch2 name=\"contato\"\u003e🔍 Contato:\u003c/h2\u003e\n\u003ca href=\"mailto:anabeatrizscarmoni@gmail.com\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/email-fff.svg?logo=gmail\u0026logoColor=red\" alt=\"E-mail\"\u003e\n\u003c/a\u003e\n\u003ca href=\"http://www.linkedin.com/in/anabeatrizsantuccicarmoni\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/LinkedIn-0A78B5.svg?logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn\"\u003e\n\u003c/a\u003e\n\u0026nbsp;\u0026nbsp;\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabeatrizsc%2Fmini-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabeatrizsc%2Fmini-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabeatrizsc%2Fmini-blog/lists"}