# Migrating Udemy's Homepage to Micro Frontends

DevFeed: [Migrating Udemy's Homepage to Micro Frontends](<https://devfeed.tech/articles/migrating-udemy-s-homepage-to-micro-frontends-26356.md>)

Original publisher: [Read original article](<https://medium.com/udemy-engineering/migrating-udemys-homepage-to-micro-frontends-78bbd2e64925?source=rss----19c6d3367ed4---4>)

Author: Eugenia Leong Kato

Published: 2024-05-01T20:41:02Z

Content type: article

Language: en

Sources: [Udemy Engineering](<https://devfeed.tech/sources/udemy-engineering.md>)

Topics: [migration](<https://devfeed.tech/topics/migration.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Development](<https://devfeed.tech/topics/development.md>), [Web](<https://devfeed.tech/topics/web.md>), [React](<https://devfeed.tech/topics/react.md>), [modules](<https://devfeed.tech/topics/modules.md>), [User Stories](<https://devfeed.tech/topics/user-stories.md>), [Requirements](<https://devfeed.tech/topics/requirements.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [developer-velocity](<https://devfeed.tech/tags/developer-velocity.md>), [development](<https://devfeed.tech/tags/development.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [micro-frontends](<https://devfeed.tech/tags/micro-frontends.md>), [migration](<https://devfeed.tech/tags/migration.md>), [module](<https://devfeed.tech/tags/module.md>), [react](<https://devfeed.tech/tags/react.md>), [requirements](<https://devfeed.tech/tags/requirements.md>), [user-stories](<https://devfeed.tech/tags/user-stories.md>)

## AI overview

Udemy describes migrating its logged-out homepage from a monolithic architecture to micro frontends. The article covers the migration's motivations, preparation through user stories and requirements, modular team organization, React component reuse, and shared npm packages, with reported improvements in development speed and web performance motivating the architectural change.

## Source excerpt

By Eugenia Kato, Anthony Nichols, Sol Zhu, Eyupcan Bodur, Stephen Duke, David Gao, Michael Palisano, Izabela Bulska, Elaine Zhou, Matt Schaefer, Marty Note, Matthew Bise, Chris Nienhuis, Jilles Soeters, Trey Briggs, Seth Hodgson Introduction This blog delves into the migration of Udemy's logged-out homepage from a monolith architecture to a micro frontends architecture, detailing the motivations behind the migration, challenges faced, and the impact on developer velocity and web performance metrics as a result of the migration. Udemy's logged-out homepage is the second most frequently visited destination, following the course landing pages. Our current focus revolves around professional skills development to cater the needs of professionals seeking upskilling and reskilling opportunities. However, the design and content of the logged-out homepage did not align with this focus. As a result, a new homepage was redesigned that aimed to showcase Udemy's range of offerings and emphasize its commitment to professional skills development. Beyond a mere facelift, the redesign presented an opportunity for us to transition the logged-out homepage from a monolith architecture to micro frontend architecture. With the enhanced web performance metrics, especially for international users, and increased development speed demonstrated in the previous blog post, we are motivated to adopt the new frontend architecture. Preparing for the migration We laid the groundwork for the new logged-out homepage by creating a new micro-frontend application, keeping it isolated from other existing frontend applications. This allows for a more streamlined and efficient development process, as React components and pages that are not relevant can be excluded. As a preparatory step for the migration, we broke down each of the homepage modules into user stories. Then, we collaborated with our design and product partners to define clear and concise requirements for each module. This structured approach