INVENT Platform Documentation

Welcome to the INVENT Experience Builder platform documentation. This guide will help you navigate the documentation based on your role and goals.

---

Quick Start by Role

🎯 I'm a Widget Developer

New to the platform? Start here:

1. Prerequisites - Set up your development environment
2. Create Your First Widget - Step-by-step guide with screenshots
3. Creating a Widget Tutorial - Complete development guide

Already familiar? Jump to:

• Widget Development Overview - Quick reference
• Advanced Features - OAuth, WebSockets, Extensions
• Development Workflow - Local development & debugging

🏗️ I'm a Platform Developer

Building platform-level features:

1. System Overview - Architecture overview
2. Experience Builder Overview - Platform components
3. Platform Widgets - Creating platform widgets
4. BFF Specification - Backend for Frontend API

👨‍💼 I'm a Tech Lead / Architect

Understanding the platform:

1. INVENT Cloud Platform - High-level platform overview
2. System Overview - Detailed architecture
3. Module Federation - Widget loading architecture
4. Extensions - Extending platform functionality

🆕 I'm Onboarding to the Team

Complete onboarding checklist:

1. FE Onboarding - Complete onboarding guide
2. Prerequisites - Development environment setup
3. Creating Your First Widget - Hands-on tutorial

---

Quick Navigation by Task

Creating & Publishing Widgets

Task	Documentation
Create widget from template	From Template Tutorial
Understand widget structure	Getting Started → Project Structure
Configure widget settings	Configuration
Publish widget to portal	Widget Publishing Flow
Deploy widget	Deployment

Developing Widgets

Task	Documentation
Run widget locally	Development Workflow → Local Development
Connect to portal for debugging	Development Workflow → Connecting to Portal
Call APIs from widget	Core Features → API Integration
Add OAuth authentication	Advanced Features → OAuth
Share data between widgets	Advanced Features → State Sharing
Add WebSocket updates	Advanced Features → WebSocket

Widget Features & APIs

Task	Documentation
Use platform APIs	Widget Specifications API
Display notifications	Core Features → Notifications
Apply theming	Configuration → Theming
Create settings form	Configuration → Widget Settings
Use UI-Kit components	UI-Kit

Testing & Quality

Task	Documentation
Write component tests	Layout & Testing → Testing
Ensure accessibility	A11y Support
Code style & linting	Code Style
Version management	Semantic Versioning

Platform Integration

Task	Documentation
Understand widget types	Dashboard Integration → Widget Types
Work with Dashboard Composer	Dashboard Integration
Use extensions	Extensions
Understand Module Federation	Module Federation

---

Documentation Sections

📚 Creating a Widget

Complete tutorial covering widget development from start to finish:

• Getting Started & Setup
• Dashboard Integration
• Configuration & Theming
• Core Features (API, Notifications, React Query)
• Layout & Testing
• Development Workflow
• Deployment
• Advanced Features (OAuth, State Sharing, WebSockets)

🚀 Quickstart Guides

Step-by-step guides for getting started:

• Prerequisites & Environment Setup
• Creating Widget from Template (5 steps)
• Creating Widget from Existing Widget

📖 Manual

Comprehensive reference documentation:

• Guidelines - Widget development patterns and best practices
• BFF - Backend for Frontend specification
• Extensions - Platform extensions system
• UI-Kit - Component library
• Widget Store - Widget distribution
• Theming - Platform theming system
• Technology - Module Federation, versioning
• Reference - Environment variables, browser testing, PR decoration

🌐 Overview

Platform architecture and concepts:

• Platform Overview & Terminology
• Experience Builder Architecture
• INVENT Cloud Platform
• System Overview

🎓 Tutorials

Hands-on tutorials for specific tasks:

• Merge Request Tutorial
• Prettier Setup Tutorial
• ProxyLogin Tutorial