Build Backstage Plugin with React
Build your first React plugin for Backstage! Create a TaskFlow Dashboard displaying live metrics using React hooks, Material-UI components, and API integration. Master useState, useEffect, and TypeScript while building production-quality React code. Learn React by doing!
Lab Overview
Build a custom Backstage plugin using React to display TaskFlow metrics. Master React hooks (useState, useEffect), component development with TypeScript, Material-UI components, and API integration patterns. Create the "TaskFlow Dashboard" plugin that shows live metrics (task counts, active users, deployment status) with professional React code and proper error handling.
You'll use Backstage CLI to scaffold a plugin, write React components with hooks, fetch data from TaskFlow API, handle loading and error states, style with Material-UI cards and grids, and integrate the plugin into Backstage's navigation and routing system.
What You'll Learn
Explore the Backstage plugin system and understand the plugin directory structure
Scaffold a new Backstage plugin using the Backstage CLI
Build React components using useState and useEffect hooks to display live metrics
Fetch data from the TaskFlow API and handle loading and error states
Style plugin components with Material-UI cards and responsive grid layouts
Integrate a custom plugin into the Backstage sidebar navigation and routing
Prerequisites
Week 12 Lab 1: Backstage Setup & Service Catalog completed
React vs Vue.js comparison lesson completed
TaskFlow application running with API endpoints
TypeScript basics
Material-UI component library introduction
Choose your plan
Simple, Transparent Pricing
Unlock full access to TeKanAid courses, labs, and bootcamps
Pro
Course content without labs
Renews automatically. Cancel anytime.
- Full access to all courses
- Progress tracking
- Certificate of completion
- Community access
- Bootcamp participation
- New content access
Premium
Full access with hands-on labs
Renews automatically. Cancel anytime.
- Everything in Pro
- Unlimited hands-on labs
- Lab AI Assistant
- Accelerator bootcamps with live office hours
- Priority support
Prefer a single course?
Purchase individual courses for a one-time fee of $79.00. Full access to course content, quizzes, certificates, and community features — lab access is not included.
Browse CoursesTry it free — no credit card
Pick how you want to start. Both are free, and both bridge into the paid Premium catalog when you're ready.
Ready to Get Started?
Start this hands-on lab and build real-world Platform Engineering skills
Get Access Now