Overview

MashHarder is an e-sports platform focused on competitive gaming, enabling users to participate in tournaments, track live match results, view leaderboards, and compete for prizes across titles such as EAFC, Call of Duty, Blur Racing, and Mortal Kombat.

I contributed as a Frontend Engineer, delivering production-ready interfaces across web, mobile, and internal analytics systems.

Phase 1: Web Platform UI

A tournament details page from the web platform.

Problem

The platform required a scalable, responsive frontend to support dynamic content such as tournaments, leagues, and game listings, while maintaining performance and usability as user activity increased.

My Role

I led the development of the core frontend UI, translating product and design requirements into a structured, maintainable Next.js application.

What I Built

• Main site
• Game, tournament, and league listing interfaces
• Dynamic detail pages for competitions and matches
• Reusable UI components to support rapid feature expansion
• Layout system and navigation structure for consistent UX

Technical Approach

• Implemented a component-driven architecture for scalability and reuse
• Structured pages to support dynamic data rendering from APIs
• Focused on responsive design and performance optimisation

Tech

Next.js · TypeScript · CSS Modules

Phase 2: Mobile Application UI

A tournament interface from the mobile application.

Problem

MashHarder required a mobile-first experience for users engaging with tournaments, live matches, and predictions, especially for users on Android devices.

My Role

I built the entire mobile UI layer end-to-end using Flutter, covering all core user flows and navigation patterns.

What I Built

• Full Flutter UI implementation from scratch
• Tournament, game, and league screens
• Navigation architecture and state-driven UI flows
• Reusable widget system for consistent cross-screen experience

Technical Approach

• Designed UI components for consistency across multiple screens
• Structured navigation to support scalable feature additions
• Optimised layouts for performance on mid-range Android devices

Tech

Flutter · Dart

Phase 3: Internal Analytics Dashboard

Overview of the internal analytics dashboard.

Problem

The team needed a centralised internal tool to monitor platform activity, user engagement, and external growth metrics without relying on manual reporting.

My Role

I designed and developed a private analytics dashboard for internal stakeholders, integrating multiple data sources into a single interface.

What I Built

• Internal dashboard UI for operational insights
• Integration with backend APIs for platform metrics
• YouTube Data API integration for subscriber tracking
• Role-restricted access for internal users

Technical Approach

• Aggregated data from multiple sources into a unified interface
• Designed UI for quick decision-making and readability
• Implemented secure access controls for internal tooling

Tech

Next.js · TypeScript · Tailwind CSS · REST APIs · YouTube Data API

Key Technical Contributions

• Delivered multi-platform frontend systems across web and mobile
• Built reusable component and widget systems to accelerate development
• Integrated third-party APIs alongside internal backend services
• Maintained consistency across consumer-facing and internal tools

Product & Engineering Highlights

• Supported a platform handling competitive gaming workflows (tournaments, scoring, leaderboards)
• Built systems designed for scalability as user activity grows
• Contributed to both user-facing product features and internal operational tooling

Outcome / Impact

• Delivered core frontend systems for MashHarder’s platform across web and mobile
• Enabled internal teams to track metrics through a dedicated analytics dashboard
• Contributed to a product that secured $100,000 in funding (2025)

Notes

Some features and systems are internal or pre-launch and cannot be publicly demonstrated.

Links

Live Site: mashharder.com