Building an NFT Platform onthe Flow Blockchain

Who is SportsIcon?

SportsIcon is an innovative startup founded by a group of die-hard sports fans who saw the potential of blockchain to build a one-of-a-kind and exciting marketplace for sports collectibles. They wanted to build a platform that allows athletes, teams, and creators to build profiles and mint their own NFTs on the Flow blockchain. SportsIcon's novel approach of connecting fans with their favourite teams and athletes sets it apart from the competition.

The site provides sports fans with a novel way to buy, sell, and trade digital memorabilia based on their favourite players, teams, and games. By working closely with the Dapper Labs team they had access to a large community of sports fans already. The goal of SportsIcon is to create a one-stop shop where sports fans can buy, sell, and trade all kinds of sports collectibles.

Roham Gharegozlou (founder of Dapperlabs, NBA Top Shot, and FLOW) and Andrew Masanto (co-creator of Hedera Hashgraph) are just two of the industry heavyweights who recognise the potential of the company's mission to bring Web3 and sports together. YouTube co-founder Chad Hurley and ARGO Blockchain developer Mike Edwards are other notable investors. Such a strong group of investors positions SportsIcon favourably for continued expansion and new product development in the sports memorabilia market.

How Antler got involved

Antler Digital played an instrumental role in the development of SportsIcon's marketplace for sports memorabilia collectors. With the beta backend systems already built on the Flow Blockchain, SportsIcon reached out to us to integrate a functional and beautiful marketplace to realise their product vision. Our role involved implementing functionality for both creators to add their NFTs and for customers to purchase and sell those they had bought. With our expertise in frontend development, UI/UX, we were able to provide a marketplace that was user friendly and most importantly, highly functional.

What has SportsIcon said about working with Antler Digital?

Alexi, CoFounder & COO

The SportsIcon platform is a testament to Antlers's ability to build modern, scalable web applications. Their attention to detail and commitment to excellence are evident in every aspect of the platform, from its design to its functionality. I would highly recommend them to anyone looking to build a cutting-edge digital solution. "

Riku, CTO

I was impressed by the way Antler approached the design and development of the Sports Icon platform. They took the time to understand our vision and built a solution that exceeded our expectations. They communicated efficiently and easily, we felt completely comfortable letting them improve on the design whilst developing the platform and they did a brilliant job. "

Project challenges

A design challenge

One of the primary challenges we faced in the SportsIcon project was the lack of time from the SportsIcon team to complete full comprehensive designs. The client had provided some basic designs and had a prototype of an MVP, but the team was left to infer the desired design and functionality from a limited set of guidelines. This presented a significant obstacle, as it required our team to not only understand the unique requirements of a sports NFT marketplace but also to anticipate the preferences and expectations of both the client and the end-users.

In our experience, clients often have a general idea of what they want to achieve or can provide examples of similar concepts. This has equipped our team at Antler Digital with the expertise to create exceptional designs from minimal information. In the case of SportsIcon, we took the limited design language provided by the client and updated it across wireframes to give a clear direction for the project. Our goal was to ensure that the final design would not only meet the client's expectations but also provide an intuitive and engaging experience for the end-users.

To facilitate an open and collaborative design process, we made these wireframes available on a shared Figma board, allowing the SportsIcon team to review our progress and provide feedback. This approach enabled us to maintain a transparent and efficient workflow, ensuring that the client's vision was accurately translated into a functional and visually appealing platform. Further we also had staging links available for review at all moments, that were updated 3/4 times a week with changes as the work progressed. This let the SportsIcon team get a hands on experience of their product at all stages of development. Thus by inferring the designs and working closely with the client, we were able to overcome the initial challenge and deliver a tailored solution that met the unique needs of the SportsIcon project.

Backend detective work

Another challenge that emerged during the development process was the incomplete and buggy backend API. This resulted in problematic connections between the frontend and backend systems, which in turn hindered the smooth functioning of the platform. The inconsistencies in the API made it difficult for our team to ensure that the user experience was seamless and that the platform's features were fully operational. This challenge demanded a thorough investigation and understanding of the backend system to identify and resolve the issues at hand.

The backend API provided by a previous agency to SportsIcon wasn’t functional, with poor documentation and numerous bugs that made it difficult to establish a reliable connection with the frontend. Our team at Antler Digital took on the challenge of understanding the backend API through a combination of trial and error and in-depth code reviews. By meticulously examining the code, we were able to identify the intended functionality and pinpoint the issues that were causing problems.

Although our primary responsibility was the frontend implementation, we recognised the importance of effective communication with SportsIcon's backend team to ensure a seamless integration. Despite not having direct experience with Flow smart contracts, we were able to convey our findings and recommendations to the backend team, enabling them to make the necessary changes. This collaborative approach significantly shortened the feedback cycle, saving SportsIcon valuable time and resources.

As a result of our thorough investigations, testing, and bug identification, the backend API was transformed into a much more reliable and usable system. The final product not only met the client's requirements but also provided a robust foundation for the SportsIcon platform to thrive. Our ability to adapt and problem-solve in the face of challenges demonstrates Antler Digital's commitment to delivering exceptional web development solutions for our clients.

Handling Dapper Wallet

Lastly, the integration of Dapper Wallet functionality posed a unique problem for the SportsIcon project. The wallet's authentication process did not allow for the required authentication details to be used for both customers and creators on the platform. This limitation complicated the process of enabling users to create profiles, mint NFTs, and interact with the marketplace as intended. Consequently, our team had to devise a solution that would allow for the seamless integration of Dapper Wallet while accommodating the platform's unique requirements for user-generated content.

The Flow blockchain connection offered two options for authenticating requests, but the wallet provided by Dapper only supported one type of authentication at a time. This limitation posed a significant challenge for creators who wanted to access the marketplace and perform actions other than creating content on the platform.

After extensive experimentation, our team devised a solution that automatically switched the user's authentication method when performing certain actions. This approach required users to confirm their intent through a modal, but it significantly simplified the process compared to displaying errors and asking them to sign in and out repeatedly.

Fortunately, just before the platform's launch, Dapper released an update to their wallet that allowed for simultaneous authentication parameters. This development enabled us to remove the previously implemented workaround and further enhance the user experience. The ability to quickly adapt to changes and provide seamless solutions is a testament to our skilled engineers and knowing the strengths and weaknesses of the technology stacks we work with.

What are the benefits SportsIcon found from our in house team?

Flexibility to adapt to changing requirements

Working as an in-house team with SportsIcon allowed Antler Digital the flexibility to adapt to changing requirements throughout the development process. This close collaboration ensured that we could make adjustments and pivot our approach as needed, without the delays that can often arise when working with external agencies. Our ability to quickly adapt to new information and challenges ensured that the project remained on track and met the evolving needs of SportsIcon's unique platform.

Immediate project start

By working as an in house team we were able to get started on the project immediately, rather than waiting for a lengthy pre-development cycle that would have led to further delays. This allowed us to dive right into the development process, quickly identifying and addressing any potential issues or roadblocks. The ability to start work immediately not only saved time but also allowed us to maintain momentum and focus on delivering a high-quality platform for SportsIcon.

Close collaboration with SportsIcon's CTO

Being on hand and working closely with SportsIcon's CTO allowed Antler Digital to resolve problems quickly and effectively. This close-knit relationship fostered open communication and facilitated rapid decision-making, enabling us to address any challenges that emerged during the development process. By working directly with the CTO, we were able to gain valuable insights into the project's requirements and goals, ensuring that our solutions were tailored to meet the specific needs of SportsIcon's platform.