Bridge the gap between frontend JavaScript and backend databases by mastering external API integrations, authentication, real-time data handling, and building your own APIs. Perfect preparation before diving into databases.
Get ready to embark on an exciting learning journey
By the end of this course, you will be able to:
Learn API integration through hands-on projects with Pokemon, NASA, and other public APIs. Build 4 complete applications including your own REST API server.
| Session | Topic | Objectives | Notes/File Link | Activities Link | Projects | Exit Ticket | Submission Link |
|---|---|---|---|---|---|---|---|
| 1 | Introduction to APIs | Understand APIs and make browser requests | Concept 01: Introduction to APIs | Activity 01: Introduction to APIs | - | ET-1 | Submit Activity |
| 2 | Working with JSON and Fetch | Master JSON and JavaScript fetch() | Concept 02: Working with JSON and Fetch | Activity 02: Working with JSON and Fetch | - | ET-2 | Submit Activity |
| 3 | API Keys and Authentication | Secure API access with keys | Concept 03: API Keys and Authentication | Activity 03: API Keys and Authentication | - | ET-3 | Submit Activity |
| 4 | Sending Data with POST | Create resources via APIs | Concept 04: Sending Data with POST | Activity 04: Sending Data with POST | - | ET-4 | Submit Activity |
| 5 | API Widget Building | Build interactive API widgets | Concept 05: API Widget Building | Activity 05: API Widget Building | - | ET-5 | Submit Activity |
| 6 | Project One: My First API Explorer (Part 1) | Apply fundamentals with fun APIs | - | - | Project One: My First API Explorer | - | - |
| 7 | Project One: My First API Explorer (Part 2) | Complete and polish API explorer | - | - | Project One: My First API Explorer | - | Submit Project |
| 8 | Multiple Items Comparison | Compare data across multiple sources | Concept 06: Multiple Items Comparison | Activity 06: Multiple Items Comparison | - | ET-6 | Submit Activity |
| 9 | Data Visualization with Charts | Add charts to API data | Concept 07: Data Visualization with Charts | Activity 07: Data Visualization with Charts | - | ET-7 | Submit Activity |
| 10 | Local Storage and Caching | Save data and work offline | Concept 08: Local Storage and Caching | Activity 08: Local Storage and Caching | - | ET-8 | Submit Activity |
| 11 | Error Handling and Retry Logic | Make apps robust and reliable | Concept 09: Error Handling and Retry Logic | Activity 09: Error Handling and Retry Logic | - | ET-9 | Submit Activity |
| 12 | Real-time Updates and Polling | Auto-refresh and live data | Concept 10: Real-time Updates and Polling | Activity 10: Real-time Updates and Polling | - | ET-10 | Submit Activity |
| 13 | Project 2: Enhanced Data Dashboard (Part 1) | Multi-source dashboard with charts | - | - | Project 2: Enhanced Data Dashboard | - | - |
| 14 | Project 2: Enhanced Data Dashboard (Part 2) | Complete dashboard features | - | - | Project 2: Enhanced Data Dashboard | - | Submit Project |
| 15 | Revision + Quiz 1 | Review API fundamentals | Quiz 1 Revision | Quiz 1 | - | - | - |
| 16 | Building Your First API | Create Express.js API server | Concept 11: Building Your First API | Activity 11: Building Your First API | - | ET-11 | Submit Activity |
| 17 | Deployment and Going Live | Deploy to production | Concept 12: Deployment and Going Live | Activity 12: Deployment and Going Live | - | ET-12 | Submit Activity |
| 18 | Project 3: Quest Tracker API (Part 1) | Build complete CRUD API | - | - | Project 3: Quest Tracker API | - | - |
| 19 | Project 3: Quest Tracker API (Part 2) | Add authentication and deploy | - | - | Project 3: Quest Tracker API | - | Submit Project |
| 20 | Revision + Quiz 2 | Review advanced concepts | Quiz 2 Revision | Quiz 2 | - | - | - |
| 21 | Final Project: Portfolio Capstone (Part 1) | Build custom API application | - | - | Final Project: Portfolio Capstone | - | - |
| 22 | Final Project: Portfolio Capstone (Part 2) | Complete features and testing | - | - | Final Project: Portfolio Capstone | - | - |
| 23 | Final Project: Portfolio Capstone (Part 3 - Presentation) | Polish and deploy | - | - | Final Project: Portfolio Capstone | - | Submit Project |
| 24 | Graduation | Project presentations and certification | Download Graduation Background | Complete Feedback Form | - | Submit Testimonial | - |
KCW89/content-warehouse