Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Projeto] PocketGuard - Projeto Pessoal

Salve pessoal, tudo bem?

Estou desenvolvendo uma solução web full stack chamada PocketGuard. Estou criando este projeto buscando colocar em prática os conteúdos que tenho absorvido aqui na Alura, que está em fase inicial, mas que já tenho mapeado algumas ideias do que desejo incluir na aplicação. No Front-End, estou utilizando ReactJS + TypeScript (que são os temas que estou estudando na Formação Front End neste momento). No BackEnd, pretendo aplicar Java para também colocar em prática os cursos de Java que estou estudando.

Dito isto, ainda que tenha bastante coisa para fazer, gostaria de puxar um feedback da galera: seja em questão de funcionalidade, código, etc...abaixo os links para análise.

Deploy: https://pocketguard.vercel.app/ Repositório: https://github.com/DanielEmidio1988/pocketguard

Grande abraço a todos!

3 respostas

Oi Daniel! Tudo bem?

Primeiro queria te parabenizar: que ótimo que você está aplicando os conhecimentos dos cursos em um projeto prático! Essa é uma das melhores formas de fixar os conhecimentos, aprender coisas novas e ainda construir seu portfólio. Você está de parabéns!

Sobre o projeto: achei sua ideia incrível! Minha única ideia, do ponto de vista do front-end, seria criar algum tipo de barra de navegação pra facilitar a ida da visualização dos valores de saldo, para o form e para a tabela. Você pode pesquisar outras aplicações que sejam de lançamento financeiro e se inspirar em alguma para criar essa navegação. É interessante porque você já treina também seu olhar para layouts.

Novamente, meus parabéns pela dedicação e comprometimento. Ficamos felizes demais quando estudantes como você compartilham seus projetos com a gente. Caso você se sinta confortável, também é interessante compartilhar o que você construiu lá na comunidade do Discord, para trocar conhecimentos e ideias com outros estudantes.

Caso precise tirar dúvidas, conte com o fórum!

Um abraço e bons estudos!

Oi Rafaela, tudo bem e você?

Legal sua sugestão, estava pensando em uma forma de exibir os campos financeiros, mas sua ideia parece interessante. Sobre o layout, eu tenho uns 3 modelos separados como inspiração, mas ainda não me dediquei totalmente ao Design pois ainda estou definindo como o Pocket Guard será no final.

A minha ideia é criar uma página de login, onde cada usuário terá seu controle financeiro e ele pode acessar seções de lançamento financeiro, relatórios, dados pessoais. Apesar de existirem várias ferramentas que fazem isso, optei por criar uma para uso pessoal até para assimilar os conhecimentos adquiridos pois quero aplica-los em outro projeto pessoal que chamo de r-Beauty.

Do Backend, ainda não tenho certeza se vou seguir com Java, mas caso negativo, penso em utilizar MongoDB que tenho mais familiaridade e no r-Beauty utilizo Java.

Apenas fico com uma dúvida. No Reactjs, quando utilizo Context API, apenas preciso fazer a declaração abaixo:

import { createContext } from 'react';

const GlobalContext = createContext();

Mas no Reactjs + Typescript parece que é diferente. Como seria a declaração?

Grande abraço!

solução!

Olá, Daniel! Tudo bem comigo também, obrigada por perguntar :)

Fico muito feliz em saber que você está evoluindo o PocketGuard e já pensando nas próximas etapas, como a criação da página de login. Isso vai agregar bastante valor ao seu projeto.

Sobre a sua dúvida em relação ao uso do Context API com TypeScript no React, a principal diferença em relação ao React puro é a necessidade de definir os tipos que o contexto vai armazenar. Em TypeScript, quando você cria um contexto, é importante especificar os tipos dos dados e funções que serão compartilhados para que o TypeScript possa realizar as verificações de tipo necessárias e evitar erros no seu código.

Para entender melhor como isso funciona na prática e ver exemplos de implementação, recomendo fortemente que você leia o artigo Context API e TypeScript: como utilizar o superpoder desta dupla que vai falar sobre como utilizar o Context API com TypeScript e vai te ajudar a aplicar essa abordagem de forma correta no seu projeto.

Espero que essa explicação tenha te ajudado com sua dúvida!

Em caso de outras dúvidas, conte com o apoio do fórum ✨

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!