This is a standalone front end for Your Financial Path to Graduation, a tool created by the Consumer Financial Protection Bureau to help students considering a college program forecast their costs and how they will pay for them. The CFPB hosts the original tool, but is providing this code for organizations that may want to stand up their own version of the tool with their own branding or modified content.
(screenshot to be added)
The front end is a static, single-page application that connects to APIs hosted by the CFPB that provide the back-end data for various features.
If you have Docker installed, you can run the application locally with these steps:
docker build -t grad-path .to build the containerdocker run -p 3000:3000 --name grad-path grad-pathto run the container- Visit http://localhost:3000 in your browser to view it
To stop the container, run docker stop grad-path.
If you have Node 18 installed, you can run the application locally with these steps:
npm installto install the necessary dependenciesnpm run devto build the application and launch a server- Visit http://localhost:3000 in your browser to view it
Doing any customization of the base application will require the Node setup as described above.
To rebuild the app assets after making any code changes, run npm run build
in order to see those changes reflected in your running Node application.
To see your changes in the Docker container, you will need to:
- Stop the container if it's running:
docker stop grad-path - Remove the old container:
docker rm grad-path - Rebuild it:
docker build -t grad-path . - Run it again:
docker run -p 3000:3000 --name grad-path grad-path
As this is a bit of a hassle, we recommend you use the basic Node workflow for local development and only build Docker images for production deployment.
Before deploying the tool, you will want to configure it to, at minimum, reflect some basic details about your organization. Beyond that initial configuration, there are several ways that you can customize the branding or content.
Learn more about how to customize the tool
npm test will run both linting/formatting and unit tests.
npm run lint will lint and format the styles and scripts.
npm run jest will run the JavaScript unit tests and calculate coverage.
npm run cypress will run the suite of integration tests using Cypress.
These can take a while!
In rough order of importance:
- Header and footer need a basic design with a simple configuration mechanism so that they can be customized without altering source files.
- OpenGraph properties also need some sensible defaults and configurability.
- Icons have temporary placeholder text; need to be replaced with their actual SVG code.
- CostsGroup issues:
- Need to delay init of CostsGroup
- They are currently not closable once opened
- Consider simplifying to a
detailselement implementation
- Use JS to bypass intro if user is returning via personal URL.
- Eliminate requests for Avenir Next (coming from cf-typography).
- Provide a simple Docker container for easy deployment.
- Accessibility testing and remediation
- Document config/customization options
- Audit npm packages and remove unneeded ones
- GitHub Pages demo
- Eliminate feedback forms, or are they useful as placebo "questions for reflection"?
- Optimize hero image and serve different sizes to different viewports.
- Add favicon/apple-touch-icon (or delete references)
- Add screenshot to README
- The specific
npm run scripts,styles, andtemplatescommands don't put their results in the correct folder. -
npm run watchdoesn't watch enough files to be useful.
Use the issue tracker to follow the development conversation. If you find a bug not listed in the issue tracker, please file a bug report.
We welcome your feedback and contributions. See the contribution guidelines for more details.
This project uses the CFPB Design System as the basis of its user interface and layout components.