https://github.com/abeatrizsc/mini-blog

Cadastre-se, faça login e crie posts com o projeto Mini Blog. | Javascript, ReactJS, Firebase e Styled Components
https://github.com/abeatrizsc/mini-blog

authentication baas-integration blog firebase firebase-auth front-end javascript reactjs styled-components

Last synced: about 2 hours ago
JSON representation

Cadastre-se, faça login e crie posts com o projeto Mini Blog. | Javascript, ReactJS, Firebase e Styled Components

• Host: GitHub
• URL: https://github.com/abeatrizsc/mini-blog
• Owner: ABeatrizSC
• Created: 2024-07-09T01:17:24.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-19T01:29:44.000Z (4 months ago)
• Last Synced: 2024-07-19T08:54:24.296Z (4 months ago)
• Topics: authentication, baas-integration, blog, firebase, firebase-auth, front-end, javascript, reactjs, styled-components
• Language: JavaScript
• Homepage: https://mini-blog-teal.vercel.app
• Size: 133 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 

    

        

    

    

        

    

    

        

    

    

        

    



 

  
Projeto Mini Blog

    

  [Sobre](#sobre)   |    [Rotas (Telas)](#rotas)   |    [Deploy](#deploy)   |    [Tecnologias](#tecnologias)   |    [Instalacoes necessarias](#instalacoes)   |    [Contato](#contato)



https://github.com/user-attachments/assets/017cc061-83ee-4963-8103-c753dde5dfe7

📝 Sobre



  
Através do projeto Mini Blog, é possível realizar cadastro/login, publicar, alterar, visualizar e remover posts;

  

  
O Back-End foi feito utilizando a plataforma do Firebase, o qual fornece toda a estrutura necessária e armazena seus dados em um banco NoSQL;

  

  
A implementação da autenticação foi feita com Firebase Authentication, 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;

  
Com este projeto, pude aprender mais sobre o Firebase e sua integração com o lado Front-End da aplicação.



📲 Rotas (Telas)



  


    "/register": Página de cadastro do usuário, onde deverá ser inserido nome, email, senha e confirmação de senha;

  

  


    "/login": Após criar um cadastro, o usuário poderá utilizar a Tela de Login para adentrar o sistema;

  

  


    "/": Página Home (Inicial) assim que é confirmada a autenticação de Login;

  

  


    "/search?q=[tag]": 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;

  

  


    "/posts/create": Reservada a criação de um post. Todos os campos são obrigatórios: Título do Post, imagem, conteúdo e tags;

  

  


    "/posts/[idDoPost]": Exibe detalhes de um post específico ao clicar no botão "Ver post";

  

  


    "/posts/edit/[idDoPost]": Formulário idêntico ao de criação do post, com informações do post selecionado para alteração. Todos os campos obrigatórios;

  

  


    "/dashboard": Área de gerenciamento de posts de um usuário, onde todos são listados e há ações de visualizar, editar e excluir; 

  



🔗 Deploy

Acesse a visualização completa do Projeto Mini Blog  aqui.


💻 Tecnologias

Feito através do editor Visual Studio Code.



  


    HTML: Linguagem de marcação utilizada na construção de páginas na Web;

  

  


    Styled Components: Biblioteca React que permite criar componentes de estilo, utilizando CSS dentro de um arquivo javascript;

  

  


    Javascript: Linguagem de programação utilizada principalmente no desenvolvimento web para a criação de interfaces dinâmicas;

  

  


    React.js: 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;

  

  


    Lucide React: Biblioteca ReactJS de ícones;

  

  


    Firebase: Plataforma BaaS multiplataforma que fornece uma estrutura Back-End pronta;

  

  


    Firestore Database: Banco de dados NoSQL fornecido pelo Firebase;

  

  


    ViteJS: É 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.

  



💾 Instalações necessárias

Para executar os seguintes comandos em seu terminal, é necessário ter o Git e o Node.JS (preferencialmente na versão LTS) instalados previamente e configurados.


Clone o repositório e entre em sua pasta

git clone https://github.com/ABeatrizSC/mini-blog.git 







cd mini-blog


Instalação das dependências do projeto

npm install


Inicie o servidor local utilizando o Vite.js

npm run dev







Dê ctrl + click  no endereço de link gerado para abrir o projeto em seu navegador.


CONFIGURAÇÃO DO FIREBASE

Para criar seu próprio projeto/banco de dados no Firebase, siga o passo a passo:

1. Login/Cadastro

Faça login ou cadastre-se no site oficial do Firebase;


2. Crie o projeto

 Ir em "Go To Console" ➡ "Criar um projeto" ➡ Insira o nome do projeto (mini-blog) ➡ Desative o Google Analytics do Projeto (opcional) ➡ "Criar projeto";


3. Registre o App

Clique no botão "</>" ➡ Registre o App (mini-blog) com a opção de hoisting desativada ➡ substitua a variável firebaseConfig do arquivo firebase/config.js com as novas configurações fornecidas;


5. Crie a autenticação por e-mail e senha

No menu lateral esquerdo, vá em "Criação" ➡ "Autenticação" ➡ "Método de Login" ➡ "E-mail/senha" ➡ Ative as duas opções e salve;


6. Crie o Banco de Dados

Ainda no menu lateral esquerdo, vá em "Firestore Database" ➡ "Criar banco de dados" ➡ "Próxima" ➡ "Iniciar modo teste" e "Criar";


7. Adicione índices de busca

"Firestore Database" ➡ "Índices" ➡ "Criar índice";

Crie os seguintes índices:	tagsArray Matrizes createdAt Decrescente __name__ Decrescente  e uid Crescente createdAt Decrescente __name__ Decrescente  para que as buscas dentro do App funcionem.


🔍 Contato: