Apply your knowledge to build something amazing!
Building on Project 01, you'll create an advanced data dashboard that compares multiple items simultaneously with sophisticated features like data visualization, caching, and real-time updates. This project adapts to whatever API you chose in Project 01 and applies concepts 6-10 from the course.
Duration: 2 weeks Type: Individual project Prerequisites: Completed Project 01 (Basic API App)
By completing this project, you will:
Templates Folder: Templates 6-10
⚠️ Important: You'll be enhancing your Project 1 code by integrating Templates 6-10. Don't start from scratch - build on what you've already created!
Project 2 extends your Project 1 work by integrating advanced templates. Here's how to enhance your existing API app:
Template 6 (Comparison Dashboard):
Template 7 (Chart Visualization):
Template 8 (Caching System):
Template 9 (Error Handling):
Template 10 (Real-time Polling):
Build Upon Your Advanced Activity Work! Templates 6-8 are specifically designed for enhanced data dashboards. These templates provide the sophisticated foundation you need to create a professional-grade data comparison and visualization system.
Located in the Templates directory, each template is a complete, StackBlitz-ready foundation for your enhanced dashboard:
| Template | What You Built | Key Features for Dashboard |
|---|---|---|
| Template 6: Comparison Dashboard | Multi-item comparison interface | Side-by-side data cards, parallel API requests with Promise.all(), battle/comparison analytics |
| Template 7: Chart Visualization | Interactive data visualization | Chart.js integration, multiple chart types (line, bar, doughnut, radar), real-time chart updates |
| Template 8: Caching System | Intelligent data caching | TTL-based cache expiration, cache-first loading strategy, performance monitoring |
Start with Template 6 as Your Foundation: The comparison dashboard provides the perfect structure for displaying multiple data items side-by-side with advanced analytics.
Enhance with Template 7's Visualizations: Transform your comparison data into beautiful, interactive charts that make patterns and insights immediately visible.
Optimize with Template 8's Caching: Implement smart caching to ensure your dashboard loads instantly and works offline, providing a seamless user experience.
Template 6 Foundation: Compare 5+ Pokemon stats side-by-side
+ Template 7 Charts: Radar charts for base stats, bar charts for type effectiveness
+ Template 8 Caching: Cache Pokemon data for offline Pokedex browsing
= Result: Lightning-fast Pokemon comparison dashboard with visual analytics
Template 6 Foundation: Character comparison with height, mass, film appearances
+ Template 7 Charts: Timeline charts for character appearances, species distribution
+ Template 8 Caching: Cache character data for offline galactic reference
= Result: Comprehensive Star Wars database with visual insights
Template 6 Foundation: Movie comparison by ratings, budget, box office
+ Template 7 Charts: Line charts for box office trends, genre popularity analysis
+ Template 8 Caching: Cache movie data for offline entertainment research
= Result: Professional movie analytics dashboard with trend analysis
Week 1 - Foundation (Template 6):
Week 1 - Visualization (Template 7):
Week 2 - Performance (Template 8):
Each template includes everything you need:
Templates/
├── activity-06-comparison/ # Multi-item comparison dashboard
│ ├── index.html # Responsive grid layout
│ ├── script.js # Promise.all() and comparison logic
│ └── styles.css # Modern card-based design
├── activity-07-charts/ # Chart.js visualization system
│ ├── index.html # Chart containers and controls
│ ├── script.js # Chart.js integration and data transformation
│ └── styles.css # Chart styling and responsive layout
└── activity-08-caching/ # Intelligent caching system
├── index.html # Cache monitoring dashboard
├── script.js # TTL cache implementation and management
└── styles.css # Cache status visualization
Template 6 provides the exact multi-item comparison interface you need for displaying 5+ items simultaneously with advanced analytics.
Template 7 gives you professional data visualization capabilities that transform raw API data into meaningful insights.
Template 8 ensures your dashboard performs exceptionally with smart caching, offline support, and lightning-fast loading times.
💡 Pro Tip: These templates solve all the complex technical challenges of Project 02. Focus your creativity on the unique features that make your dashboard special for your chosen API!
Pokemon API Enhancement:
Movie Database Enhancement:
NASA API Enhancement:
🎯 Final Result: Your completed project will combine all 10+ templates into a sophisticated dashboard that showcases everything you've learned in W3.5.
Your dashboard will adapt based on your Project 01 choice:
Deliverable: Basic multi-item interface
Tasks:
Key Files to Create:
components/ItemGrid.jscomponents/ItemCard.jscomponents/ItemSearch.jsutils/itemManager.jsAPI-Specific Examples:
// Pokemon Example
const sortOptions = ['name', 'base_stats.hp', 'base_stats.attack', 'height', 'weight'];
// Star Wars Example
const sortOptions = ['name', 'height', 'mass', 'films.length', 'birth_year'];
// Movie Example
const sortOptions = ['title', 'vote_average', 'release_date', 'runtime', 'budget'];
Deliverable: Interactive charts for your API data
Tasks:
Key Files to Create:
components/charts/PrimaryChart.jscomponents/charts/ComparisonChart.jscomponents/charts/MetricGauge.jsutils/chartConfig.jsVisualization Examples:
Pokemon Dashboard:
Star Wars Dashboard:
Movie Dashboard:
Deliverable: Working cache system with expiration
Tasks:
Key Files to Create:
utils/cacheManager.jsutils/dataValidator.jscomponents/OfflineIndicator.jsDeliverable: Auto-refresh system with error handling
Tasks:
Key Files to Create:
utils/updateScheduler.jscomponents/LoadingStates.jsutils/errorHandler.jscomponents/FreshnessIndicator.jsDeliverable: CSV export and theme system
Tasks:
Key Files to Create:
utils/csvExporter.jsutils/themeManager.jscomponents/ThemeToggle.jscomponents/ExportButton.jsDeliverable: Complete, tested application
Tasks:
| Category | Points | Criteria |
|---|---|---|
| Multi-Item Features | 25 | Grid layout, add/remove items, search, sorting |
| Data Visualization | 20 | Charts work correctly, interactive features |
| Caching System | 20 | Proper cache implementation, expiration, offline mode |
| Real-time Updates | 15 | Auto-refresh, error handling, loading states |
| User Experience | 10 | Responsive design, theme toggle, accessibility |
| Code Quality | 10 | Clean code, proper error handling, documentation |
// Radar Chart for Pokemon Stats
const pokemonRadarData = {
labels: ['HP', 'Attack', 'Defense', 'Sp. Attack', 'Sp. Defense', 'Speed'],
datasets: [{
label: pokemon.name,
data: [
pokemon.stats.hp,
pokemon.stats.attack,
pokemon.stats.defense,
pokemon.stats.special_attack,
pokemon.stats.special_defense,
pokemon.stats.speed
]
}]
};
// Bar Chart for Character Heights
const heightData = {
labels: characters.map(char => char.name),
datasets: [{
label: 'Height (cm)',
data: characters.map(char => parseInt(char.height) || 0),
backgroundColor: 'rgba(255, 206, 84, 0.6)'
}]
};
// Line Chart for Box Office Performance
const boxOfficeData = {
labels: movies.map(movie => movie.release_date.slice(0, 4)),
datasets: [{
label: 'Box Office Revenue',
data: movies.map(movie => movie.revenue),
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
This project directly applies: