Investment Calculator - iOS & Android app - Built w/ Flutter (ui, norwegian) & Python (back-end, english).
- Project: Private
- Job Completed: June 2022
- Job type: Development
- Job categogy: Mobile Application, cross platform, Financial calculator
- Language: Dart
- Style: OOP
"Investerings Kalkulator" or "The Investment Calculator" is an mobile app (iOS & Android). The front-end (UI) is built with the Flutter framework (Dart), and the back-end is written in Python.
Built for a Norwegian userbase, meaning the UI language is set to norwegian, but where the back-end is written in English. Note: More UI-languages might be added in the future
The app is a simple calculator based on compound interest, and will be used to calculate specific parameters for an investment plan.
The user has to fill in the input form, which contains the six variables:
- Starting Amount - How much money will be invested in the beginning of the investment.
- Investment Length - How many periods (years) the investment should last.
- Compound - How often the Contribution & Interest payments will take place each Period.
- Interest Rate - How much the value of the investment is expected to grow each period. The calculator will take compounds into account.
- Additional Contribution - Apart from Interest Rate, How much additional money will be added to the investment each compound.
- Contribution time - When the Contributions should be payed each compound.
After clicking "Regn Ut" (Calculate) the user will recive an output which consists of:
- Results summary - A simple display of the totals; End Balance, Starting Amount, Total Contributions, Total Interest, Growth %.
- Pie Chart - Showing a Breakdown of the end-balance; how much is starting-amount, contributions & Interest.
- Balance Growth Graph - Showing the growth of timeline three elements; Principal, Interest, Balance.
- Balance Sheet (Dataframe) - A table showing the effects of all different factors though-out the investment lifespan.
Note:
- Starting Amount + additional contributions makes the principal amount.
- Principal amount + Interest Rate makes the Balance.
Note: {something} is a class 'something' is a stateProvider
- {InputForm} -data-> 'InputProvider'
- {StartButton} => 'InputProvider' -data-> 'InputCalcProvider'
- {ResultatCalculator} <-data- 'InputCalcProvider'
- {ResultatCalculator} -data-> {OutputDisplay} & {PieChartDisplay}
-
- {LineChartDisplay} <-data- 'InputCalcProvider'
- {LineChartDisplay} -data-> {GetRows}
- {LineChartDisplay} <-data- {GetRows}
-
- {DataFrameDisplay} <-data- 'InputCalcProvider'
- {DataFrameDisplay} <=> {GetRows} -data-> {BuildMap}
- {DataTableMapper} <-data- {BuildMap}
- {DataTableMapper} -data-> {DataFrameDisplay}
- Serverless; the back-end is fully integrated into the app, meaning everything is stored on the users device.
- Master State management
- placeholder
- No storage; the has no need for storage except for a temporary cache, in regards to backend-frontend-communication.
- API-based; the current build uses API's for backend-frontend-communication.
-
FØRSTE STADIET:
-
Endre -> {InputDisplay} til å displaye statene fra 'InputCalcProvider' istedet for 'InputProvider'
-
Endre -> {StartButton} til å sende statene fra 'InputProvider' til 'InputCalcProvider'
-
IKKE Endre -> InputForm skal IKKE ENDRES
-
Endre -> {InputDisplay} til å {OutputDisplay}
-
Endre -> {OutputDisplay} til å displaye statene fra 'OutputProvider' istedet for 'InputCalcProvider'
-
LEGG TIL -> {ResultatCalculator} til å regne ut "Results" statene fra 'InputCalcProvider' og sende til 'OutputProvider'
-
LEGG TIL -> {PieChartDisplay} til å displaye statene fra 'OutputProvider'
-
-
ANDRE STADIET:
-- [ ] LEGG TIL -> {DataFrameCalculator} 'InputCalcProvider' -"DataFrameResults"-> 'DataFrameProvider'-- [ ] LEGG TIL -> {DataFrameDisplay} -'DataFrameProvider'["DataFrameResults"]-> DataTable => display-- [ ] LEGG TIL -> {LineChart} 'DataFrameProvider' -> "dataframe", velg ut rows, lag LineChart og Display--[ ] ALT -> {LineChartCalculator} 'DataFrameProvider' -> "dataframe", velg ut rows =>'LineChartProvider'--[ ] ALT -> {LineChartCalculator} til å hente ut data fra 'LineChartProvider', bygg LineChart og Display
- LEGG TIL -> {SeriesCalculator} Regne ut "Kumulative resultatene" => 'DataFrameProvider' & 'LineChartProvider'
[ ] LEGG TIL -> {DataFrameDisplay} til å Lage et DataTable ut i fra statene til 'DataFrameProvider' og display[ ] MAYBE -> {LineChartDisplay} til å Lage en LineChart ut i fra statene til 'LineChartProvider' og display- LEGG TIL -> {DataFrameDisplay} til å Lage et DataTable ut i fra data direkte hentet fra class Getresults(){}
- MAYBE -> {LineChartDisplay} til å Lage en LineChart ut i fra data direkte hentet fra class Getresults(){}
- Endre -> {SeriesCalculator} [class] Del opp 'SeriesCalculator' til {..Before} og {..After}
- [ ] ENDRE -> {ResultatCalculator} - [CLASS] Del opp 'ResultatCalculator' til {..Before} og {..After}
-
TREDJE STADIET:
- LEGG TIL -> {BeforeAfterProvider} [STATE] om skal være State for "Before" og "After"
- LEGG TIL -> {BeforeAfterSwitch} [BUTTON_WIDGET] setter state til 'BeforeAfterProvider' til "BeforeAfter"
- LEGG TIL -> {SeriesCalculator} if-funksjon: bestemmer om '..Before' eller '..After' skal brukes, etc..
- LEGG TIL -> {ResultatCalculator} if-funksjon: bestemmer om '..Before' eller '..After' skal brukes, etc..
-
FJERDE STADIET:
- LEGG TIL -> {Theme} som skal velge mellom to themes "LightMode" og "DarkMode"
- LEGG TIL -> {ThemeProvider} [STATE] som skal være State for alle fargene som blir brukt.
- LEGG TIL -> {DarkLightSwitch} [BUTTON] bestemmer om 'ThemeProvider' => "LightModeTheme" eller "DarkModeTheme"
-
TILLEGG:
- ENDRE -> {InputForm} Til å ikke raise en error når noe annet enn tall blir ført inn.
- ENDRE -> {LineChartDisplay} Interest line viser feil.
- ENDRE -> {DataFrameDisplay} Få Kolonnefeltet til å være sticky.
- ENDRE -> {DataFrameDisplay} ENDRE på paddingen til dataframet slik at indexen vises etter 2 siffere.
- ENDRE -> {DataFrameDisplay} Fiks på formelene til - [BEFORE]
- LEGG TIL -> {DataFrameDisplay} LEGG TIL "termin" i index colonnen i dataframet.
- LEGG TIL -> {IndecSwitch} del opp "monthlySection" sett opp et skilt per 12 måned, som sier hvilket år det er.
- ENDRE -> {TODO.txt} Oppdatere StateKartet.
- LEGG TIL -> {googleAd} LEGG TIL en google ad som er ankret til bunnen av skjermen.
- ENDRE -> {ShadowBox} Ton ned på dropshadow, det ser litt mye kontrast
- ENDRE -> {BackGroundPhoto} Endre fargen på bakgrunnsbildet til en shade mørkere
- LEGG TIL -> {BackGroundPhoto} Lag et bakgrunnsbilde nr 2 til dark mode.
- ALT -> {BackGroundPhoto} Gjør bakgrunnsbilde om til en SVG-fil så du kan endre på fargescheemet.
- ENDRE -> {color_variables} Gjør color_variables til class: ColorVariables{} => lightMode(),darkMode()
- ENDRE -> {ResultDisplay} Legg til nummer formattering
- ENDRE -> {InputForm} Legg til nummer formattering
- LEGG TIL -> {LineChart} Legg til Legend til kurvene
- LEGG TIL -> {App Icon} Lag og legg til en App Icon
- ERROR -> {GoogleAdsBanner} Fix error som blir raised ved reload - ["ads for adKey already exsists"]
- EXT ERROR -> {Adroind Studio} Del problemer med AVD'ne => iht launching, fix dette.
- WARNING -> {Adroind Studio} Warning: Mapping new ns "http://schemas.android.com/.../android/common/01"
- solution: https://stackoverflow.com/questions/68600352/build-warning-mapping-new-ns-to-old-ns - FAILIUE -> {Adroind Studio} FAILURE: Build failed with an exception.
- ENDRE -> {LineChartDisplay} Endre Y-aksen til å ikke vise det øverste tallet, evt skalene dem jevnt.
- ENDRE -> {LineChartDisplay} få "on-hover-skiltet" til å displaye utenfor grafens containter.
- LEGG TIL -> {IndexSwitch} [BUTTON] bestemmer om Dataframe skal bruke "terms" eller "perioder" som index.
- LEGG TIL -> {BackToTop} [BUTTON] knapp som tar deg tilbake til topp, evt tilbake til toppen av dataframet.
- ENDRE -> {BackToTop} [BUTTON] Gjerne sørg for at knappen er sticky etter du passerer dataframet.
- ENDRE -> {Container} Nederste containerne er hevet "over" den forje, skal være "under"
- ENDRE -> {GoogleAds} Google ads vil ikke loade. mulige grunner; ingen async, for få ad keys.
- ENDRE -> {keyboard} keyboard vil ikke forsvinne
- ENDRE -> {dataframe} må fortsatt fiske på indexen
- ENDRE -> {Playstore} Finner ikke appen i playstore, sjekk dette.