⚔️ React Mu - Web profesional para Servidor de Mu Online

Este proyecto es una aplicación web de alto rendimiento diseñada para servir como un panel de control y sitio web público para un servidor de Mu Online. 
Utiliza una arquitectura moderna basada en Node.js (Express) y React con Server-Side Rendering (SSR) para optimizar el SEO y el rendimiento inicial.

Imagenes

Spoiler for Hiden:

[img ]https://i.ibb.co/6C3nvNh/localhost-5173-4.png[/img]

🚀 Pila Tecnológica (Tech Stack)

Componente	Tecnología	Notas Clave
Frontend	React (v18) + Vite	Experiencia de usuario dinámica con SSR.
Backend	Node.js (Express v5)	API RESTful y middleware seguro.
Base de Datos	Microsoft SQL Server (MSSQL)	Acceso directo a las bases MuOnline y MuOnline_API.
Seguridad	JWT, HttpOnly Cookies, bcrypt, Rate Limiting	Autenticación robusta y protección de endpoints.
Rendimiento	Caching de Rank y Estado	Minimiza consultas repetitivas a la base de datos.

🛡️ Seguridad Implementada

El sistema de autenticación usa JWT con Cookies HttpOnly para proteger las sesiones de usuario.

Característica	Propósito
HttpOnly	Evita ataques XSS. Las cookies no son accesibles desde JavaScript.
Recuperación Segura	Restablecimiento de contraseña con tokens de un solo uso y expiración corta.
Activación por Email (Opcional)	Verificación por correo electrónico para prevenir bots y cuentas falsas.
Secure	Requiere HTTPS. Protege contra ataques Man-in-the-Middle.
SameSite=Strict	Previene ataques CSRF asegurando envío solo desde el mismo sitio.
Lógica Separada	El hashing de contraseñas se maneja en un módulo separado (hashUtils.js).

🔒 Recuerda: Para usar la bandera Secure, el sitio debe correr bajo HTTPS con un certificado SSL válido.

🧰 Guía de Instalación y Uso para Desarrolladores

⚙️ I. Requisitos Previos

Asegúrate de tener lo siguiente instalado:

Requisito	Versión mínima	Descripción
Node.js	18+	Entorno de ejecución principal
npm	Incluido	Gestor de paquetes
Microsoft SQL Server	—	Acceso a las BD MuOnline
Servidor del Juego	—	Comprobación de estado en tiempo real

🚀 II. Configuración e Instalación Inicial

El proyecto está estructurado así:

Code: [Select]

/client  → Frontend (React + Vite)
/server  → Backend (Express + MSSQL)

1. Configurar Variables de Entorno 
Crea un archivo `.env` dentro de `/server` con el siguiente contenido:

Code: [Select]

# --- Configuración de Base de Datos MSSQL ---
DB_SERVER=tu_ip_o_nombre_servidor_sql
DB_PORT=1433
DB_NAME=MuOnline
DB_USER=tu_usuario_sql
DB_PASSWORD=tu_contraseña_sql

# --- Configuración de Servidor de Juego ---
GAME_SERVER_IP=la_ip_de_tu_gameserver
GAME_SERVER_PORT=55901

# --- Seguridad y Autenticación ---
JWT_SECRET="Mi_Clave_Secreta_Super_Segura_Que_Solo_Yo_Se"
PASSWORD_HASH_METHOD="md5"
BCRYPT_SALT_ROUNDS=10

# --- Configuración de Administración ---
ADMIN_ACCOUNT_ID="nombre_de_la_cuenta_admin"

# --- Configuración de la API Pública ---
PUBLIC_API_URL="http://localhost:5000"

# --- Email de recuperación / activación ---
EMAIL_HOST=smtp.ejemplo.com 
EMAIL_PORT=587 
EMAIL_USER=no-responder@tu-dominio.com
EMAIL_PASSWORD=tu_contraseña_o_clave_de_aplicacion

ENABLE_EMAIL_ACTIVATION=false 
ACTIVATION_TOKEN_EXPIRY_HOURS=24

⚠️ Importante: Si usas HTTPS, cambia PUBLIC_API_URL a tu dominio con https://

🚀 Guía de Despliegue

📁 Archivos necesarios:

Archivo/Carpeta	Propósito
client/	Frontend optimizado y bundle SSR.
server/	Backend (server.js, controllers, etc.).
package.json	Instalación de dependencias en producción.
.env	Credenciales de la DB y Game Server (mantener privado).

🧩 Estructura Final:

Code: [Select]

/reactmu/
├── package.json
├── .env  
├── node_modules/
├── server/
└── client/

⚙️ Comandos para Levantar la Web:

1. Instalar dependencias:

Code: [Select]

cd /reactmu/
npm install

2. Iniciar servidor:

Code: [Select]

npm start

💡 Usa NGINX o Apache como proxy inverso para manejar SSL y puertos 80/443.

🟢 Guía Rápida: Instalación de Node.js (v18+)

Opción 1: Descarga directa (Windows/macOS)
1. Ir a https://nodejs.org 
2. Descargar versión LTS 
3. Ejecutar instalador (.msi o .pkg)

Opción 2: Gestor de versiones (NVM)

Code: [Select]

nvm install 18
nvm use 18

Verificar instalación:

Code: [Select]

node -v
npm -v

📚 Recursos Útiles

• Node.js Docs
  
• Vite Documentation
  
• Express.js Guide
  
• MSSQL Node Driver
  
• Nodemon
  

Por el momento la web utilizo la base de datos de los files 97k de kayito, los unicos eventos a mostrar por el momento son los de devil square y blood castle, y rankings de resets y guild.
Actualmente estoy trabajando en la web y voy a seguir actualizandola y agregando más compatibilidad y funciones con bases de datos más recientes, el próximo paso va a ser agregarle compatibilidad con la base de datos que utiliza muemu hasta season 6.

En cuanto el diseño planeo hacer otros diseños para la web, no va a ser el único.

Caulquier actualización que haya de la web la voy a públicar acá en el foro, también me pueden escribir al privado si quieren algún contacto.

DESCARGA


Creditos: Luiz Rios por el diseño del sitio.

✨ Autor: Marcos Arauz
Desarrollador Web & Diseñador Multimedial 
📧 Proyecto privado orientado a servidores Mu Online

© React Mu - Todos los derechos reservados.

  saludos bro excelente aporte

Cada vez mejor amigo un lujo

 
 

Cada vez mejor amigo un lujo

 
 

saludos bro excelente aporte

Muchas gracias!... en estos días voy a hacer un update.

De momento estuve viendo que se puede instalar aplicaciones node.js en un cPanel pero tiene que tener acceso a la terminal o previamente el proveedor de webhosting tiene que haber habilitado en su WHM la aplicación de node.js... Si alguién tiene cPanel y quiere probar la web pongase en contacto conmigo que intentamos configurar el cPanel, si no buscando en google/youtube, incluso con ayuda de alguna IA 'react web ssr node.js on cpanel' van a encontrar la forma! pero bueno... Todo depende del proveedor.

Implementación de gestión dinámica de Navbar y corrección de bug de inmutabilidad anidada

Cambios Principales:
Se añade la sección "Nav Bar" en el panel de administración para controlar la visibilidad, etiquetas y redirecciones (internas/externas) de los enlaces.

En enlace de descarga sigue siendo el mismo repositorio de github asi que desde el primer post lo pueden descargar 

Modulo de descargas 100 funcional

 

Es muy buen proyecto, moderno, interesante, te felicito. Pero como han comentado arriba, si es una web en la cual no van a poder instalarla facilmente en un cpanel, dificil que sea usada, no digo que no lo sea, pero a nivel de otras webs, no. Ya que la mayoria que tiene server hoy en dia, no entiende casi nada de webs, suele instalar lo default que hay por ahi, por ejemplo la webengine o la dmn. Aunque esta web al ser moderna podria ser usada por administradores con mas experiencia y sepa levantar un vps en linux, o que paguen uno, y que puedan instalar todas las dependencias necesarias, pero bueno ya esta en cada uno.

Repito, esto no quiere decir que no sea buena web, al contrario es una buena web, con tecnologias modernas, el unico problemita es lo que mencionaron antes nada mas

Es muy buen proyecto, moderno, interesante, te felicito. Pero como han comentado arriba, si es una web en la cual no van a poder instalarla facilmente en un cpanel, dificil que sea usada, no digo que no lo sea, pero a nivel de otras webs, no. Ya que la mayoria que tiene server hoy en dia, no entiende casi nada de webs, suele instalar lo default que hay por ahi, por ejemplo la webengine o la dmn. Aunque esta web al ser moderna podria ser usada por administradores con mas experiencia y sepa levantar un vps en linux, o que paguen uno, y que puedan instalar todas las dependencias necesarias, pero bueno ya esta en cada uno.

Repito, esto no quiere decir que no sea buena web, al contrario es una buena web, con tecnologias modernas, el unico problemita es lo que mencionaron antes nada mas

Esta pal que la quiera

UPDATE: fácil instalación... se que estaba medio dificil la instalación y el levantamiento de la web así que ahora es tan facil como bajarse el nuevo repositorio , ponerlo en cualquier carpeta y dentro de la carpeta abrir la consola y poner 'npm install' esperar que se instalen las dependencias y despues 'npm start' y listo, ya anda la web!

acá esta el link por si lo quieren, pero también actualice el tema principal con el nuevo link!