Wallet is a Next.js dashboard template for managing personal finances — it tracks income (entradas) and expenses (saídas) with Firebase authentication and interactive charts.
What is Wallet?
Wallet is an interactive dashboard built with Next.js and React that controls financial entries and exits. It takes user authentication credentials — either email/password or a Google account — and financial transaction records, then produces a real-time overview of total balance, lists of incomes and expenses, and interactive charts. The project runs on the Next.js framework, uses Firebase Realtime Database for storage, and is authored by Lucas Gomes under the MIT license.
Key Features
Wallet's feature set covers the full flow from login to editing transactions:
- Firebase Authentication — Users can log in with email and password or with Google; the auth state is persisted using JWT Cookie.
- Income and expense CRUD — Create, list, edit, and delete both income and expense records with dedicated pages and a modal-based editing flow.
- Interactive charts and totals — The home page computes the difference between total income and total expenses and displays animated counters with React Count Up.
- Form validation — New entry and expense forms use React Hook Form with Yup schemas, providing inline error management.
- Redux Toolkit state — Global state for authentication and transactions is managed with Redux and Redux Toolkit.
- Firebase Realtime Database — All transactions are stored in Firebase Realtime Database and update live in the UI.
- SASS styling — The UI layer is built with SASS, and the layout includes pages for login, account creation, home, income, and expenses.
Who is it for?
Wallet targets three kinds of users:
- Individuals managing personal budgets — Track income and expenses, then review the net balance and charts on the home dashboard.
- Developers starting a Firebase + Next.js app — Use this project as a working reference for wired-up Firebase auth, a real-time database, and validated forms.
- Freelancers and small teams — Keep a simple record of project income and business expenses without needing a full accounting suite.
What can you do with Wallet?
This template lets you do the following:
- Track monthly cash flow — Add income and expense records; the dashboard recalculates the balance and updates charts immediately.
- Enable one-click Google login — Configure Firebase and users can sign in with their Google account in addition to email/password.
- Edit historical transactions — Open any income or expense in a modal, change the details, and save the update straight to the Firebase database.
- Reuse the authentication flow — The pre-built login and registration pages can be adapted for any kind of authenticated dashboard.
How does Wallet work?
You must first create a Firebase Web App and enable Realtime Database, then copy the six Firebase configuration values into the environment keys (API key, auth domain, database URL, project ID, storage bucket, messaging sender ID, and app ID). After that, run yarn dev in the terminal and open localhost:3000 to start the dashboard. Users register or log in, then create income and expense records that are saved to Firebase.
FAQ
Is Wallet free?
Yes, the project is released under the MIT license, so the source code is free to use, modify, and distribute. You only need your own Firebase account to provide the backend services.
Does Wallet use a real database?
Yes, it uses Firebase Realtime Database. All income and expense records are stored there, and Firebase Authentication handles user accounts.
Can I add custom income or expense categories?
The current interface does not expose a category system; forms only capture the transaction value and date fields shown in the screenshots. You can extend the code to add categories if needed.
What is the tech stack?
Wallet uses Next.js, React, Axios, Redux Toolkit, Firebase, Moment, React Count Up, React Hook Form, Yup, SASS, UUID, and JWT Cookie, as listed in the project's README.
