# A Journey from Monolith to Micro frontends at Udemy -- Part 2 of 3

DevFeed: [A Journey from Monolith to Micro frontends at Udemy -- Part 2 of 3](<https://devfeed.tech/articles/a-journey-from-monolith-to-micro-frontends-at-udemy-part-2-of-3-26358.md>)

Original publisher: [Read original article](<https://medium.com/udemy-engineering/transforming-frontend-architecture-a-journey-from-monolith-to-micro-frontends-at-udemy-part-2-c9bd7ede5f1c?source=rss----19c6d3367ed4---4>)

Author: Hamza ERBAY

Published: 2024-01-08T18:30:04Z

Content type: article

Language: en

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

Topics: [Front end](<https://devfeed.tech/topics/frontend.md>), [Next.js](<https://devfeed.tech/topics/next-js.md>), [React](<https://devfeed.tech/topics/react.md>), [Hackathon](<https://devfeed.tech/topics/hackathon.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [GraphQL](<https://devfeed.tech/topics/graphql.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [collaboration](<https://devfeed.tech/tags/collaboration.md>), [decoupling](<https://devfeed.tech/tags/decoupling.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [hackathon](<https://devfeed.tech/tags/hackathon.md>), [hackathons](<https://devfeed.tech/tags/hackathons.md>), [infrastructure](<https://devfeed.tech/tags/infrastructure.md>), [micro-frontends](<https://devfeed.tech/tags/micro-frontends.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>), [static-site](<https://devfeed.tech/tags/static-site.md>)

## AI overview

This second article in a three-part series describes Udemy's hackathon exploration of decoupling its monolithic frontend into micro frontends. It explains the limitations of tightly coupled React components, the choice of Next.js, and criteria used to select the Featured topics page as an initial candidate.

## Source excerpt

Transforming Frontend Architecture: A Journey from Monolith to Micro Frontends at Udemy -- Part 2 of 3 By: Chris Nienhuis, Hamza Erbay, Matthew Bise, Nathan Chapman, Seth Hodgson, Trey Briggs, Charles Pham Photo by Hamza Erbay on UnsplashIntroduction In the previous section, we discussed the challenges in our current monolith architecture and the reasons why we are keen on transitioning to a micro frontend architecture. Now, we are going to delve into the hackathon event at Udemy where we explored the idea of decoupling our frontend structure, the preparations we made, and the options we considered for this transformation. If you missed Part 1 of this series, it is located here: Transforming frontend Architecture: A Journey from Monolith to Micro frontends at Udemy -- Part 1... Udemy Hackathon During the Hackathon event at Udemy, which we organize every six months, I had the opportunity to meet some amazing people in 2021. We collaborated on ideas for decoupling the frontend structure, which was a great experience. Our team comprised Chris Nienhuis, Hamza Erbay, Matthew Bise, Nathan Chapman, and Trey Briggs. We would like to thank Seth Hodgson for bringing us together. Preparation Our React components are currently tightly linked to the monolith runtime environment, making it impossible to use them across our various sites or in different rendering environments -- client-side, server-side, or offline via static site generation tools (B2C/B2B, support center, blogs, microsites, etc.). Udemy Monolith's high-level architecture Decoupling the frontend would improve our daily workflow and make it easier to make significant style changes across the apps. After researching modern frontend technologies, we chose Next.js for its strong community support and performance. Then, we worked on the high-level structure for the hackathon. Analyze the inventory The hackathon posed challenges related to our infrastructure and GraphQL integration that needed to be addressed. Our goal was t