Mutual Fund Investment Platform — Core Investor Workflows
Built and maintained the core investment workflows of a live fintech platform — portfolio dashboards, SIP creation, transaction tracking, and investor profiles — behind a centralized API integration layer and Redux-managed state.
Contents
Executive Summary
A live fintech platform used by real investors to manage mutual fund portfolios. Work centered on the core investment workflows — portfolio dashboards, SIP creation, transaction tracking, and investor profiles — built on React.js with Redux-managed global state so that portfolio data, transaction records, and authentication state stayed consistent across every workflow. Multiple backend REST APIs were integrated through a centralized Axios layer with structured error handling, and controlled state updates removed redundant API calls, since this was a production-grade surface handling real investor money rather than a lower-stakes dashboard.
Business Context
Constraints
Real-money reliability
This was a live fintech product handling real investor portfolios and transactions, so frontend correctness and stability carried more weight than they would on a lower-stakes internal tool.
Multiple integrated REST APIs
Portfolio, SIP, transaction, and profile data each came from different backend services over REST, and communication had to stay stable and consistently error-handled across all of them, not just the ones integrated first.
Consistent state across workflows
Portfolio data, transaction records, and authentication state needed to stay consistent across every workflow, so a transaction visible in one view couldn't silently drift from what the portfolio dashboard showed.
Growing UI surface
As investment workflows were added, the UI had to stay scalable — new dashboards and flows needed to reuse existing component and styling patterns instead of each becoming a one-off.
System Blueprint
React components read and write to a Redux store holding portfolio, transaction, and auth state, while a centralized Axios layer integrates multiple backend REST APIs behind one structured error-handling path.
Frontend
React.js application rendering portfolio dashboards, SIP creation flows, transaction tracking, and investor profile interfaces, styled with reusable, modular SCSS patterns.
State Layer
Redux-based global state management keeping portfolio data, transaction records, and authentication state consistent across workflows, with controlled updates to avoid redundant fetches.
API Integration Layer
Centralized Axios layer integrating multiple backend REST APIs behind a structured, shared error-handling mechanism.
Authentication
JWT-based authentication workflows with secure token storage, gating protected routes to investment workflows.
Architecture
Core investment workflows
Portfolio management dashboards, SIP creation flows, transaction tracking modules, and investor profile interfaces were developed and maintained as the platform's core surface.
Centralized REST integration
Multiple backend REST APIs were integrated through Axios behind a structured, centralized error-handling mechanism, keeping frontend-to-backend communication stable as more APIs were added, instead of handling failures ad hoc at each call site.
Redux-managed cross-workflow state
Portfolio data, transaction records, and authentication state were managed through Redux, so a change visible in one workflow stayed consistent with what other workflows displayed.
JWT authentication and protected routes
Authentication used JWT-based workflows with secure token storage, gating protected routes so investment workflows were reachable only by authenticated sessions.
Engineering Decisions
Per-call error handling vs. a centralized error-handling layer
- Handle errors individually at each Axios call site as APIs were integrated.
- Structure a centralized error-handling mechanism that every API integration goes through.
Re-fetching on demand vs. controlled Redux state updates
- Let each component fetch the data it needs when it renders.
- Centralize portfolio, transaction, and auth data in Redux, with controlled updates and dependency management governing when a re-fetch actually happens.
Production Stories
This section is planned but not yet documented.
Lessons Learned
Centralizing error handling once, instead of per API call site, is what makes several integrated REST APIs feel like one stable system rather than several inconsistent ones.
Redux only reduces redundant API calls if state updates are deliberately controlled — the store alone doesn't stop components from re-fetching on their own.
Reusable component structures and modular styling pay off most in a workflow-heavy product that keeps adding dashboards and flows over time, rather than a one-off page.
Related Notes
This section is planned but not yet documented.
Chartered Accountant CRM — Multi-Role Practice Management
Independently architected the entire frontend and ~70% of the backend for a multi-role CRM serving a Chartered Accountant practice, with role-based access control and an end-to-end Razorpay payment pipeline.
Shelter4U — Property Brokerage & Channel Partners CRM
Led development of a property brokerage CRM covering the full lead-to-closure lifecycle, self-deployed on AWS EC2 behind NGINX, and directly diagnosed the production issues that came with owning that infrastructure.