📊 API Dashboard - Fetch data from multiple APIs and display in a dashboard. Advanced project!
📚 Concepts Covered:
• Multiple API calls
• Promise.all()
• Async/await
• Error handling
• Data aggregation
• Object manipulation
✨ Features:
• Fetch multiple endpoints
• Aggregate data
• Display statistics
• Handle errors
• Format output
javascript
// API Dashboard Application
class APIDashboard {
constructor() {
// Simulated APIs
this.apis = {
users: [
{ id: 1, name: "Aung Kyaw", status: "active" },
{ id: 2, name: "Su Su", status: "active" },
{ id: 3, name: "Min Min", status: "inactive" }
],
posts: [
{ id: 1, userId: 1, title: "Post 1", likes: 10 },
{ id: 2, userId: 1, title: "Post 2", likes: 5 },
{ id: 3, userId: 2, title: "Post 3", likes: 15 }
],
stats: {
totalViews: 1250,
newSignups: 23,
revenue: 4500
}
};
}
async fetchUsers() {
await this.delay(50);
return this.apis.users;
}
async fetchPosts() {
await this.delay(50);
return this.apis.posts;
}
async fetchStats() {
await this.delay(50);
return this.apis.stats;
}
delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async loadDashboard() {
try {
console.log("📊 Loading Dashboard...\n");
// Fetch all data in parallel
const [users, posts, stats] = await Promise.all([
this.fetchUsers(),
this.fetchPosts(),
this.fetchStats()
]);
// Calculate statistics
const activeUsers = users.filter(u => u.status === "active").length;
const totalPosts = posts.length;
const totalLikes = posts.reduce((sum, p) => sum + p.likes, 0);
const avgLikes = (totalLikes / totalPosts).toFixed(1);
// Display dashboard
return `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 DASHBOARD OVERVIEW
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
👥 USERS
Total: ${users.length}
Active: ${activeUsers}
Inactive: ${users.length - activeUsers}
📝 POSTS
Total Posts: ${totalPosts}
Total Likes: ${totalLikes}
Avg Likes: ${avgLikes}
📈 STATISTICS
Total Views: ${stats.totalViews.toLocaleString()}
New Signups: ${stats.newSignups}
Revenue: $${stats.revenue.toLocaleString()}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ Dashboard loaded successfully!
`;
} catch (error) {
return `❌ Error loading dashboard: ${error.message}`;
}
}
}
// Demo
const dashboard = new APIDashboard();
dashboard.loadDashboard().then(result => console.log(result));You should see
📊 Loading Dashboard... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📊 DASHBOARD OVERVIEW ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 👥 USERS Total: 3 Active: 2 Inactive: 1 📝 POSTS Total Posts: 3 Total Likes: 30 Avg Likes: 10.0 📈 STATISTICS Total Views: 1,250 New Signups: 23 Revenue: $4,500 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✅ Dashboard loaded successfully!