Project  —

Level up your game
with e-sport classes.

Mockup design of a HYDR e-sport project built by Emil Rosenius

The client

HYDR offers e-sport coaching classes, taught from HYDR's in-house e-sport coaches. No matter your level of skill, HYDR can put you on a matching team, where you will improve your performance in a variety of games, including Overwatch, League of Legends, Counter-Strike, Valorant and Fortnite.

Client website

The job

My client needed help in maintaining their software suite consisting of a backend, a standalone frontend application and a WordPress site. The first 3 months of the project consisted of maintenance and feature implementations in the existing stack.

In the beginning of summer 2020, my client and I reached the decision of implementing an entire new version of their software suite, which would take their brand to the next level. I took on this task in collaboration with Designer Nicolai Qvindbjerg, who designed the entire application with a lot of focus on the UX perspective.

Atmosphere  —

A universe
of gaming.

Fortnite character
Overwatch character
Leauge of legends character
Counter Strike: Global Offensive character

What I did


Infrastructure

I set up my client's infrastructure on AWS in a multi-AZ virtual private cloud.

The application is running on a separate instance for each environment, which are both created from snapshots for easy tear-down and recreation of the environment. The database is hosted on RDS, which lets my client benifit from microsecond point-in-time restores and automatic fail-over. File uploads are stored on S3 from which they are cached on edge nodes through CloudFront for optimal delivery. Asynchronous tasks are piped through Amazon SQS. A CI/CD chain is configured with git hooks for utilizing rapid, automatic deployments in each environment. Placing all queued tasks and persistent data leaves the application host completely stateless.


Backend

The backend is written in the Laravel framework using PHP 7.4. Laravel was a secure choice for me and my client, since it gave my client a lot of stuff out of the box in a way that it wouldn't impair our development or business flow in the future.

The backend hosts the core business logic, including a session-based client-facing REST API, a private marketing API, payment systems, asynchronous job queueing and processing, a content management system and more.


Frontend

The frontend is written in the latest version of Nuxt.js. I chose Nuxt.js because it gave me the configuration I needed out of the box, without having to spend too much time configuring our project, and it provides a way to achieve server side rendered Vue.js code without too much hassle.

The frontend consists three domains. 1) An engaging onboarding flow for new customers, which does a great job of guiding my client's users into selecting the right team. 2) A customer domain for managing subscriptions, viewing upcoming trainings etc, protected behind 3) an authentication domain.

Onboarding  —

An engaging
experience.

Screenshot of game selection in HYDR e-sport's onboarding flow
Screenshot of team selection in HYDR e-sport's onboarding flow
Screenshot of shopping cart overlay in HYDR e-sport's onboarding flow
Screenshot of checkout page in HYDR e-sport's onboarding flow

Customer dashboard  —

Managing your
subscription.

Screenshot of HYDR e-sport's login screen for the app dashboard
Screenshot of a team page in HYDR e-sport's app dashboard
Screenshot of a sign-up form for a team in HYDR e-sport's app dashboard
Screenshot of a profile settings page HYDR e-sport's app dashboard

Have a project in mind?
Let's get to work

Contact me