REGISTER

Dream11

Building a custom UI component library for Dream11

No items found.

INTRODUCTION

Introduction

Dream11 is the world’s largest fantasy sports platform. It has more than 120 million users. The app allows users to create fantasy teams based on real players and participate in virtual events. 

We were asked to build a custom UI component library. The library contains elements, such as buttons or search bars that can be used across the app. A custom library makes further development more cost and time-efficient. 

We worked with the in-house team and based the development on our React Native Paper library. The React Native Paper is a high-quality, standard-compliant Material Design library for Android and iOS.

We received guidelines from the Dream11 team and developed the components Dream11 will need in the future.  

CHALLENGE

The benefits of the UI component library

The rapid growth of an app can be both a blessing and a curse. Companies experiencing such growth need to address technical and business challenges efficiently. 

Dream11 faced this problem – the company has been steadily gaining market share and attracting new users. As a result, the company had to expand the app while maintaining a superb user experience and developing new screens quickly. 

We proposed a solution that tackles both challenges – a custom UI component library. 

The business benefits of a custom UI library include:

  • a seamless user experience as the components look and behave consistently across the app,
  • decreased development time by having a repository of ready-to-use components, and
  • reduced development and maintenance costs by reusing components within the web app. 

A custom UI library also solves a whole set of technological challenges. Since React Native is a cross-platform framework, so you can develop a single codebase to build applications on Android and iOS devices. 

Cross-platform app development allows not only for faster development time of your component library. It also makes optimization for access more accessible and more efficient. Developing components for users with visual, hearing, and mobility impairments. 

Developing a custom library can also save the time you need to write and maintain documentation. To reduce the amount of work you have to do as maintainers, you can automate documentation generation and write detailed comments for specific props to make it understandable. 

If you want to learn more about publishing a React Native component library, our React Native expert, Satyajit Sahoo, got you covered. Check out his article.

APPROACH

Delivering the library

Before developing components, we received mockup designs created in Figma and acceptance criteria for each element

an image showing custom UI library components

Using the Figma models and acceptance criteria, we refined the tasks. The Dream11 team was available to dispel any doubts. 

We divided the project into four parts:

  • Setup,
  • Design foundations, 
  • Development of the components, and
  • Testing
an image showing custom UI library components

First, we set up a fork based on the React Native Paper library.

To automate the integration of the code written by two of our React Native developers, we set up continuous integration. The code was always up to date regardless of who was working on the project. 

Finally, we set up a Storybook to test the components. 

In the second part, we developed the basis of the design – color, layout, and typography. 

Once we had the basics down, we started working on the UI library components. 

The components we developed included:

  • AppBar,
  • TextField.
  • Button,
  • Icon Button,
  • Toast, which included animation and swipe-to-dismiss,
  • Match Status,
  • Search, and
  • many more!
an image showing custom UI library components

After development, we performed unit, integration, and accessibility tests and ran the storybook stories for every component. 

We presented finished components during demo sessions to Dream11’s key stakeholders. During the meetings, we received feedback and implemented it later on. But, because we got comprehensive explanation and acceptance criteria initially, most components were accepted on the first try. 

OUTCOME & BENEFITS

Time and cost-efficient solution for future development

As a result of our partnership, Dream11 now has a UI component library tailored to their needs. The in-house team can develop the app faster, thus reducing the costs of building new screens. Moreover, the users can enjoy an improved user experience as buttons, and other components behave consistently across the app.

contact

Let's work together!

Need help with React or React Native? Let us know!

I hereby agree for sending me by Callstack.io Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.