🎮 HytaleGuide

The ultimate Hytale encyclopedia in Spanish

🌐 Live Demo • 📖 Documentation • 🐛 Report Bug

---

📋 Description

HytaleGuide is a comprehensive web platform dedicated to Hytale, developed as a commercial project. It combines modern frontend with React/TypeScript, Node.js backend, and content automation through N8N, all deployed with Docker.

This project showcases full-stack development, DevOps, internationalization, and microservices architecture skills.

✨ Features

• 🌍 Multilingual - Internationalization system with 5 languages
• 🎨 Modern Design - UI with Glassmorphism and smooth animations
• 🔍 AI Search - AI-powered search engine
• 🤖 N8N Automation - Automatic content updates through workflows
• 🎯 Hot Reload - Agile development with real-time reloading
• 📱 Responsive Design - Adaptable to all devices
• 🐳 Dockerized - Complete containerized infrastructure
• 🔒 SSL/HTTPS - Certificates configured with Nginx
• 📊 Analytics - Google Analytics integrated

---

🚀 Tech Stack

Frontend

• React 18.3 - UI Library
• TypeScript 5.6 - Static typing
• Vite 6.0 - Ultra-fast build tool
• Tailwind CSS 3.4 - Utility-first CSS framework
• i18next - Internationalization

Backend

• Node.js 20 - JavaScript runtime
• Express - Web framework
• MongoDB - NoSQL database

DevOps & Automation

• Docker & Docker Compose - Containers
• Nginx - Reverse proxy and web server
• N8N - Workflow automation and content updates

---

📦 Installation & Deployment

Note: This is a commercial project and fansite dedicated to Hytale. Code is available for portfolio and technical demonstration purposes. Not officially affiliated with Hypixel Studios or Riot Games.

Prerequisites

• Node.js 20+
• Docker & Docker Compose
• MongoDB
• N8N (for content automation)

Local Development

# Clone the repository
git clone https://github.com/abello-r/HytaleGuia.git
cd HytaleGuia

# Install frontend dependencies
cd frontend
npm install

# Install backend dependencies
cd ../backend
npm install

# Return to root
cd ..

With Docker (Recommended)

# Start all services
docker-compose up

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000
• Nginx: http://localhost

---

🛠️ Configuration

Environment Variables

Create a .env file in the project root:

# MongoDB
MONGO_URI=mongodb://localhost:27017/hytaleguia

# Backend
PORT=5000

# Frontend (optional)
VITE_API_URL=http://localhost:5000

Hot Reload in Docker

The project is configured with automatic hot reload. Changes in frontend/src are reflected instantly without restarting the container.

---

📁 Project Structure

HytaleGuia/
├── frontend/                # React application
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── locales/        # i18n translations
│   │   ├── App.tsx         # Main component
│   │   └── main.tsx        # Entry point
│   ├── public/             # Static assets
│   └── Dockerfile          # Production Docker
│
├── backend/                 # Node.js API
│   ├── server.js           # Express server
│   ├── routes/             # API routes
│   ├── models/             # MongoDB models
│   └── Dockerfile
│
├── nginx/                   # Nginx configuration
│   ├── nginx.conf          # Main config
│   └── certs/              # SSL certificates
│
└── docker-compose.yml       # Docker compose

---

🎯 Architecture

┌─────────────┐
│    User     │
└──────┬──────┘
       │
       ▼
┌─────────────────┐
│  Nginx (HTTPS)  │  ← Reverse Proxy + SSL
└────────┬────────┘
         │
    ┌────┴────┐
    │         │
    ▼         ▼
┌─────────┐ ┌──────────┐
│ React   │ │ Node.js  │
│Frontend │ │ Backend  │
└─────────┘ └────┬─────┘
                 │
            ┌────┴────┐
            │         │
            ▼         ▼
      ┌──────────┐ ┌─────────┐
      │ MongoDB  │ │   N8N   │  ← Automation
      └──────────┘ └─────────┘

Content Update Flow with N8N

1. N8N executes scheduled workflows
2. Collects information from external sources (RSS, APIs, web scraping)
3. Processes and formats content
4. Updates MongoDB with new content
5. Frontend consumes updated data in real-time

---

🌐 Multilingual

The project uses i18next for internationalization. To add a new language:

1. Create a file in frontend/src/locales/{code}/translation.json
2. Add the language to the selector in frontend/src/components/LanguageSelector.tsx
3. Translations load automatically

Supported languages:

• 🇪🇸 Español
• 🇬🇧 English
• 🇫🇷 Français
• 🇮🇹 Italiano
• 🇵🇹 Português

---

🎨 Color Palette

/* Main colors */
--deep-black: #0b0d12
--cyan-blue: #00d2ff
--dark-blue: #0099cc
--silver-gray: #a0a0a0

/* Glassmorphism */
--glass: rgba(255, 255, 255, 0.05)
--glass-border: rgba(255, 255, 255, 0.1)

---

📝 Available Scripts

Frontend

npm run dev          # Development server
npm run build        # Production build
npm run preview      # Preview build
npm run lint         # ESLint linter

Backend

npm start            # Start server
npm run dev          # Development mode with nodemon

Docker

docker-compose up              # Start services
docker-compose down            # Stop services
docker-compose logs -f         # View logs

---

🐛 Troubleshooting

Hot reload not working

Make sure you have the environment variables in the container:

environment:
  - CHOKIDAR_USEPOLLING=true
  - WATCHPACK_POLLING=true

Port already in use error

Change the ports in docker-compose.yml:

ports:
  - "3001:3000"  # Change 3000 to another port

MongoDB connection issues

Verify MongoDB is running:

docker-compose logs backend

---

📄 License

This project is under the MIT License. See the LICENSE file for more details.

---

👥 Team

Alexander Bello Full Stack Engineer	Olman Zapata Frontend Engineer
David Gomez Automation & Infrastructure Engineer	Diego Corado UX/UI Designer

---

🙏 Acknowledgments

• Hytale Community
• Hypixel Studios for creating Hytale
• All project contributors

---

🌟 Commercial Hytale Fansite

HytaleGuide - The Spanish Hytale Community Hub

🌐 Visit Site • 📧 Contact • ⭐ Star on GitHub

---

Built with ❤️ by the HytaleGuide Team

Not affiliated with Hypixel Studios or Riot Games