React/Next.js Micro-Frontend Build

I’m looking to spin up a basic sample micro-frontend architecture using React 18 or Next.js 13+.
This is not a full production build — the goal is to demonstrate a clean, modular proof of concept using Module Federation.

The engagement includes:

• Create a Host (Container) Next.js application that is responsible for loading and orchestrating the entire micro-frontend system.
• Create at least two basic Remote micro-apps, also built with Next.js.
• Configure Module Federation so the Host dynamically loads the remote applications.
• Ensure the Host app renders and controls the full micro-frontend experience.

⸻

Requirements for the Remote Apps

Each remote must:

• Use Next.js 13+ (App Router structure)
• Implement basic routing (at least 2 routes per remote)
• Include sample custom hooks (simple business logic example)
• Contain basic UI components to simulate real modular structure
• Be independently runnable and deployable

⸻

Shared Architecture Requirements

• Proper shared dependencies configuration (React, React DOM, Next, etc.)
• Implement a simple shared state mechanism between Host and Remotes
(Context API, lightweight global store, or similar — without tight coupling)
• Maintain loose coupling and modular folder structure
• Keep configuration clean and scalable

⸻

Deliverables

• 1 Host Next.js application
• 2 Remote Next.js applications
• Working Module Federation setup
• Shared dependencies configuration
• Shared state example across apps
• Basic routing inside remotes
• Clear project structure
• Well-commented code
• A short README covering:
• How to run each app
• How Module Federation is configured
• How shared dependencies are handled
• How shared state works
• How to add a new remote in the future