Skip to content
Submitted about 1 month ago

Personal finance app built w/ Angular 21, Rails 8.1, JWT & Playwright

angular, ruby, rails, sass/scss, playwright
P
LVL 3
@natashapl
A solution to the Personal finance app challenge

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm most proud of building this as a genuine full-stack app rather than a frontend-only solution. The backend handles JWT authentication, per-user data scoping, and a seeded demo account so visitors can explore without signing up. On the frontend, I used Angular 21's latest features throughout - standalone components, signals for all state management, OnPush change detection, and zoneless rendering - which pushed my Lighthouse desktop performance score to 100 and mobile score to 94.

Next time I'd set up the deployment pipeline earlier in the process rather than at the very end. Getting the Rails API onto Render and wiring it to Supabase PostgreSQL involved several environment-specific issues (IPv6/IPv4 networking, PgBouncer prepared statements, URL-encoding special characters in connection strings) that would have been easier to debug before the rest of the app was built.

What challenges did you encounter, and how did you overcome them?

The biggest technical challenge was writing a reliable Playwright E2E test suite for an app with Angular's signal-driven loading cycles. Two issues that took the most debugging:

  • Angular hides the pots grid while reloading data after a mutation, so tests that tried to interact with a pot card immediately after adding money would fail because the card had temporarily disappeared. The fix was waiting for the specific success toast before asserting the card was visible again.
  • Playwright's getByRole uses substring matching by default, so getByRole('button', { name: 'Withdraw' }) also matched the ellipsis button with aria-label="Options for Withdraw Pot". Adding { exact: true } fixed it.

Accessibility was also a focus throughout - implementing a custom FocusTrapDirective for modals, aria-live regions for loading announcements, and role="progressbar" on savings bars to hit WCAG AA and a Lighthouse accessibility score of 100.

What specific areas of your project would you like help with?

I'd welcome feedback on the overall Angular architecture - specifically whether the signal-based state management approach scales well, and whether there are patterns I should have used differently. Feedback on the responsive layout and any accessibility issues I may have missed would also be appreciated.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Natasha Pierre-Louis’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord