io.Side

Inspiration

The Web3 gaming market is growing rapidly, with many established Web2 game companies and Web3 networks actively developing games. In the Web3 ecosystem, games not only provide fun and enjoyment, but also offer new opportunities to earn profits through digital assets while playing. For this reason, the Web3 gaming market will inevitably continue to expand and thrive.

However, most platforms currently only provide basic overviews of games and do not fully leverage the potential to integrate decentralized assets like NFTs and tokens into the game economy. There is a growing need for players, investors, and gaming enthusiasts to visualize on-chain transactions and game performance to gain deeper insights. Yet, there are few platforms that deeply analyze the on-chain data driving in-game economies.

Recognizing this need, we set out to create a dashboard platform where users can easily view a variety of information and assets across Web3 games. This includes NFTs, in-game items, and on-chain data like the Total Value Locked (TVL) of game networks. The platform provides a comprehensive view of both on-chain and off-chain data, enabling users to better understand in-game economies and efficiently manage their assets and performance.

What it does

io.Side is a Web3 analytics platform, built with NEAR Protocol, designed for users to gain in-depth insights into decentralized apps, particularly in Web3 gaming. It aggregates cross-chain data, using NEAR’s chain abstraction to provide a seamless experience for managing assets across networks. Features include real-time game data, a Dapp explorer, and a caching system for efficient data retrieval. With a strong focus on security and privacy through NEAR’s Chain Signatures, io.Side enables gamers, developers, and investors to easily track performance, assets, and trends within the Web3 ecosystem.

How we built it

Frontend with Vite React and Tailwind CSS:

Vite React provides a fast development environment, crucial for handling and visualizing the real-time on-chain data needed for your dashboard. This setup allows developers to build responsive components that update quickly, offering a smooth user experience. Tailwind CSS is used for styling, offering a utility-first approach that speeds up styling and makes components highly customizable. Tailwind's responsive design utilities ensure that the dashboard looks and functions well on all device sizes, essential for cross-device compatibility in Web3 projects.

Data Storage with MongoDB:

MongoDB serves as the database, allowing you to store and query various types of on-chain data, including complex, unstructured data from multiple games. Its schema flexibility is especially useful for dynamically changing game and transaction data, allowing you to store and update real-time data as new gaming transactions are processed.

DappRadar API Integration:

The DappRadar API is central for fetching and managing data about games, collectibles, and tokens. It provides live data on in-game assets, player activity, and token transactions, ensuring that the dashboard remains current and actionable. By pulling in data on games, collectibles, and tokens, the dashboard not only serves as a gaming data hub but also supports interactions with other asset classes, enriching the user experience with a broader view of the Web3 gaming ecosystem.

Backend with Node.js:

The Node.js backend handles API requests and data processing, managing communication between the frontend and the DappRadar API, as well as MongoDB. This setup allows for efficient handling of data updates, user requests, and processing on-chain interactions in real-time.

Challenges we ran into

Time Zone Differences:

Coordinating across different time zones was a considerable hurdle. Our team members were based in different countries, making it difficult to find overlapping hours for real-time collaboration. Scheduling meetings often required flexibility, and the gaps in working hours sometimes led to delays in troubleshooting and decision-making. We tackled this by setting up clear workflows, leveraging project management tools, and defining asynchronous communication norms. By establishing a shared roadmap and clear documentation, we ensured progress continued smoothly despite limited direct collaboration time. However, time zone differences still posed obstacles, especially when immediate feedback or brainstorming was needed.

Limitations in API Data:

The DappRadar API provided valuable data on games, collectibles, and tokens, but its scope of information sometimes fell short for building a robust Web3 game visualization dashboard. Specifically, the API didn’t always offer the detailed on-chain activity or player engagement statistics we aimed to display for a richer user experience. This challenge led us to get creative with data augmentation. We explored supplementary data sources, integrated custom metrics, and devised ways to enhance the available information through calculated estimations and visual analytics. Despite these efforts, gaps in the API's data limited the depth of insights we could offer, requiring some adjustments to our original vision.

Accomplishments that we're proud of

Cross-Functional Team Collaboration Across Time Zones:

Despite time zone challenges, our team maintained effective communication and collaboration. We set up structured workflows, used asynchronous communication effectively, and adapted our schedules when necessary. This commitment to teamwork and flexibility allowed us to build a cohesive, functional product, even from different parts of the world.

Building a User-Friendly, Real-Time Visualization Interface:

Using Vite React and Tailwind CSS, we developed a fast, visually appealing, and responsive dashboard. Our interface provides users with an intuitive way to interact with on-chain data, showing game trends and player activities in real-time. The responsive design also makes it easy to use on various devices, allowing for a smooth, consistent user experience.

Innovative Use of the DappRadar API:

Even with some limitations in the DappRadar API data, we maximized its utility by combining it with custom metrics and calculations. This allowed us to fill in data gaps and deliver richer insights on game trends, collectibles, and token interactions. Our creative approach gave users a comprehensive view of Web3 gaming analytics, supporting our goal of enhancing the dashboard's depth and relevance.

Scalable Backend with Node.js and MongoDB:

We set up a strong backend infrastructure with Node.js and MongoDB, designed for efficient data handling and future scalability. Our solution can handle increased traffic and data volume as more games, tokens, and users come into play, providing a solid foundation for the dashboard’s continued growth and improvement.

What we learned

Effective Remote Collaboration Strategies:

Working across time zones taught us the importance of clear communication, structured workflows, and adaptability. We learned to set up asynchronous collaboration processes that minimized delays and kept us moving forward, despite limited overlapping hours. This experience strengthened our ability to work effectively as a remote team and manage time zone differences more smoothly.

Maximizing Limited API Data:

The limitations of the DappRadar API taught us to be resourceful with available data and creative with data augmentation. We learned to develop custom metrics and calculations to enhance the insights provided, allowing us to deliver a more informative experience for users. This experience gave us valuable skills in optimizing limited data sources for complex visualizations.

Implementing Caching for API Efficiency:

To prevent hitting API rate limits, we implemented caching for frequently accessed data. This caching strategy not only conserved API calls but also improved load times and responsiveness for users. This experience highlighted the importance of caching when working with external data sources and enabled us to build a more efficient and scalable system.

Building Scalable, Real-Time Systems:

Using Node.js and MongoDB, we learned to design a backend that could handle real-time updates while being scalable. Developing this backend taught us best practices for managing real-time data, on-chain interactions, and growth potential, which will be invaluable in future Web3 projects.

What's next for io.Side

In the future, we plan to add more complex game analysis features and personalized AI tools to offer users deeper and more tailored insights. Beyond in-game assets, we aim to expand integration with NFT marketplaces, providing a more comprehensive ecosystem where users can manage a wide range of assets both inside and outside of games. This platform will evolve into a comprehensive hub that delivers strategic insights and asset management convenience for Web3 gamers.