image

Accede a bootcamps ilimitados y a más de 650 cursos

50
%OFF
Article image
Erica Fidelis
Erica Fidelis08/03/2026 09:09
Compartir
Luizalabs - Back-end com Python - 2º EdiçãoRecomendado para tiLuizalabs - Back-end com Python - 2º Edição

Cofre da Gratidão: Minha primeira experiência Full-Stack com Firebase e JavaScript

  • #HTML
  • #JavaScript
  • #CSS
  • #Firebase

Vamos falar de gratidão?

Muitas vezes, na pressa de aprender novas linguagens e frameworks, esquecemos de pausar e reconhecer nossas pequenas vitórias. A gratidão é uma ferramenta poderosa de perspectiva, e foi com esse sentimento que decidi construir o Cofre da Gratidão.

Este projeto nasceu do desejo de criar algo com propósito enquanto sólido meus conhecimentos em minha transição para a área de TI.

Objetivo:

O objetivo era criar uma aplicação responsiva que permitisse aos usuários registrar momentos de gratidão de forma privada, mas que também oferecesse um espaço de interação global (Meu global).

Tecnologias Utilizadas

Para dar vida ao projeto, utilizei um conjunto de tecnologias que me permitiram entender o fluxo completo de uma aplicação:

  • Frontend: Desenvolvido com HTML5 e CSS3, utilizei técnicas de Glassmorphism para criar uma interface moderna e limpa que funciona perfeitamente em dispositivos móveis.
  • Lógica de Programação: O JavaScript foi o coração do projeto, gerenciando a navegação entre telas e a manipulação de dados.
  • Backend & Banco de Dados (Firebase): Integrei o Firebase Realtime Database para criar um "Mural Global" de feedbacks. Foi uma experiência incrível ver os dados sendo sincronizados em tempo real entre diferentes usuários.
  • Persistência Local: Utilizeos o LocalStorage para garantir que os registros pessoais de gratidão ficassem salvos com segurança no navegador do usuário, mantendo sua privacidade.
  • Recursos Visuais: Implementei bibliotecas como html2canvas para gerar cards compartilháveis e canvas-confetti para celebrar o momento do registro.

Aprendizados

Construir o Cofre da Gratidão me ensinou muito sobre a importância de conectar o Frontend ao Backend e como gerenciar estados simples em uma aplicação web. Mais do que código, aprendi que a tecnologia é um meio de amplificar sentimentos positivos.

Como utilizar:

Página Inicial: Ao abrir o link do projeto, você é recebido por uma mensagem inspiradora sobre a importância de agradecer. Basta escolher entre guardar uma nova gratidão ou ver o mural.

Guardar Gratidão: Clique em "Guardar Gratidão" e escreva o que aqueceu seu coração hoje. Ao salvar, uma chuva de confetes celebra o momento e o registro fica guardado com segurança no seu navegador.

Ver Banco & Criar Card: Na sua lista pessoal, você pode rever tudo o que escreveu e clicar em "Baixar Foto". O app gera automaticamente um card personalizado para você compartilhar onde quiser!

Mural Global (Público): Quer espalhar essa energia? No Mural Global, você pode deixar um feedback com estrelas e um comentário. Graças ao Firebase, sua mensagem aparece instantaneamente para todos os outros usuários do site!

Confira o projeto: https://ericafidelis.github.io/Cofre_de_Luz/

Repositório: https://github.com/EricaFidelis

Espero que esse projeto inspire vocês a também reservarem um momento para agradecer hoje! (Sou iniciante)

Compartir
Recomendado para ti
Ri Happy - Front-end do Zero #2
Savegnago - Lógica de Programação
GFT Start #6 - Lógica de Programação
Comentarios (1)
Sergio Santos
Sergio Santos - 08/03/2026 14:09

Parabéns pelo Projeto.

Recomendado para tiLuizalabs - Back-end com Python - 2º Edição