Skip to content

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

Notifications You must be signed in to change notification settings

ABeatrizSC/mini-blog

Repository files navigation

HTML Styled Components JavaScript React

Projeto Mini Blog

Sobre   |    Rotas (Telas)   |    Deploy   |    Tecnologias   |    Instalacoes necessarias   |    Contato

ProjetoMiniBlog.mp4

📝 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

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:

E-mail LinkedIn   

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published