project screenshot 1
project screenshot 2
project screenshot 3
project screenshot 4
project screenshot 5
project screenshot 6

💫Fanstar

Web3 social platform designed to facilitate direct connections between athletes and their supporters. The project aims to create a sustainable ecosystem that addresses funding challenges for athletes while providing fans with new ways to engage with sports.

💫Fanstar

Created At

ETHOnline 2024

Winner of

Chiliz - SportFi Projects 2nd place

Project Description

The world of professional sports often paints a picture of glamour and wealth. However, the reality for many athletes, including Olympians, is starkly different. A significant number earn less than $25,000 annually from their sport, forcing them to juggle part-time jobs or even turn to unconventional means like adult entertainment to fund their careers. This financial strain not only compromises their training and performance but also challenges the core values of sports.

Fanstar is a Web3 platform designed to address this pressing issue. By leveraging blockchain technology, Fanstar creates a direct connection between athletes and their supporters, offering a sustainable solution to the funding challenges faced by athletes while revolutionizing fan engagement.

At the heart of Fanstar are personalized athlete clubs. These digital hubs enable athletes to:

  • Share professional insights and behind-the-scenes content
  • Manage and monetize virtual events
  • Offer exclusive digital and physical merchandise

For fans, Fanstar opens up a world of unprecedented access:

  • Gain exclusive content and insights from favorite athletes
  • Support athletes directly through token-based club memberships
  • Participate in unique, athlete-led experiences
  • Collect and trade athlete-related digital assets

This innovative model yields benefits across the board:

  • Athletes gain financial freedom, allowing them to focus on their sport without distractions. They can monetize their expertise and build their personal brand directly with their fan base.
  • Fans receive unparalleled access to the world of professional sports. They gain valuable insights into professional training and can potentially profit from their support through token appreciation.
  • Sports as a whole benefit from a more engaged and invested fan base, potentially driving increased interest and participation across various disciplines.
  • The broader ecosystem gains a transparent, blockchain-based platform that could serve as a model for fair compensation and engagement in other industries.

By bridging the gap between athletes and fans, Fanstar aims to create a more sustainable and engaging sports ecosystem. It's not just about funding careers; it's about preserving the integrity of sports and fostering deeper connections between athletes and their supporters.

How it's Made

Technical Development Journey

As a solo developer, my journey in creating Fanstar has been a deep dive into modern web3 technologies, blending tools I'm familiar with and some others I saw and used first ever time. My approach prioritized rapid prototyping and functionality, laying a foundation for future refinement and scalability. The focus was mainly on proving ideological viability of concept rather than delivering production ready build.

Design Philosophy

Fanstar's design philosophy emerged from a practical need to make Web3 technologies accessible to sports fans who may not be familiar with blockchain. The goal was to create a platform that feels familiar to social media users while introducing them to the benefits of decentralized technologies.

The design started with a simple question: How can we make the management of tokenized athlete experiences and assets easy as liking a post? It`s clear we need to hide the complexities of wallet management and transactions, and the adoption of web3auth looked as a natural step. Users would then be able to sign up and interact with the platform using familiar social logins, with blockchain operations running seamlessly in the background.

Token-based interactions is another element at the core of Fanstar's user experience. Fan clubs are represented by NFTs, turning support for an athlete into a tangible, tradeable asset. This approach introduces users to digital ownership in a context they care about – their favorite sports and athletes.

The UI borrows elements from popular social platforms to create a sense of familiarity. However, it tries to gradually introduces Web3 concepts, allowing users to discover new functionalities at their own pace. The challenge was to strike a balance between simplicity for newcomers and depth for crypto-savvy users.

Fanstar's design is far from perfect and would definitely need to continuesly evolve based on user feedback and technological advancements. The ultimate aim is overall to create a user centric experiences regardless of selected set of tools.

Development Process and Challenges

I began my journey with the web3auth quickstart guide, which provided a solid foundation for blockchain authentication. This decision, while beneficial for rapid development, introduced me to unfamiliar territory. The shift from my usual JavaScript React to a TypeScript React environment with Vite presented a learning curve, influencing my implementation choices.

The application architecture is centered around a React context for web3auth interactions, enabling basic functionality across components. The Main.tsx file serves as primary container, housing essential elements like the header, sidebar, and main content areas.

The core of the dapp successfully interacts with two smart contracts:

  • FanClubFactory: Manages the creation and oversight of fan clubs
  • FanClub: Handles individual club functions, including pass minting

Current State and Acknowledged Areas for Improvement

While functional, the prototype reveals areas ripe for enhancement:

  • Data Management: The current reliance on a mix of contract-fetched, hardcoded, and localStorage data, while expedient for prototyping, lacks scalability and security for production environments.
  • Code Organization: The component management and overall structure would benefit from a more modular, maintainable approach.
  • Testing and Documentation: These crucial elements are notably sparse in the current implementation.
  • State Management: A more robust solution is needed to replace the current ad-hoc methods.

Looking Forward

Despite its current limitations, Fanstar, imho, stands as a solid proof of concept and a promising prototype of an actual project able to deliver scalable, maintainable, and robust experience.

background image mobile

Join the mailing list

Get the latest news and updates