This full stack web site is an information portal aimed at high school students and their parents. It provides a high level introduction to compound interest, retirement investing, open a Custodial IRA for a minor and an easy and fun modeling calcuator that graphs hypothetical retirement results using a spreadsheet like grid for data input.
The has topic slides for induction to compound interest, how to use the model calculator, student finance, parent involvement and custodial IRAs. There are links to external sites on the topic slides.
The modeling calculator can be used without a login as guest. Authentication signup and login allows for saving and loading of the models thru data persistance. The UX is polished and features some extras such as wallpaper image choices with local storage being used to persist the choice when later returning to the sites.
The backend use mySQL, Sequelize and API routes for HTML and database operations. Professional grade library HighCharts.js is used for the modeling calcuator chart and the introduction slide presentation.
-
- HTML, CSS, JavaScript (ES6 & some OOP), jQuery, Bootstrap, HighCharts.js
- Node.js, Express.js, mySQL, JavaScript (ES6 & some OOP), NPM packages (express, mysql, path, sequelize, passport), API routes, Heroku
-
Github project: 1650 Teen Custodial IRA Planner
-
Deployed Heroku link: 1650 Teen Custodial IRA Planner
-
-
-
Use Cases seen in demo below
- Introduction slide animation
- Informational slides
- modeling calculator with graph used as site guest
- authentication
- saved and loaded models
-
Page upper section - introduction slide
Modeling Tool
Modal examples:
- express & express-session - for server and authentication support
- passport & passport-local - for authentication
- bcrypt & bcryptjs - for password hashing
- mysql - for database connectivity
- sequelize - for ORM database support
- path - for absolute and relative path resolution
-
none - Note: not fully responsive yet - best viewed at or above 1440x900 or larger
but does support down to ipad(1024x768) and larger sizes such as 1366x778
- none necessary - use link to page deployed on Heroku
- navigate thru slides via nav bar links or carousel
- scroll down to access the modeling tool
- use modeling tool as guest - click into cells to changes values then refresh model to see graph updated
- signup and login to create models, save models and load saved models - see Your Models link in navbar
- for fun select from several wallpapers via nav bar dropdown
- clean up responsiveness - completed down to 1024x768
- strengthen model grid validations
- fine tune/improve media queries to provide better responsiveness
- replace/improve spreadsheet grid - allow adding and removing of rows
- try dynamic chart rendering on grid value change eliminating need for Refresh Model button
- database cleanup to remove guest models no longer being used
- complete calculator features: allow monthly and yearly investment frequency, implement inflation correction
- improved Get Started slide by making the model how-to image have hotspots with popup modals for further explainations
- user preferences modal - move wallpaper setting into it; add settings for preset Modeled Return and Inflation rates
- improve slide content
- password recovery
- multiple model plots on single graph for easy comparisons
- layout rework - consider moving from slide layout to traditional page sections accessed via scroll and links
- provide dynamic page footer attributions wallpaper images thanking given unsplash photographer
Myles Carey mylescarey2019@gmail.com
- 1.0 - Initial Release 10/18/2019
- 1.0.1 - Mini-Sprint 1 release 10/23/2019
- Two level NavBar with logged in User acknowlegement
- masked password
- hidden, but clickable diagnostic user & model information in left side of footer
- Brand Logo now returns viewport to the first carousel slide
- Help button on Model grid added - resets view port to the "Get Started" slide for model instructions
- 1.1 Sprint 1 release 10/25/2019 - improve responsiveness down to form factor 1024x768 (iPad)
- 1.2 Sprint 2 release 11/02/2019 - Capability to delete user models added
- 1.3 Sprint 3 release 11/05/2019 - UX improvements: slide text contrast, added symbols for CVD support, nav link to model tool
- 1.4 Sprint 4 release 11/10/2019 - UX improvements: graph/grid screen fit, link to top of page, wallpaper none option
- 1.5 Sprint 5 release 11/11/2019 - UX improvements: symbols on slide for CVD support, model tool down button (manual scroll still available), increased nav bar visibilty of logged in user, login/signup triggers modal reminder to create or load model and auto-scrolls to model section on close, guest model is now cleared from page on login/signup, clarity on model button: (guests refresh the model/graph),logged in users save the model which also refreshs graph)
- 1.6 Sprint 6 release 2-8-2020 - added investment frequency options for annual, semi-annual and quarterly
- 1.7 Sprint 7 release 2-10-2020 - added option to set an inflation rate modifier
- 1.8 Sprint 8 release 2-23-2020 - added help tip popups to buttons and grid field headers
- 1.9 Sprint 9 release 5-5-2020 - minor typo cleanups
Thanks to beta testers - my 15yo & 17yo daughters and wife
Thanks to unsplash photographers for slide and wallpaper images - individual attribution to be added to site footer in upcoming release