Giter Site home page Giter Site logo

luizmeraki / wolf-blog Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 186 KB

Um blog desenvolvido em React

Home Page: https://wolf-blog-luizmeraki.vercel.app/

HTML 1.69% JavaScript 78.16% CSS 20.16%
context-api css-modules firebase react react-router vite javascript

wolf-blog's Introduction

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:

wolf-blog's People

Contributors

luizmeraki avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.