Skip to content

Latest commit

 

History

History
109 lines (71 loc) · 2.68 KB

README.md

File metadata and controls

109 lines (71 loc) · 2.68 KB

Micro Frontend Demo

This project showcases a modern micro frontend architecture with Module Federation, built with React, TypeScript, and Redux Toolkit for scalable, modular applications.

✨ Features

  • 🏗️ Micro Frontend Architecture
       📦 Independent deployments with Module Federation

  • ⚛️ React with TypeScript
       🔒 Type-safe, component-based development

  • 🎯 Redux Toolkit
       📊 Efficient state management across micro frontends

  • 🎨 SCSS Modules
       🎨 Scoped, component-specific styling

  • 🚦 React Router
       🧭 Seamless navigation and routing

  • 🔄 RTK Query
       🔗 Simplified API integration with caching

  • 🧪 Vitest & React Testing Library
       🔍 Robust testing setup for reliable code

  • 🔒 Type-Safe Development
       🛡️ Minimized runtime errors with TypeScript

🚀 Getting Started

Prerequisites

Ensure the following tools are installed:

  • Node.js 18+
  • npm 9+

Installation

Clone the repository and install dependencies:

# Install dependencies
npm run setup

# Start development servers
npm run dev

# Build for production
npm run build

# Serve production build
npm run serve

🏗️ Architecture Overview

This application consists of two primary modules:

  1. Host Application

    • Serves as the main shell
    • Manages routing, layout, and shared state
    • Provides common utilities and dependencies

  2. Remote Application

    • Contains feature-specific components
    • Leverages shared dependencies from the host
    • Integrates seamlessly into the host’s interface

This architecture enables independent deployment, team autonomy, and optimal code sharing.

🔧 Development Guidelines

  • Maintain the established folder structure for clarity and scalability.
  • Use SCSS Modules for component-specific styling.
  • Adhere to TypeScript best practices for type safety.
  • Write tests for all new components and features.
  • Ensure error boundaries and loading states are implemented as needed.

🧪 Testing

Run tests and check code coverage to ensure application stability:

# Run tests
npm test

# Run tests with coverage report
npm run test:coverage

# Run tests with interactive UI
npm run test:ui

🤝 Contributing

To contribute:

  1. Create a feature branch for your changes.
  2. Make necessary updates and write tests.
  3. Commit your code and push it to the feature branch.
  4. Open a pull request for review.

📄 License

This project is licensed under the MIT License. Contributions are welcomed!