React Budget Calculator

Introduction

This project based on IBM open source project: https://github.com/ibm-developer-skills-network/ejtos-react_budget_app

I fixed the warning windows bug to display appropriate message according to the error and reinforced currency switching system.

To run on local machines, terminal enter: npm install then npm start

Tech Stack

• Calculate remaining budget amount after enter spendings for each department
• Built on top of React framework using modularized components
• Improve components appearance by CSS
• Implemented onState and onContext method to tranfer and save data

New Features

• Set limits for the maximum budget (20000), proper warning message will show up if exceeded
• Adjust spendings by clicking add/reduce button or submit a new allocation form
• Lock the allocation form that only accepts numbers for the amount of money
• Change currency used for the budget calculation by a drop down menu and the change will be applied everywhere on the page

Screenshot

Program Structure

The app was made by 3 main parts:

• HeaderBar
• MainBody
• FooterBar

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { AppProvider } from './context/AppContext';
import HeaderBar from './components/HeaderBar';
import MainBody from './components/MainBody';
import FooterBar from './components/FooterBar';

const App = () => {
    return (
        <AppProvider>
            <div className='container'>
                <HeaderBar />
                <MainBody />
                <FooterBar />
            </div>
        </AppProvider>
    );
};

export default App;

File hierarchy

Data Processing

Data was simply saved by useContext and appContext

Provider was used to pass data to components

return (
        <AppContext.Provider
            value={{
                expenses: state.expenses,
                budget: state.budget,
                remaining: remaining,
                dispatch,
                currency: state.currency
            }}
        >

Data Updating

Data will be live updated as user interact with the app, to achieve this, I parse data from useContext and then use .map() to update values of listed items.

const { expenses } = useContext(AppContext);
...
{expenses.map((expense) => (
    <ExpenseItem id={expense.id} key={expense.id} name={expense.name} cost={expense.cost} />
))}