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

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: