ProjetoMiniBlog.mp4
- 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.
- "/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;
Acesse a visualização completa do Projeto Mini Blog aqui.
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.
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.
git clone https://github.com/ABeatrizSC/mini-blog.git
cd mini-blog
npm install
npm run dev
Dê ctrl + click no endereço de link gerado para abrir o projeto em seu navegador.
Para criar seu próprio projeto/banco de dados no Firebase, siga o passo a passo:
Faça login ou cadastre-se no site oficial do Firebase;
Ir em "Go To Console" ➡ "Criar um projeto" ➡ Insira o nome do projeto (mini-blog) ➡ Desative o Google Analytics do Projeto (opcional) ➡ "Criar projeto";
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;
No menu lateral esquerdo, vá em "Criação" ➡ "Autenticação" ➡ "Método de Login" ➡ "E-mail/senha" ➡ Ative as duas opções e salve;
Ainda no menu lateral esquerdo, vá em "Firestore Database" ➡ "Criar banco de dados" ➡ "Próxima" ➡ "Iniciar modo teste" e "Criar";
"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.