Skip to content

LuizMeraki/Wolf-Blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Wolf Blog 🐺




Sobre

Eu desenvolvi o projeo Wolf Blog para fins didáticos pessoais, afim de pôr em prática os conhecimentos que eu adquiri dos meus estudos; podendo assim, demonstrar e comprovar conhececimento nas tecnologias da minha stack.

O projeto não é para uso do dia a dia, por isso não se trata de um blog completo, porém com este projeto pude utilizar vários conceitos que são empregados no dia a dia de um programador no mercado de trabalho. Segue uma lista com os principais conceitos aplicados neste projeto:

  • CRUD - Criação, leitura, atualização e deleção de dados. Por exemplo, criar um novo post, traze-lo ao usuário, atualizar e deletar o mesmo.
  • SPA - Páginas dinâmicas que alteram seu conteúdo sem serem atualizadas.
  • Autenticação de usuários - O usuário só consegue usufruir da plataforma caso tenha criado uma conta e esteja autenticado.
  • Integração no banco de dados - Os dados do usuário como: e-mail, senha, posts..., estão salvos no banco de dados do google, através do Firebase, uma ferramenta com plano gratuito de banco de dados.

Estes foram uns dos PRINCIPAIS conceitos empregados nesta aplicação, conceitos que são utilizados no mercado de trabalho, logo, trazendo como prova uns dos conhecimentos necessário de um desenvolvedor front-end.

Entre na plataforma e faça seu próprio post!

Link: Wolf Blog


Tecnologias

Entendendo sobre a aplicação, vamos falar um pouco sobre as tecnologias e ferramentas que foram utilizadas para chegar neste produto final do projeto.


  • Vite
    • Para gerar a estrutura da aplicação, eu utilizei o Vite, que é uma ferramenta super perfomática e simples de se usar, utilizei ela pois nem se compara com o CRA quando se trata de desempenho e produtividade.


  • JavaScript
    • Como linguagem, utilizei o JavaScript, que é a única linguagem de programação que é nativa dos navegadores e que está presente em quase 100% de todos os sites, então, já era de se esperar ele por aqui.

      Mas vale resaltar que com este projeto me desafiei bastante, assim pude aprimorar minha lógica para solução de problemas e aprender novos recursos da linguagem.


  • React
    • Para criar uma SPA, utilizei o React ( que fazz parte da minha stack ), ele é uma biblioteca para criação de SPAs (Single Page Application). Sem contar que seu uso está em alta e é a bibliotemais utilizada, mais até do que frameworks concorrentes.

      Com este projeto pude aprender muito mais sobre o React e seu funcionamento, seus hooks e fucionalidades, o que me elevou para outro nível.


  • React Router
    • Essa é uma biblioteca de roteamanto padrão do React, com ela pude criar as rotas e navegação entre todas as páginas da aplicação. Logo, com este projeto aprendi mais sobre seus recursos para implementar lógicas de autenticação do usuário, a extração de parâmetros de URL e envio do mesmo.


  • Context API
    • O Context API é um recurso nativo do React nos permite compartilhar estados (informações) por todo o app, dessa forma eu pude reaproveitar a autenticação do usuário por toda a aplicação, fazendo verificações para exibir diferentes conteúdos com base na autenticação do usuário.


  • Firebase
    • Esta foi a ferramenta que utilizei para armazenar os dados dos usuários, este é um banco de dados do google que possui várias funcionalidades para aprimorar o desenvolvimento e a integração com o mesmo.


  • CSS Modules
    • Com o CSS Modules eu estilizei a aplicação, pois com ele consigo privar os estilos de cada componente e página sem que os vazem para outros, evitando assim problemas nos estilos da página como um todo.


Imagens do projeto

Principais páginas



Fale comigo

Caso você esteja interessado em me contatar para uma oportunidade de trabalho, freelancer, ou até mesmo se você for outro dev que precisa de ajuda ou gostaria de fazer um projeto juntos; eu irei deixar aqui minhas principais social medias: