Unite-DB Website on Browser Mockup Shadow

unite-db.com

Owner & Frontend Developer

HTML5 Logo CSS3 Logo Javascript Logo Vue.js Logo Nuxt Logo Git Logo Figma Logo
Website Link Icon Visit Site

Overview

Pokémon Unite is a free-to-play multiplayer online battle arena game developed by TiMi Studio Group and published by The Pokémon Company and Nintendo. It was announced in June 2020 and released for Nintendo Switch in July 2021, followed by Android and iOS releases in September 2021. The game features 10-minute matches with two teams of 5 players each, aiming to achieve the highest total score to win. Ties are determined by the team that reached the final score first.

Key Objective

My main goal was to create a responsive Progressive Web App (PWA) that serves as a comprehensive resource for players of all levels, including newcomers and experienced veterans, seeking to understand the complex mechanics of Pokémon Unite. Being an avid player of the game myself, I noticed a significant lack of accessible explanations and guidance for players looking to improve their skills and knowledge within the game.

Challenge

The main challenge I encountered in this project was the absence of readily available explanations and information about the intricacies of Pokémon Unite. I had to extensively research and document the game's hidden mechanics, mathematical formulas, and devise user-friendly solutions to ensure that players could easily access the specific information they were seeking. Additionally, another notable challenge was sourcing and incorporating in-game assets to familiarize players with the visuals they encounter within Pokémon Unite, ensuring a seamless connection between unite-db.com and their actual in-game experience.

Solution

By conducting extensive research and collaborating with knowledgeable members of the community (shoutout to the Unite Mathcord) who possess incredible mathematical expertise, I was able to establish the foundation for the content featured on unite-db. Once this groundwork was laid, my focus shifted toward creating an optimal user experience and interface. To accomplish this, I utilized Figma to develop Lo-Fidelity wireframes and Hi-Fidelity mockups, ensuring a well-designed and intuitive website.

For the technical implementation, I chose Vue.js in conjunction with Nuxt.js to facilitate SEO optimization and efficient routing. Vercel was selected as the Git-based Jamstack deployment platform, providing seamless deployment processes. To store and manage the site's content in a human-readable and easily editable format, I employed Google Sheets as a "database" solution. By utilizing a plugin, I was able to export the sheet data as JSON for backend integration on the site.

This combination of technologies and tools enabled me to create a robust and dynamic website for unite-db, offering players a valuable resource for Pokémon Unite's mechanics and knowledge.

Website Link Icon Visit Site

    Image Slideshow

  • Low-Fidelity

    Unite-DB Abilities Tab Lo-Fi Mockup
  • Hi-Fidelity

    Unite-DB Abilities Tab Ho-Fi Mockup