https://github.com/ang-len-26/dashboard-mf
🧩 Dashboard Modular con Micro-Frontends en React + Webpack 5 + Module Federation
https://github.com/ang-len-26/dashboard-mf
dashboard micro-frontends module-federation react typescript webpack
Last synced: 3 months ago
JSON representation
🧩 Dashboard Modular con Micro-Frontends en React + Webpack 5 + Module Federation
- Host: GitHub
- URL: https://github.com/ang-len-26/dashboard-mf
- Owner: ang-len-26
- License: mit
- Created: 2025-05-28T18:03:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-15T23:55:32.000Z (about 1 year ago)
- Last Synced: 2025-07-30T20:46:11.747Z (12 months ago)
- Topics: dashboard, micro-frontends, module-federation, react, typescript, webpack
- Language: TypeScript
- Homepage: https://clima-app-orpin.vercel.app
- Size: 1.66 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🧩 Dashboard Modular con Micro-Frontends (Shell)
Este proyecto actúa como el contenedor principal (`shell`) de una arquitectura basada en **Micro-Frontends** utilizando **React**, **TypeScript**, **Webpack 5** y **Module Federation**. Su objetivo es integrar de forma dinámica diferentes módulos funcionales (como clima, criptomonedas y autenticación), ofreciendo una experiencia de usuario unificada y escalable.
## 🚀 ¿Qué hace este módulo?
El `shell` es responsable de:
- Cargar dinámicamente los microfrontends (como clima y cripto).
- Proporcionar la navegación y el layout común.
- Compartir estado global (por ejemplo, autenticación).
- Centralizar configuraciones de estilo o librerías compartidas.
## 🛠️ Tecnologías utilizadas
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Webpack 5](https://webpack.js.org/)
- [Module Federation](https://webpack.js.org/concepts/module-federation/)
- [React Router](https://reactrouter.com/)
## 📁 Estructura del proyecto
- shell/
- ├── public/
- ├── src/
- │ ├── assets/
- │ │ └── logo.png
- │ ├── components/
- │ │ ├── ErrorBoundary.tsx
- │ │ ├── Header.tsx
- │ │ └── ThemeToggle.tsx
- │ ├── context/
- │ │ └── ThemeContext.tsx
- │ ├── styles/
- │ ├── pages/
- │ │ └── Dashboard.tsx
- │ ├── services/
- │ │ └── theme.css
- │ ├── types/
- │ │ └── images.d.ts
- │ ├── App.tsx
- │ ├── bootstrap.tsx
- │ └── index.tsx
- ├── webpack.config.js
- └── package.json
n
## ⚙️ Requisitos
- Node.js `^18.x`
- NPM `^9.x` o superior
## ▶️ Instrucciones para clonar y ejecutar
Desde la raíz del repositorio:
```bash
# Clona el repositorio
git clone https://github.com/ang-len-26/dashboard-mf.git
cd dashboard-mf
# Arranca el shell
cd shell
npm install
npm start
```