Visão Geral

Este curso ensina a criar um aplicativo de finanças pessoais usando React JS, permitindo o controle de receitas, despesas, orçamentos e visualização de gráficos financeiros. O foco é construir uma aplicação prática, interativa e pronta para produção, com gerenciamento de dados e boas práticas de desenvolvimento.

Objetivo

Após realizar este curso, você será capaz de:

• Criar cadastro e controle de receitas e despesas
• Implementar categorias e filtros financeiros
• Exibir gráficos e relatórios financeiros dinâmicos
• Gerenciar estado da aplicação de forma eficiente
• Persistir dados localmente ou via APIs
• Desenvolver um app de finanças pessoais completo pronto para produção

Publico Alvo

• Desenvolvedores React que querem criar aplicativos financeiros
• Pessoas que desejam controlar finanças pessoais digitalmente
• Estudantes que querem projetos práticos de React
• Profissionais que querem aprender integração com APIs e gráficos

Pre-Requisitos

• Fundamentos de JavaScript
• Conhecimento básico em React JS
• Noções de HTML, CSS e consumo de APIs

Conteúdo Programatico

Module 1 – Project Setup and Planning

1. Defining project requirements
2. Setting up React project (Vite / Create React App)
3. Structuring components for scalability
4. Installing necessary libraries (charting, state management)

Module 2 – Managing Income and Expenses

1. Creating forms for income and expense entries
2. Validating input data
3. Adding, editing, and removing transactions
4. Displaying transactions dynamically

Module 3 – Categories and Filters

1. Implementing transaction categories
2. Filtering by type, date, or category
3. Sorting transactions
4. Updating UI based on filters

Module 4 – State Management

1. Using React state and props
2. Context API for global state
3. Optional: Redux or Zustand integration
4. Syncing state with backend or local storage

Module 5 – Data Persistence

1. Storing data in localStorage
2. Optional: connecting to REST API or Supabase
3. Handling asynchronous operations
4. Error handling and retries

Module 6 – Data Visualization

1. Implementing charts (bar, pie, line)
2. Dynamic visualization of income and expenses
3. Dashboard overview with metrics and KPIs
4. Real-time updates in charts

Module 7 – UI/UX Enhancements

1. Styling with CSS, Tailwind, or Material UI
2. Responsive design for mobile and desktop
3. Visual feedback for actions (loading, success, error)
4. Creating reusable components

Module 8 – Final Application and Deployment

1. Integrating all features
2. Testing flows and edge cases
3. Building for production
4. Deploying the application