Overview
What it is
This is a web application designed to help Warframe players quickly access essential in-game information through a centralized dashboard. Built with Next.js, React, and Tailwind CSS, the platform integrates external APIs to display dynamic game information, including Void Fissures, merchants, Sortie and Archon missions, and weekly activities. The project focuses on simplifying information discovery, presenting frequently changing game data in an organized interface.
Problem
The problem
Warframe is a content-rich online game with numerous time-sensitive activities, rotating missions, and limited-time merchants. Players often need to navigate multiple in-game menus to find information about active Void Fissures, merchant inventories, daily missions, and daily/weekly activities. This fragmented experience makes it unnecessarily time-consuming to track important events and plan gameplay efficiently.
Approach
How I built it
I developed a centralized information dashboard that aggregates Warframe game data from external APIs and presents it through a clean, intuitive interface. My approach focused on three main goals: integrating dynamic game data, organizing information into easily accessible categories, and creating a responsive interface that allows players to find what they need with minimal navigation.
- 1
External API Integration
Integrated external Warframe data APIs to retrieve dynamic game information, replacing manually maintained content with data-driven components. Structured API responses into reusable formats to simplify rendering and maintain consistency across different information categories.
- 2
Centralized Dashboard
Designed a category-based dashboard with sidebar navigation for Void Fissures, merchants, Sortie and Archon missions, and weekly activities. Separated each information category into dedicated React components to improve code organization, maintainability, and navigation.
- 3
Dynamic Data Presentation
Built reusable UI components to transform API responses into readable game information. Focused on presenting mission details, event availability, and time-sensitive activities in a structured format that helps players quickly identify relevant information.
Frontend/Backend
Next.js
External API
Tech
What I used
- Next.js
- React
- JavaScript
- HTML
- CSS
- Tailwind CSS
- Git
Gallery