In my previous article, I successfully deployed the CandleWise portfolio management application to Azure using manual configuration steps. Building on this foundation, I'm now advancing my implementation by creating a modern full-stack application with a Next.js frontend and .NET Core backend in a unified monorepo structure.
In this article, I'll demonstrate how I automated my entire infrastructure using Terraform scripts specifically designed for Azure resources. I'll then explain how I implemented a comprehensive CI/CD pipeline with GitHub Actions that handles my complete deployment strategy - automatically deploying the Next.js frontend to Vercel and the .NET Core backend to Azure App Service. This approach ensures consistent, version-controlled deployments while significantly reducing manual configuration and potential human error.
CandleWise - A Portfolio Management App (Part 1): Environment Setup
CandleWise - Part 2: Integrating a third party API
CandleWise - Part 3: Deploying App to Azure
CandleWise - Part 4: Automating Deployment CI/CD
For the frontend development of CandleWise, I created a modern React application using Next.js 15 with TypeScript. I started by establishing a monorepo structure with a dedicated frontend directory, implementing Next.js with TypeScript and Tailwind CSS for styling. The responsive UI featured portfolio dashboard components, all powered by properly configured environment variables for API connections.
The heart of CandleWise is its portfolio dashboard that tracks stock holdings in real-time. I implemented interactive stock cards showing price details with directional indicators (↗↘) that visually communicate price movements. One of my favorite features is the line charts displaying price history with time filtering options, allowing users to analyze stock performance over different periods. I also added an auto-refresh toggle, giving users control over when to fetch new data, and optimized performance through efficient state management with React hooks.
The architecture I designed includes a dedicated services layer for API interactions, Next.js API routes serving as proxies to the backend endpoints, shared TypeScript interfaces between frontend and backend, and React hooks implementing a source-of-truth pattern for clean data flow. A particularly engaging feature is the dynamic portfolio visualization using Recharts, which updates every 10 seconds for actively viewed stocks.
Building CandleWise wasn't without challenges. Managing real-time data updates without overwhelming the API or causing performance issues required implementing a batch price fetching system that gets all portfolio stock prices in a single API call, along with configurable refresh intervals and proper cleanup mechanisms.
I faced an infinite API call loop due to reactivity issues where portfolio state updates triggered continuous API calls. The solution involved implementing useCallback with proper dependencies and using functional state updates to prevent re-render cycles. Next.js API route conflicts emerged when the rewrites() function in next.config.js intercepted all /api/* requests, which I fixed by refining the routing configurations.
Security was another concern – I initially had API keys hardcoded in controllers, creating a vulnerability. I addressed this by implementing proper dependency injection with an AlpacaMarketDataService and secure configuration management.
The architecture evolved significantly during development. I moved from hardcoded demo data to a proper API layer fetching real stock prices from Alpaca Markets. The data flow became cleaner and more unidirectional, with the backend serving as the single source of truth for portfolio data, while the frontend handles real-time updates and visualization. I simplified API responses by removing wrapper objects, making the frontend code more intuitive.
I established clear boundaries between data fetching, state management, and UI rendering, improving maintainability and testability. The backend became the definitive data source, with Next.js acting as a proxy layer. Batch endpoints for fetching multiple stock prices in a single call reduced network overhead and improved performance.