L o a d i n g

Bill Tracker!

This app is an ongoing project.

Click Here: Bill Tracker

Purpose:
I focused more functionality and practice rather than aesthetics but as time continues I plan to update it more with charts, graphs and a calendar interface.

Goal:
Practice. This is a full stack Angular, NgRx, Java Spring Boot, MySQL application deployed on two different instances to Google Cloud Platform. It would have be easier to deploy the frontend and backend under one origin but I wanted to practice maintaining independent projects.

Frontend Google Cloud Deployment

Backend Google Cloud Deployment

Journal:

Challenge Action Resultant
Environment Setup: Nx Nx is helpful because it makes everything professional and streamlined
  • Angular
  • webpack
  • CI/CD with github actions
  • cloud
 Click
Nx Getting Started
Environment Setup: Tailwind CSS

I really like tailwind because it is built on basic CSS and it uses quick classes so I can plug and play. Also they have tons of prebuilt components that look and feel very professional for quick development

I ran into an issue here because my angular cli was very old. I was using 13 and we're on 18


https://endoflife.date/angular

UPGRADING TO THE CORRECT CLI DID THE TRICK FOR ME AND Nx and tailwind were connected

 Click
Tailwind Docs
Environment Setup: Adding NgRx

Docs say to run this:

ng add @ngrx/store@latest

but I ran into this:


Node.js version v23.1.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.
Error: This command is not available when running the Angular CLI outside a workspace. 		I need to update my node
Environment Setup: nvm I had to upgrade my version of node.
I had to run a script to install nvm.
I had to reference this FAQ: How to run a shell file		 nvm -v
returned 0.40.1
Cypress Config in Nx
import { defineConfig } from "cypress";
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
export default defineConfig({
viewportHeight: 1080,
viewportWidth: 1920,
e2e: {
projectId: 'bill-tracker',
...nxE2EPreset(__dirname, {
cypressDir: 'apps/bill-tracker-e2e/src/',
webServerCommands: {
default: 'npx nx run bill-tracker:serve',
production: 'npx nx run bill-tracker:serve-static',
},
ciWebServerCommand: 'npx nx run bill-tracker:serve-static',
ciBaseUrl: 'http://localhost:4200',
}),
baseUrl: 'http://localhost:4200',
testIsolation: true,
fixturesFolder: false,
supportFile: 'apps/bill-tracker-e2e/src/e2e/e2e.ts',
specPattern: ['apps/bill-tracker-e2e/src/e2e/**/*.cy.ts'],
},
}); 		Click
Nx Docs
Actions, Reducers, Entity Adapter
  • This is overkill for this small app but to practice NgRx/Reduc I set up this pattern to main state for the bills and methods to derive insights
  • The actions are just plain objects that describe what is happening in the app. They are dispatched by components or effects to trigger state changes
  • For the bill tracker App, we need CRUD actions for the bills and if they are successful or not
  • The reducers are pure functions that are basically the methods to perform the action
  • The effects are how the gotcha moments are handle. Imagine developing this brilliant pattern and it has a fatal flaw because it is dependent on asynchronous calls. Effects manage this. They tell the app what to do in the case that we make a successful or failed call

Want to discuss more? Enter your email and I will follow up.