Case Study: Web Projects for Mortalis Game

Mortalis: Back to the Roots is an upcoming, ground-breaking, survival MMORPG. My task was to rebuild their website and community portal with future expansions in mind.

Github Visit the Site

Introduction

When I joined Mortalis Game as a web developer, my goal was to rebuild their website and start putting down the specifications for the community portal - Survivors Camp. Quickly it became obvious that the old site running on WordPress was too slow and the capabilities were limited, especially with the upcoming requirements for the Survivors Camp. So I started putting together a new tech stack that would be easy to maintain and extend as needed because at that point we didn't know what we were exactly going to build.

System Architecture

  1. Marketing Website (Next.js)
    • Purpose: Hosts landing pages and other primarily static content for public users.
    • Technology: Built with Next.js, optimized for SEO and fast load times, statically generated.
    • Functionality:
      • Serves static pages and general marketing information.
      • Does not include any backend APIs or dynamic user interactions.
  2. Survivors Camp (Next.js + API Layer)
    • Purpose: Acts as the main interactive application for the user community.
    • Technology:
      • Built with Next.js for both frontend and server-side rendering.
      • Includes a quite large backend API layer for internal and external integrations.
    • Functionality:
      • Provides APIs consumed by external services (e.g., the Discord bot, scheduler, etc.).
      • Hosts a frontend interface displaying WordPress posts, which are:
        • Pulled from a headless WordPress instance.
        • Synced into a local PostgreSQL database for faster access and consistency.
      • Maintains account metadata, but not the actual authentication or identity data.
      • Provides pages and APIs for game client authentication.
  3. Authentication Server (“Auth Server”)
    • Purpose: Central authority for user identity and authentication.
    • Technology: Golang, PostgreSQL, JWT, OAuth2.0, SSO, etc.
    • Functionality:
      • Manages all user accounts, authentication, and identity data.
      • The community portal syncs account data from this service.
      • Ensures a consistent identity system across multiple services.
  4. Discord Bot
    • Purpose: Connects Survivors Camp and the Discord server to enrich user interaction.
    • Technology: Golang, SQLite
    • Functionality:
      • Fetches and updates user data via the community portal’s APIs.
      • Provides rich user profiles and synchronized information between the web portal and the Discord community.
      • Posts periodic messages to the Discord server to keep users engaged and informed, like weekly leaderboards, etc.

Screenshots

Main Page

Main page of application

News Page

Here you can see posts from WordPress backend that are displayed by Next.js

Flight page

Whitepaper

Flight page

Survivors Camp Front Page

Flight page

Survivors Camp - Dashboard

Flight page

We provide users statistics to track how much RS they have accumulated, what is the global supply doing and how they are ranking compared to their peers.

Flight page

Survivors Camp - Account Settings

The account system allows users to link and unlink different identity providers. Like mentioned before, by linking discord user unlocks more features we can offer them, extending Survivors Camp functionality beyond just a webpage.

Flight page

Survivors Camp - Profile

Users are able to customize their profile which can be loaded Discord and used in various other services in the future.

Flight page