Desenvolvendo minha aplicação lista de tarefas com armazenamento em banco de dados !

Como Consegui Desenvolver uma Aplicação Todo List com Node.js, React, TypeScript e Mais

Ser um desenvolvedor iniciante para mim tem sido desafiador, mas também incrivelmente recompensador. Recentemente, consegui desenvolver minha aplicação d…


This content originally appeared on DEV Community and was authored by Michael Moranis

Como Consegui Desenvolver uma Aplicação Todo List com Node.js, React, TypeScript e Mais

Ser um desenvolvedor iniciante para mim tem sido desafiador, mas também incrivelmente recompensador. Recentemente, consegui desenvolver minha aplicação de lista de tarefas que armazena dados em um banco de dados, usando algumas tecnologias que tenho estudado desde então. Neste artigo, vou compartilhar minha jornada, as ferramentas que usei e as dificuldades que enfrentei ao longo do caminho.

Tecnologias Utilizadas

Aqui estão as tecnologias usadas no meu projeto:

  • Frontend: React, TypeScript, TailwindCSS
  • Backend: Node.js, Fastify
  • Banco de Dados: PostgreSQL
  • Hospedagem: Render para o backend
  • Neon.tech: para o banco de dados
  • Vercel: para hospedagem do codigo frontend

Minha Jornada

O Início

Quando comecei, meu conhecimento em desenvolvimento web era limitado. Embora eu já tivesse aprendido o básico de JavaScript e HTML, construir uma aplicação completa parecia um grande desafio. Optei por criar uma lista de tarefas porque é um projeto clássico para iniciantes e também porque minha esposa ainda costuma anotar numa folha de papel os produtos que vai buscar no mercado, mas queria levar isso um passo além, integrando um banco de dados e um backend desenvolvido por mim mesmo.

Desafios Encontrados

1. Configuração do Ambiente

Uma das primeiras dificuldades que enfrentei foi a configuração do ambiente de desenvolvimento. Aprender a usar o Node.js e configurar o TypeScript não foi muito facil começo. O TypeScript, em particular, exigiu que eu compreendesse o conceito de tipos estáticos, o que adicionou uma camada de complexidade ao meu código.

2. Integração do Backend

Escolhi o Fastify como framework para o backend devido à sua performance e simplicidade. Pude entender como escrever queries SQL e gerenciar conexões com o banco de dados. Além disso, lidar com respostas assíncronas e promises no JavaScript exigiu paciência, prática e muitas consultas na web e usando o chatgpt para exemplos.

3. Estilização com TailwindCSS

TailwindCSS é uma ferramenta poderosa para estilização, mas como iniciante, demorei um pouco para me acostumar com sua abordagem utilitária. Criar um design responsivo e esteticamente agradável foi uma curva de aprendizado, mas com o tempo, comecei a apreciar a flexibilidade que o Tailwind oferece bem como consigo usar da sua padronização em todo o meu codigo.

4. Hospedagem e Deploy

Depois de finalizar o desenvolvimento, fui para a hospedagem. Utilizar o Render para o backend foi relativamente simples, mas garantir que a aplicação funcionasse corretamente em produção apresentou seus próprios desafios. O Neon.tech facilitou o processo de gerenciamento do banco de dados PostgreSQL, e assim pude aprender como configurar variáveis de ambiente e garantir a segurança dos dados.

Superando as Dificuldades

A chave para superar esses desafios foi a persistência e a disposição para aprender. Pesquisar soluções, fazer varios testes, commits, testes e consultas no chatgpt me ajudaram a desenvolver minha primeira aplicação do frontend ao backend sendo um entusiasta do mundo dev indie !!!

Conclusão

Desenvolver uma aplicação de lista de tarefas com um backend e banco de dados foi uma experiência educativa e gratificante. Cada desafio superado me tornou um desenvolvedor mais confiante e habilidoso. Se você está começando, meu conselho é abraçar os desafios e não ter medo de pedir ajuda. Com tempo e dedicação, você também pode alcançar seus objetivos de desenvolvimento.

Espero que este artigo ajude outros desenvolvedores iniciantes a entenderem os desafios e as recompensas de criar um projeto do início ao fim. Se você tiver alguma dúvida ou quiser compartilhar sua experiência, sinta-se à vontade para deixar um comentário!


This content originally appeared on DEV Community and was authored by Michael Moranis


Print Share Comment Cite Upload Translate Updates
APA

Michael Moranis | Sciencx (2024-08-04T20:54:37+00:00) Desenvolvendo minha aplicação lista de tarefas com armazenamento em banco de dados !. Retrieved from https://www.scien.cx/2024/08/04/desenvolvendo-minha-aplicacao-lista-de-tarefas-com-armazenamento-em-banco-de-dados/

MLA
" » Desenvolvendo minha aplicação lista de tarefas com armazenamento em banco de dados !." Michael Moranis | Sciencx - Sunday August 4, 2024, https://www.scien.cx/2024/08/04/desenvolvendo-minha-aplicacao-lista-de-tarefas-com-armazenamento-em-banco-de-dados/
HARVARD
Michael Moranis | Sciencx Sunday August 4, 2024 » Desenvolvendo minha aplicação lista de tarefas com armazenamento em banco de dados !., viewed ,<https://www.scien.cx/2024/08/04/desenvolvendo-minha-aplicacao-lista-de-tarefas-com-armazenamento-em-banco-de-dados/>
VANCOUVER
Michael Moranis | Sciencx - » Desenvolvendo minha aplicação lista de tarefas com armazenamento em banco de dados !. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/04/desenvolvendo-minha-aplicacao-lista-de-tarefas-com-armazenamento-em-banco-de-dados/
CHICAGO
" » Desenvolvendo minha aplicação lista de tarefas com armazenamento em banco de dados !." Michael Moranis | Sciencx - Accessed . https://www.scien.cx/2024/08/04/desenvolvendo-minha-aplicacao-lista-de-tarefas-com-armazenamento-em-banco-de-dados/
IEEE
" » Desenvolvendo minha aplicação lista de tarefas com armazenamento em banco de dados !." Michael Moranis | Sciencx [Online]. Available: https://www.scien.cx/2024/08/04/desenvolvendo-minha-aplicacao-lista-de-tarefas-com-armazenamento-em-banco-de-dados/. [Accessed: ]
rf:citation
» Desenvolvendo minha aplicação lista de tarefas com armazenamento em banco de dados ! | Michael Moranis | Sciencx | https://www.scien.cx/2024/08/04/desenvolvendo-minha-aplicacao-lista-de-tarefas-com-armazenamento-em-banco-de-dados/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.