FUll-Stack Project
- General Info
- Goal
- Tech Stack
- Deployment
- Home
- Authentication
- Dashboard
- Income
- Expenses
- Analytics
- User Profile
- Mobile Version
- Features
- Status
- Contact Us
iBudget is a full-stack app that helps your monthly budgeting planning in a well-organized manner. This team project was created by two developers and features a variety of charts and a calendar scheduler.
The goal was to create a digital solution for monthly budgeting planning in one place.
- React.js
- Redux
- Redux-Saga
- TypeScript
- Material UI
- DevExtreme React Charts
- React Calendar
- Google Auth
- Local Storage
- Formik
- Node.js
- Express.js
- JSON Web Tokens
- MongoDB
- Mongoose
The app is deployed on Heroku. You can try out our demo on https://ibudget-app.herokuapp.com/
Users can either register and login in their account with their email and password or register with Google authentication.
From their dashboard, users can have an overview of all data from the current month. Data for income, expenses, monthly budget and different charts for income and expenses are displayed.
The income page displays all income data. Users have a year calendar where they can add all monthly incomes divided by categories for each month. Users have 5 different types of income categories and can add, edit or delete income categories per month, displayed in a income table. The calendar switches between years and updates in real time with an overview of monthly income displayed in a highlighted tile content. Users have also access to a category chart that updates in real time when adding, editing or deleting income data. Monthly budget and income is updated on real time.
Users can track all monthly expenses on the expenses page. The calendar shown in the expenses pages is a monthly calendar, which displays all daily data regarding expenses, including total expenses for the month and monthly budget. Users can select between 12 type of expenses categories and add, edit and delete expenses which are displayed on the expenses table. Just like the income page, tile contents can highlight daily expenses on the calendar which can be viewed by hovering on the calendar days. An expenses chart by categories updates on real time when data is added, edit or deleted.
The analytics page gives an overview of all year and monthly expenses and income, with year and monthly budget. User can switch between year and monthly view. While on year view, the user can see the total amount of expenses, income and total budget, together with a decade calendar and a chart displaying all expenses and income for the selected year. By switching to month view and clicking to different months, the user can view an aggregate of all expenses and income per month in a year calendar, and a monthly chart displaying total expenses and income.
Users can view their details, like registered name and email address on the user’s profile. If the user has registered a new account directly with the iBudget app, the details can be edited.
The app is mobile responsive.
Project is: in progress. MVP has been finalized, with some bug fixes still in place.
List of features READY and TODOs for future development
READY:
- Login with validation
- Register with validation
- Google Login
- Logout
- Add income/expense
- Remove income/expense
- Edit income/expense
- Total income/expense
- Save in Local Storage
- Calendar view
- Tile Content in Calendar
- Dashboard view
- Analytics view
- Bar charts
- Responsiveness
- Deployed in Heroku
To-do list:
- Add more oauth types (Facebook, Twitter)
- Add Currency Converter
- Improve calendar functionality
- Create an automated functionality for adding income/expenses
- Improve Responsiveness
- Dockerize
- Create the Mobile version(Android and IOS)
The project is created by 2 developers Michele Zucca and Grigor Fanyan : feel free to contact us if you have any questions!