Website CMS made with REACT

cepoidevs · Website CMS made with REACT

⚔️ React Mu - Professional Website for Mu Online Server

This project is a high-performance web application designed to serve as a control panel and public website for a Mu Online server.
It uses a modern architecture based on Node.js (Express) and React with Server-Side Rendering (SSR) to optimize SEO and initial performance.

Images

Sorry but you are not allowed to view spoiler contents.

🚀 Technology Stack

Component	Technology	Key Notes
Frontend	React (v18) + Vite	Dynamic user experience with SSR.
Backend	Node.js (Express v5)	RESTful API and secure middleware.
Database	Microsoft SQL Server (MSSQL)	Direct access to MuOnline and MuOnline_API databases.
Security	JWT, HttpOnly Cookies, bcrypt, Rate Limiting	Robust authentication and endpoint protection.
Performance	Rank & Status Caching	Reduces repeated database queries.

🛡� Implemented Security

The authentication system uses JWT with HttpOnly Cookies to protect user sessions.

Feature	Purpose
HttpOnly	Prevents XSS attacks. Cookies cannot be accessed via JavaScript.
Secure Recovery	Password reset with one-time tokens and short expiration.
Email Activation (Optional)	Email verification to prevent bots and fake accounts.
Secure	Requires HTTPS. Protects against Man-in-the-Middle attacks.
SameSite=Strict	Prevents CSRF attacks by allowing cookies only from the same site.
Separated Logic	Password hashing is handled in a separate module (hashUtils.js).

Quote🔒 Reminder: To use the Secure flag, the site must run under HTTPS with a valid SSL certificate.

🧰 Installation & Usage Guide for Developers

⚙️ I. Prerequisites

Make sure you have the following installed:

Requirement	Minimum Version	Description
Node.js	18+	Main runtime environment
npm	Included	Package manager
Microsoft SQL Server	—	Access to MuOnline DB
Game Server	—	Real-time status checking

🚀 II. Initial Setup & Installation

The project is structured as follows:

Code Select

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

1. Configure Environment Variables
Create a .env file inside /server with the following content:

Code Select


--- MSSQL Database Configuration ---

DB_SERVER=your_sql_server_ip_or_hostname
DB_PORT=1433
DB_NAME=MuOnline
DB_USER=your_sql_user
DB_PASSWORD=your_sql_password

--- Game Server Configuration ---

GAME_SERVER_IP=your_gameserver_ip
GAME_SERVER_PORT=55901

--- Security and Authentication ---

JWT_SECRET="My_Super_Secure_Secret_Key"
PASSWORD_HASH_METHOD="md5"
BCRYPT_SALT_ROUNDS=10

--- Administration Settings ---

ADMIN_ACCOUNT_ID="admin_account_name"

--- Public API Configuration ---

PUBLIC_API_URL="http://localhost:5000
"

--- Recovery / Activation Email ---

EMAIL_HOST=smtp.example.com
EMAIL_PORT=587
[email protected]

EMAIL_PASSWORD=your_email_or_app_password

ENABLE_EMAIL_ACTIVATION=false
ACTIVATION_TOKEN_EXPIRY_HOURS=24

Quote⚠️ Important: If using HTTPS, change PUBLIC_API_URL to your domain using https://

🚀 Deployment Guide

📁 Required files:

File/Folder	Purpose
client/	Optimized frontend and SSR bundle.
dist-obf/	Obfuscated backend (server.js, controllers, etc.).
package.json	Installs production dependencies.
.env	DB and Game Server credentials (keep private).

🧩 Final Structure:

Code Select

/reactmu/
├── server/
│ ├── package.json
│ ├── .env
│ ├── dist-obf/
│ └── node_modules/
└── client/
└── dist/

⚙️ Commands to Start the Web:

1. Install dependencies:

Code Select

cd /reactmu/server
npm install --production

2. Start server:

Code Select

node dist-obf/server.js

Quote💡 Use NGINX or Apache as a reverse proxy to handle SSL and ports 80/443.

🟢 Quick Guide: Installing Node.js (v18+)

Option 1: Direct download (Windows/macOS)

1. Go to https://nodejs.org
2. Download LTS version
3. Run the installer (.msi o .pkg)

Option 2: Version manager (NVM)

Code Select

nvm install 18
nvm use 18

Verify installation:

Code Select

node -v
npm -v

📚 Useful Resources
Node.js Docs
Vite Documentation
Express.js Guide
MSSQL Node Driver
Nodemon

[info]For now the website uses the database from the Kayito 97k files; the only events displayed at the moment are Devil Square and Blood Castle, and rankings for resets and guilds.
I am currently working on the website and will keep updating it, adding more compatibility and features for more recent databases.
The next step will be adding compatibility with the database used by MuEMU up to Season 6.

Regarding design, I plan to create additional templates for the website; this will not be the only one.

Any update regarding the web will be published here on the forum; you can also send me a private message if you want to contact me.[/info]

DOWNLOAD

You require the following to view this post content:

To see this content, please click the "-SAY THANKS-" button located on the bottom-right of this post.

Credits: Luiz Rios for the website design.

Website CMS made with REACT

cepoidevs

You require the following to view this post content: