Personal Finance App | FullStack Typescript (NextJs/ExpressJs)

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

One of the aspects I am most proud of is successfully deploying the full-stack application to production, including the Next.js frontend on Vercel, the Express/Prisma backend on SeeNode, and a PostgreSQL database hosted remotely.

I am also proud of improving the application's architecture by migrating most of the server data management from Zustand to React Query. This change simplified state management, improved cache handling, and ensured the UI stayed synchronized with backend updates.

If I were to start the project again, I would establish a clearer distinction between server state and UI state from the beginning. Initially, I stored API data inside Zustand, which later created synchronization issues when records were created, updated, or deleted. Using React Query as the primary source of truth for server data from day one would have reduced complexity and avoided unnecessary debugging.

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

One of the most significant challenges was handling authentication in production. While authentication worked correctly in the local environment, it failed after deployment because the JWT cookie was being created on a different domain than the frontend. Since the frontend was hosted on Vercel and the backend on SeeNode, browser security policies prevented the cookie from being accessible to the Next.js middleware.

To solve this issue, I redesigned the authentication flow. Instead of relying on Next.js middleware to validate authentication through cookies, I implemented session verification through a dedicated backend endpoint (/verify). This approach allowed the frontend to validate the user's session directly with the backend and made authentication work consistently across environments.

Another challenge involved state management. After deleting budgets, the records were successfully removed from the database but remained visible in the UI until the page was refreshed. I discovered that the problem was caused by duplicating server data inside Zustand. The solution was to rely on React Query's cache invalidation and refetching mechanisms, ensuring the interface always reflected the latest server state.

I also encountered deployment issues related to TypeScript. During the backend deployment process, custom Express request properties such as req.userId caused compilation errors even though the application worked locally. I resolved this by properly extending the Express Request interface and ensuring the custom type definitions were included in the production build configuration.

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

I would appreciate feedback and guidance in the following areas:

• Improving the overall frontend architecture and component organization as the application grows.
• Identifying additional opportunities to optimize React Query usage and reduce unnecessary re-renders.
• Reviewing the authentication flow to ensure it follows production-grade security practices.
• Improving accessibility and responsive design across all pages.
• Evaluating the database schema and Prisma queries for scalability and performance.
• Reviewing the UI/UX implementation to ensure it closely matches the original design while maintaining clean, reusable, and maintainable code.

I am also interested in learning more advanced Next.js patterns, particularly around authentication, server components, data-fetching strategies, and scalable application architecture.