Este repositório contém o código-fonte e os recursos relacionados ao projeto "Educação Financeira para o Futuro: Plataforma Interativa de Investimentos para Jovens". Este projeto faz parte de uma iniciativa da Pró-reitoria de Extensão do UniFOA, no âmbito do Projeto de Extensão Integrado.
O projeto visa criar uma plataforma digital que simule ambientes de investimento, permitindo que jovens apliquem conhecimentos de educação financeira de forma prática e interativa. A iniciativa busca capacitar os estudantes com habilidades financeiras fundamentais, preparando-os para tomar decisões econômicas informadas no futuro.
- Sistemas de Informação
- Engenharia de Produção
- Contribuir para a formação de jovens conscientes e preparados para gerir suas finanças pessoais.
- Desenvolver competências financeiras por meio de uma plataforma interativa que simula investimentos.
- Atualizar as práticas pedagógicas em educação financeira.
- Capacitar os docentes para lidar com as necessidades educacionais diversas, promovendo uma educação mais inclusiva.
Este projeto busca preencher a lacuna na educação financeira entre jovens, fornecendo uma ferramenta prática e educativa. Ao desenvolver essa plataforma, espera-se contribuir para a formação de uma geração mais preparada e consciente financeiramente.
- React.js: Biblioteca JavaScript para construção de interfaces de usuário.
- TypeScript: Linguagem de programação que adiciona tipagem estática ao JavaScript.
- Tailwind: Biblioteca para simplificar a escrita de CSS, proporcionando maior agilidade na criação de interfaces.
- ShadcnUI: Biblioteca de UI altamente compatível com Tailwind, facilitando a estilização dos componentes.
- Vite: Ferramenta de build e desenvolvimento rápida e leve para projetos web modernos.
- ESLint: Ferramenta de linting para JavaScript e TypeScript, ajudando a manter um código consistente e livre de erros.
- React Router DOM: Biblioteca de roteamento para React, permitindo navegação dinâmica entre páginas em aplicativos de página única (SPA).
- Prettier: Ferramenta de formatação de código que garante um estilo consistente, facilitando a legibilidade e manutenção do código.
- Zod: Biblioteca de validação de dados que permite criar schemas e garantir segurança e consistência nos dados.
- Sonner: Biblioteca para exibição de notificações e mensagens visuais no front-end.
- Three.js: Biblioteca para criação de gráficos 3D e visualizações interativas no navegador.
- Shepherd.js: Biblioteca para criação de tutoriais interativos e guias de introdução em aplicativos.
- Recharts: Biblioteca para construção de gráficos e visualizações de dados de forma simples e customizável.
- Framer Motion: Biblioteca para animações em React, oferecendo uma API intuitiva e poderosa.
- date-fns: Biblioteca para manipulação de datas de forma simples, eficiente e modular.
- TanStack Table: Biblioteca para criação e manipulação de tabelas em React, com funcionalidades avançadas e flexíveis.
- Link do site: Futuro Financeiro
Siga as etapas abaixo para configurar e executar o projeto localmente para desenvolvimento.
Antes de começar, certifique-se de ter instalado:
- Node.js (versão 16 ou superior)
- npm (gerenciadores de pacotes)
-
Clone este repositório em sua máquina local:
git clone https://github.com/Arthu-RL/FuturoFinanceiro.git
-
navegue até o diretório do projeto
cd FuturoFinanceiro -
Instale as dependências do projeto:
npm install
-
Configure arquivo
.envna raíz do projeto:VITE_CURRENCY_API_URL="https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1" -
Inicie o servidor de desenvolvimento:
npm run dev
Agora a aplicação estará rodando localmente em http://localhost:5173.
- O ESLint ajuda a identificar e corrigir problemas no código JavaScript e TypeScript, promovendo práticas de codificação consistentes e evitando erros comuns.
- Instalação: ESLint
- O Prettier formata automaticamente o código para garantir um estilo consistente e limpo, aplicando regras de formatação ao salvar arquivos.
- Instalação: Prettier - Code formatter
- Oferece suporte para desenvolvimento com Tailwind CSS, com autocompletar e sugestões de classe diretamente no editor.
- Instalação: Tailwind CSS IntelliSense
Para garantir a qualidade e a consistência do código no projeto, siga as boas práticas abaixo durante o desenvolvimento:
- Divida o código em componentes reutilizáveis: Mantenha seus componentes React pequenos e focados em uma única responsabilidade.
- Nomeie componentes de forma clara: Utilize nomes que descrevam de maneira objetiva a funcionalidade do componente.
- Evite duplicação de código: Se um padrão se repete em várias partes do projeto, transforme-o em um componente reutilizável.
- Use hooks com parcimônia: Centralize o estado global em
providerssempre que possível, minimizando a duplicação de estados locais. - Evite lifting state desnecessário: Prefira contextos de estado para compartilhar dados entre componentes em diferentes níveis.
- Propriedades claras e tipadas: Defina e documente bem as
propsusando TypeScript, para garantir segurança e clareza no uso.
- Utilize classes do Tailwind CSS: Evite a criação excessiva de arquivos CSS e prefira o uso de utilitários de estilo do Tailwind para estilização rápida e consistente.
- Manter classes organizadas: Agrupe classes semelhantes para manter legibilidade no JSX.
- Agrupe por funcionalidade: Organize componentes, hooks e rotas em pastas que sigam uma estrutura lógica, facilitando a manutenção e escalabilidade.
- Evite diretórios com muitos arquivos: Sempre que o número de arquivos crescer significativamente, reavalie a estrutura do projeto e considere a criação de subdiretórios.
- Use ESLint e Prettier: Mantenha o código limpo, padronizado e livre de erros comuns, utilizando as extensões recomendadas para linting e formatação automática.
- Remova código morto: Evite manter código comentado ou funções que não estão mais sendo utilizadas.
Visão geral da estrutura de arquivos do projeto:
FuturoFinanceiro/
├── public/ # Arquivos públicos (ex: robots.txt, favicon)
├── src/ # Código-fonte do projeto
│ ├── assets/ # Arquivos estáticos (imagens, fontes, etc.)
│ ├── components/ # Componentes React
│ │ └── ui/ # Componentes do shadcnUI
│ ├── lib/ # Funções e recursos relacionados a bibliotecas instaladas
│ ├── pages/ # Páginas da aplicação
│ ├── providers/ # Providers de estado do React
│ ├── routes/ # Rotas da aplicação
│ ├── stylesheets/ # Arquivos de estilo (CSS, reset, variáveis)
│ ├── hooks/ # Custom hooks
│ ├── App.tsx # Componente principal
│ ├── main.tsx # Ponto de entrada da aplicação
│ └── vite-env.d.ts # Arquivo de `type declarations` do Vite
├── .gitignore # Arquivos ignorados pelo Git
├── .prettierrc # Configurações do Prettier
├── components.json # Configurações do shadcnUI
├── CONTRIBUTING.md # Como contribuir com o projeto
├── index.html # Arquivo HTML principal
├── package.json # Dependências e scripts do projeto
├── README.md # Documentação do projeto
├── tailwind.config.js # Configurações do Tailwind CSS
└── TODO.md # Lista de tarefas pendentes
Para ver a lista completa de tarefas e pendências do projeto, consulte o TODO.md Este arquivo contém todas as atividades e melhorias planejadas para o desenvolvimento do projeto.
Se você deseja contribuir com este projeto, por favor, consulte o CONTRIBUTING.md para obter diretrizes detalhadas sobre como proceder.
- Home
- Navegação
- Simulador