Dream11 is the world’s largest fantasy sports platform, with more than 120 million users. The app allows users to create fantasy teams based on real players and participate in virtual events.
In 2019, the app became a tech unicorn. Dream11 was the first Indian tech company that achieved this business goal.
To ensure further growth, Dream 11 needed to address some development and design issues. That's why, 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.
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 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.
Before developing components, we received mockup designs created in Figma and acceptance criteria for each element.
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:
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:
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.
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.
Need help with React or React Native? Let us know!