
Watch a real-world, mobile-first budgeting web app built from scratch in Java, using Bootstrap, with guidance on prerequisites and design decisions for learning Enterprise Java.
Design a mobile-friendly budgeting app using bootstrap with incomes, monthly budgets, categories and groups, transactions, and CRUD operations, plus carry-forward totals and transfers between categories.
Identify domain objects and relationships for a Java Spring Boot budget app. Explore properties and relationships for users, incomes, budgets, categories, groups, and transactions in an agile design approach.
Design domain objects for a budget app, defining relationships between categories, groups, and transactions with ids, start and end dates, budgets, and notes.
Explore how to define one-to-one, one-to-many, and many-to-many relationships among users, groups, categories, and transactions, using transitivity and foreign keys to guide design.
Create domain objects for a Spring Boot budgeting app, including category, transaction, group, and user, with id, dates, and BigDecimal budget, plus generated getters and setters in a domain package.
Model domain relationships in a Java Spring Boot app using JPA entities and establish user group category transaction links with cascade and fetch settings.
Designs a mobile-first user interface for a budget app, outlining endpoints for registration, login, and budgets, and detailing controllers, views, and security setup with Spring Security.
Update the design to include a budget domain by adding a budget entity linked to a user, with groups, categories, transactions, and sharing via a many-to-many budget user join table.
Learn how to implement spring security authentication by wiring a custom user details service, a security user, and a database-backed user repository, with authorities and roles, then move to authorization.
Implement spring security authorization by overriding security config to require the user role for all endpoints, enable a form login at /log in, and set budgets as the post-login page.
Create a bootstrap registration page in a Java Spring Boot app, bind input with a model attribute, validate passwords, save the user with a service and auto-login via Spring Security.
Reformat the login page by redesigning it with a Bootstrap card, responsive rows, and form groups, mirroring the registration page to improve mobile usability and aesthetics.
Explore building a budgets view with Bootstrap cards and list groups, enabling creation of budgets via a plus button, and navigation to budgets to manage groups, categories, and transactions.
Learn to add budgets to the database in a Spring Boot app by creating a budgets repository and service, wiring authentication, and posting budgets via Ajax from the budgets view.
Refactoring with Thymeleaf fragments shows how to create a header fragment in templates/fragments and include it across views to centralize bootstrap and jquery imports.
Refactor budget creation in a Spring Boot app to fix display issues by ignoring lazy-loaded users and groups, and implement unique budget names (new budget number N) via the service.
Create the budget user interface in a Spring Boot app by wiring the budget controller to budgets/{id}, rendering a budget view with groups, and auto-creating a savings group.
Learn to create budget groups and categories by wiring a post endpoint, service, and repository in a Spring Boot app, with a bootstrap user interface and thymeleaf views.
Identify and fix bugs in a Spring Boot budgeting app by making unnamed groups visible and clickable. Standardize group ordering and demonstrate a breakpoint-driven debugging process.
Implement editing of a group's name within budgets in a Java Spring Boot web app, including endpoint routing, form handling, and updating group data in the database.
Structure the budget screen by listing groups and their one-to-many categories, with a button to create a new category.
Learn how to create categories within groups in a Spring Boot web app using dynamic button IDs, Thymeleaf inline JavaScript, and Ajax to post to a group’s categories endpoint.
Refactor category creation by replacing ajax with a standard thymeleaf post form, wiring the form to /budgets/{budgetId}/groups/{groupId}/categories, and redirecting to an editable category view.
Make budget categories clickable to navigate to editable category pages, linking each category to its group and budget context while organizing categories as divs with anchor tags.
Learn how to make categories configurable by creating a category form, handling a post mapping, and updating categories via a model attribute, category service, and redirect to the budget screen.
Use big decimal for category budget amounts to avoid monetary rounding errors. Implement a numeric budget input with a dollar sign using bootstrap input group and allow two decimals.
move the start and end dates from category into the budget, discuss a design choice, and demonstrate a destructive schema update to align budgets with monthly date ranges.
Learn to build a Java Spring Boot web app that tracks budgets with start and end dates, pulling dates from model and displaying them in the user interface with Thymeleaf.
Make date ranges editable on the budget screen by integrating the date range picker library, handling the callback, and updating the server and user interface.
Begin building transaction creation in a budgeting app, part 1, by adding a top-right plus button on the budget screen and enforcing category creation first.
Implement a form-driven post to budgets/{budgetId}/transactions to create a transaction without a category or group, wire a flexible transaction controller, test the flow, and plan data model adjustments.
Map a budget to a transaction in a spring boot app, establishing a one-to-many relationship with cascade delete and a budget_id foreign key in the transaction table.
Explore how to create and persist a transaction linked to a budget in a Spring Boot app, wiring group and category relationships and testing the DB save flow.
Create the transaction view in a Spring Boot budgeting app by wiring a new controller, get mapping, and model to display a transaction and its budget.
Master data binding in a Java Spring Boot app by saving and editing transactions with a post mapping, using model attributes, and a custom date converter to fix binding.
Format the transaction date in a Java Spring Boot budgeting app using timely date format utility, and ensure front-end display strips time while keeping budget data intact.
Refactor the app to use java.time.LocalDate instead of java.util.Date, introduce a LocalDate attribute converter, update the entity and getters, and improve HTML5 date input formatting.
Learn to attach a transaction to a category on the transaction screen with an autocomplete category input and populate options from budget groups, then connect frontend to the backend.
Learn to power a jQuery autocomplete in a Java Spring Boot web app using a category DTO to map IDs and labels with front-end and hidden inputs.
Learn to display the selected category in the view by mapping the category id to its label, testing a JavaScript solution alongside a Spring converter.
Add and display category transactions in the budget view, plan to show date and amount for each transaction, and link categories for detailed transaction views using time leaf extras.
Enhance the budget user interface by presenting transactions in a Bootstrap table with striped rows. Make each row clickable to open the related budget, category, and transaction pages.
Learn to fix transaction addition by wiring endpoints, mapping group, budget, and category IDs, and implementing a plus button that submits a form to create a new transaction.
Sort transactions by date in descending order using a JPA order by annotation and ensure equals and hashCode on entities so the tree set maintains proper order.
Filter transactions to the August 1–31 budget window and display the date range on the budget page, using Java 8 streams and LocalDate start/end.
Plan and display a monthly budget user interface showing categories with planned, spent, and remaining amounts in a responsive table, using bootstrap concepts and a mobile-first layout.
Learn finishing touches for a Spring Boot budget app by removing hard-coded values, computing spent and remaining amounts, formatting budgets, and using transient fields to avoid extra database columns.
Watch Trevor, in this workshop, develop a mobile responsive real-world Budgeting application from scratch. This your opportunity to learn all the in-demand full-stack Java Web technologies like:
- Java 8
- Spring Boot
- Hibernate
- MySQL
- Thymeleaf
- Bootstrap 4
- Spring MVC
- Spring Data
- Spring Security
- HTML/CSS
You will also have access to every line of code Trevor creates with the GitHub links provided after each applicable lesson.
Follow along with Trevor and create your own version of this Budget application and feel free to use it in your very own portfolio and help you be more job-ready as a Full-Stack Java Developer.