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
🛠Lab from the Platform Engineering Bootcamp. Used in Week 13. Bootcamp landing page: https://academy.tekanaid.com/bootcamps/platform-engineering-bootcamp Parent course(s):
- Week 13: Backstage: Internal Developer Portal (slug: backstage-developer-portal)
🟡 Beta bootcamp lab. Hands-on instructions, check scripts, and solve scripts are in place. Lab is part of the running TaskFlow project that grows across all 21 weeks of the bootcamp.
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
Backstage Setup & Service Catalog lab (backstage-fundamentals-taskflow) 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
Just exploring? Start free below. Want the full experience? Try Premium free for 7 days (card required, $0 today).
Pro
All courses, with lab scripts to run on your own machine
Renews automatically. Cancel anytime.
Final price verified at checkout.
- Full access to all courses
- Lab scripts to download and run on your own machine (hosted labs not included)
- Progress tracking
- Certificate of completion
- Community access
- Bootcamp participation
- New content access
Premium
Full access, including unlimited hosted labs
Renews automatically. Cancel anytime.
Final price verified at checkout.
- Everything in Pro
- Unlimited hands-on labs, fully hosted on TeKanAid Academy (nothing to set up)
- 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. Full access to course content, quizzes, certificates, and community features, lab access is not included.
Browse CoursesJust exploring? Start free, no account needed
Three free ways to start. All bridge into the paid Premium catalog when you're ready.
Not ready to commit? The crash course is email-only. No academy account required.
Ready to Get Started?
Start this hands-on lab and build real-world Platform Engineering skills
Get Access Now