Starships

Starships is a sophisticated microfrontend application that demonstrates the power of Webpack Module Federation for building distributed, scalable frontend architectures. The application showcases starships from the Star Wars universe with a space-themed UI built using React 19.2 and TypeScript 5.5.

The architecture follows a microfrontend pattern where different parts of the application are developed, built, and deployed independently as separate packages. The host application orchestrates multiple remote microfrontends, including a home page with starship list and search functionality, and a ship detail page for individual starship information.

The project uses Webpack 5.101 with Module Federation for runtime integration of remote modules. Shared packages include API client with TypeScript types, React hooks for data fetching, reusable UI component library with Styled Components, shared styles and utilities, and centralized webpack configuration.

• React 19.2 with TypeScript 5.5 frontend
• Webpack 5.101 with Module Federation
• Styled Components for themeable UI
• React Router for navigation
• Monorepo structure with pnpm workspaces
• Hot Module Replacement for development
• Type-safe component library with generated types
• Independent deployable microfrontends

The build process supports both development mode with HMR and production builds that bundle all microfrontends into a single distribution. Code quality is maintained with ESLint 9 and Prettier, and the project structure is organized into apps (host), pages (microfrontend pages), and packages (shared microfrontends).

The codebase is 88.2% TypeScript, 9.3% JavaScript, with full type safety across all microfrontends. Each microfrontend can be developed and deployed independently while sharing common dependencies through Module Federation's shared scope configuration.