Full-Stack Developer Intern Assignment
[Link] - Portfolio Analytics Dashboard
1. Assignment Overview
Build a portfolio analytics dashboard that gives investors a comprehensive view of their investment
portfolio. This assignment tests your ability to create both a robust backend API and an interactive
frontend interface.
2. Backend Requirements
Build a Portfolio Data Service API
Create a backend service with 4 core endpoints that provide rich portfolio data. Use the sample data
provided here as the backend data for this exercise.
1. Portfolio Holdings Endpoint
GET /api/portfolio/holdings
Returns: Complete list of user's stock investments
[
{
"symbol": "RELIANCE",
"name": "Reliance Industries Ltd",
"quantity": 50,
"avgPrice": 2450.00,
"currentPrice": 2680.50,
"sector": "Energy",
"marketCap": "Large",
"value": 134025.00,
"gainLoss": 11525.00,
"gainLossPercent": 9.4
},
{
"symbol": "INFY",
"name": "Infosys Limited",
"quantity": 100,
"avgPrice": 1800.00,
"currentPrice": 2010.75,
"sector": "Technology",
"marketCap": "Large",
"value": 201075.00,
"gainLoss": 21075.00,
"gainLossPercent": 11.7
}
]
2. Portfolio Allocation Endpoint
GET /api/portfolio/allocation
Returns: Asset distribution by sectors and market cap
{
"bySector": {
"Technology": { "value": 250000, "percentage": 35.7 },
"Banking": { "value": 180000, "percentage": 25.7 },
"Energy": { "value": 134025, "percentage": 19.1 },
"Healthcare": { "value": 136000, "percentage": 19.4 }
},
"byMarketCap": {
"Large": { "value": 455000, "percentage": 65.0 },
"Mid": { "value": 175000, "percentage": 25.0 },
"Small": { "value": 70000, "percentage": 10.0 }
}
}
3. Performance Comparison Endpoint
GET /api/portfolio/performance
Returns: Historical performance vs benchmarks
{
"timeline": [
{
"date": "2024-01-01",
"portfolio": 650000,
"nifty50": 21000,
"gold": 62000
},
{
"date": "2024-03-01",
"portfolio": 680000,
"nifty50": 22100,
"gold": 64500
},
{
"date": "2024-06-01",
"portfolio": 700000,
"nifty50": 23500,
"gold": 68000
}
],
"returns": {
"portfolio": { "1month": 2.3, "3months": 8.1, "1year": 15.7 },
"nifty50": { "1month": 1.8, "3months": 6.2, "1year": 12.4 },
"gold": { "1month": -0.5, "3months": 4.1, "1year": 8.9 }
}
}
4. Portfolio Summary Endpoint
GET /api/portfolio/summary
Returns: Key portfolio metrics and insights
{
"totalValue": 700000,
"totalInvested": 600000,
"totalGainLoss": 100000,
"totalGainLossPercent": 16.67,
"topPerformer": {
"symbol": "INFY",
"name": "Infosys Limited",
"gainPercent": 28.5
},
"worstPerformer": {
"symbol": "HDFC",
"name": "HDFC Bank",
"gainPercent": -2.1
},
"diversificationScore": 8.2,
"riskLevel": "Moderate"
}
Backend Requirements:
● Data calculations: Implement gain/loss calculations, percentage computations
● Error handling: Proper HTTP status codes and error responses
● Data validation: Handle edge cases and invalid requests
● Code organization: Clean, readable code structure
● Documentation: Comment your calculation logic
3. Frontend Requirements
Build an Interactive Portfolio Dashboard
Create a comprehensive dashboard with these key sections:
1. Portfolio Overview Cards
● Total Portfolio Value - Large, prominent display
● Total Gain/Loss - Color-coded (green for gains, red for losses)
● Portfolio Performance % - Compared to initial investment
● Number of Holdings - Total stocks in portfolio
2. Asset Allocation Visualizations
● Sector Distribution - Pie chart or donut chart showing sector breakdown
● Market Cap Distribution - Visual split between Large/Mid/Small cap stocks
● Interactive elements - Hover effects showing exact values and percentages
3. Holdings Table/Grid
● Sortable columns - Sort by gains, value, symbol, etc.
● Search/Filter - Find specific stocks quickly
● Color coding - Green/red for positive/negative performance
● Responsive design - Works on desktop and mobile
4. Performance Comparison Chart
● Timeline visualization - Portfolio vs Nifty 50 vs Gold performance
● Interactive chart - Hover to see exact values at different time points
● Performance metrics - 1 month, 3 months, 1 year returns comparison
5. Top Performers Section
● Best performing stock - Highlight biggest winner
● Worst performing stock - Show biggest loser
● Key insights - Display diversification score and risk level
Frontend Requirements:
● Responsive design - Mobile-friendly interface
● Interactive elements - Charts, hover effects, sorting
● Visual hierarchy - Clear information layout
● Loading states - Handle API loading gracefully
● Error handling - Show user-friendly error messages
4. Technical Freedom
Choose Your Technology Stack
Use whatever technologies you're most comfortable with
AI Tools Encouraged
Use AI to Accelerate Development
We encourage using AI tools to help you build faster:
Please Document:
● Which AI tools you used and how
● What code was AI-generated vs hand-written
● How AI helped solve specific challenges
5. Sample Data Provided
We have provided you with a sample dataset containing realistic Indian stock data here:
● 10-15 popular Indian stocks (RELIANCE, INFY, TCS, HDFC, etc.)
● Realistic purchase prices, current prices, sectors
● Historical performance data for charts
● Market cap classifications
Focus on the logic and presentation rather than creating data from scratch.
📝 Deliverables
1. Complete Working Application
● Live Backend API - Deployed and accessible
● Live Frontend Dashboard - Fully functional interface
● GitHub Repository - Clean, organized source code
2. Documentation:
Create a comprehensive README
3. Working Demo
Ensure your demo includes:
● Portfolio data populated and displaying correctly
● All charts and visualizations working
● Interactive elements functional
● Mobile responsiveness
● Error handling demonstrated