Este é um projeto com foco em estudos. É um aplicativo web de controle de gastos que permite aos usuários gerenciar suas despesas e receitas. O projeto inclui uma landing page e requer autenticação para acessar as páginas principais.
- CRUD (criação, leitura, atualização e exclusão) para os dados do usuário.
- Controle de lançamentos de gastos e receitas.
- Totalizadores de gastos e entradas com base no mês selecionado.
- Renderização dinâmica da lista de custos de acordo com o mês selecionado pelo usuário.
- React: Biblioteca JavaScript para construção de interfaces de usuário.
- Next.js: Framework React de renderização do lado do servidor (SSR) e criação de aplicativos web.
- Firebase: Plataforma de desenvolvimento de aplicativos móveis e web.
- TypeScript: Linguagem de programação JavaScript com suporte a tipos estáticos.
- Tailwind CSS: Framework CSS utilitário para criação de interfaces responsivas.
- Mantine: Biblioteca de componentes React com foco em usabilidade e acessibilidade.
- Tabler Icons: Conjunto de ícones SVG gratuitos para uso em interfaces.
- HTML5: Linguagem de marcação para estruturar e apresentar o conteúdo da web.
- JavaScript (JS): Linguagem de programação para adicionar interatividade a páginas web.
- CSS: Linguagem de estilo para estilizar os elementos da página.
O projeto inclui um sistema de autenticação que controla o acesso às páginas principais. A autenticação é necessária para garantir que apenas usuários registrados possam acessar as funcionalidades do aplicativo.
Ao acessar o aplicativo, os usuários serão redirecionados para a landing page, onde encontrarão opção para criar uma nova conta ou fazer login social. Após o registro ou o login bem-sucedido, os usuários serão direcionados às páginas principais, onde poderão gerenciar suas despesas e receitas.
Caso um usuário não autenticado tente acessar diretamente as páginas principais sem fazer login, ele será redirecionado para a landing page.
Siga as instruções abaixo para executar o projeto localmente:
- Clone este repositório.
- Navegue até o diretório do projeto.
- Execute o comando
npm install
para instalar as dependências. - Execute o comando
npm run dev
para iniciar o servidor de desenvolvimento. - Abra o navegador e acesse
http://localhost:3000
.
obs: necessário configuração do firebase Console do Firebase
Após as configurações no firebase, basta configurar o projeto
-
Copie as informações de configuração fornecidas pelo Firebase e adicione-as ao seu projeto.
-
No diretório do projeto, abra o arquivo .env.local (ou crie um novo arquivo .env.local na raiz do projeto). Adicione as seguintes variáveis de ambiente no arquivo .env.local:
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_API_KEY=