Website for streamers
Introduction
What is Tipply?
Tipply is a website dedicated to streamers, gamers, vloggers and other main characters of online live broadcasts who earn money by sharing videos on streaming websites. This is the first application in Poland to pay out donations with such a developed streamer panel and opportunities that increase the chances of earning money. Tipply's premiere took place in October 2019, but intensive work on the application began a few months earlier.
We took care of the programming part, constantly monitoring, operating and developing the platform. Initial interest and enthusiasm turned into a fully committed implementation of innovative yet functional solutions contributing to the development of the idea of streaming in Poland.
Planning and discovery
The challenge
We were faced with the task of creating a full functionality, and at the same time an intuitive and easy to use platform that would enable accepting and withdrawing funds accumulated during live streaming.
Until now, the payout websites available for streamers offered various possibilities, but there was no platform on the market that would combine all the needs and expectations of any real streamer. The mission of our Partners is to achieve maximum streamer satisfaction, and our task was to support this process from the programming part.
We have taken on the challenge of encoding a comprehensive application with numerous tools and functionalities, including bank deposits, SMS deposits and other popular payment methods or the ability to show personalized alerts and widgets during streaming.
Comprehensive
We conduct comprehensive actions: from coding to testing. This approach lets us create a complete websites with everything modern streamers need.
Personalized
The Tipply platform is constantly adapted to the expectations and current needs of streamers, who present their opinions in social media, among others.
Intuitive
Thanks to the solutions used, the user moves around the application freely. The intuitiveness of the website is influenced by a friendly interface, consistent graphic elements and clear navigation.
Results
Technologies, toolsand methodology
Voice messages
Let them hear you!
An additional convenience and interesting functionality for both viewers and streamers are voice messages - the user who pays a tip can record and send a voice message to the streamer.
Progressbar
Targeted fundraising
The control over the donations is improved bythe constantly updated bar with information about how much money has been raised and how much remains to be raised. After all, the ends justify the means - especially in the world of streaming!
525,00 zł / 3000,00 zł (18%)
We have created an innovative application useful for both the streamers themselves and their viewers.
There are more than 24 500 registered users in Tipply. So far, almost 400,000 tips have been paid.
On the back-end side we used PHP, Java and JavaScript (Node.js) to write specialized micro websites, each responsible for a specific function. These include, among others, communication with the bank's API, delegating information about tips in real time to widgets and signing documents with an electronic signature in the XAdES standard.
The above functionalities are used by the main application, in which we have included the entire business logic of the site. It also provides the REST API that client applications use, such as the user panel.
Using the Traefik tool that redirects incoming traffic to individual docker containers.
Website security with HTTPS encrypted protocol
Generating Let's Encrypt certificate
for each of the domains
The main application was created using the Symfony 4 framework and its components. The platform provides REST API, for which we used Symfony FOSRestBundle package. User data can be accessed using the OAuth2 standard. To present the objects returned by the API we use the JMS Serializer library, which gives us full control over how PHP objects will be converted to XML or JSON format. The API is carefully documented in the OpenAPI (Swagger) format. The documentation process is partially automated thanks to the NelmioApiDocBundle package, which is able to interpret the application source code. Based on this code, the package creates object definitions and allows to generate a page where the documentation is visually presented and which allows to test the API in sandbox mode.
During transmission, the streamer can use a widget to notify them of new tips received in real time.
There are situations where the streamer does not enable this view or there are so many tips that it would be impossible to display them all during a live broadcast. The information about the tip paid does not therefore go directly to the widget, but it stays in the queue thanks to RabbitMQ software, which guarantees that every tip will be displayed and the order in which the donations are displayed will be exactly the same as the order they were received. Each user has his own tip queuing system.
The task of the Event Sourcing architecture is to recreate, on the basis of events, the current state of the application, which works well in banking systems, among others. We used Event Sourcing to carry out the operations on the accounts, using a ready-made implementation - Prooph.
Maintaining quality and reliability of such a large system would not be possible without unit tests. They are written with a view to making the application work as intended. As the code grows and new functionalities are added, the task of unit tests is to warn the programmer and explain why a particular, previously written part stops working as expected. Well-written tests allow you to detect possible errors already at the code editor level to the repository. We use the PHPUnit framework to conduct tests in the back-end, and the Testing Library front-end, which allows us to constantly improve the architecture, eliminate possible errors and check whether individual components work as intended and expected.
When working on the website, we use GitLab CI/CD tool, thanks to which we have full control over the processes of software development, transferring the application to the test environment and providing the Partner with a properly working website. No branch is implemented without passing the previously mentioned unit tests, checking the accepted code organization rules and other automated tests.
Both the Tipply application (app.tipply.pl) and widgets (widgets.tipply.pl) are based on the React library. It is a universal and most popular Javascript library, thanks to which you can build any web application. The only limitation is the skills that our developers do not lack :) React is responsible for rendering the entire UI of the application. We used the styled-components library to create the react components. It allows you to write CSS code for components, focusing on a single use case. The library is designed to optimize and facilitate component styling. It makes it easier to manage and maintain such code. The components have unique classes, so they do not affect each other.
To support the management of the local state of the application, we used Redux, an auxiliary library responsible for managing the flow and storage of data throughout the site. Thanks to it we are able to store data and optimize its flow through the whole application. We also used several tools to extend the functionality of this library. These included redux-thunk (the tool was responsible for making asynchronous changes in the application state) and redux-logger (it facilitated development and debugging of this state). For routing we used the tried and tested React Router library.
An important point in creating this functional configurator was the use of WebSockets (Socket.IO) technology, thanks to which updating widgets works in real time - the streamer does not have to refresh the browser window to see changes. Tipping notifications are also received in real time via websockets. All views can be displayed by simply clicking the URL of the widget.
Streamers using Tipply can freely configure messages and customize their appearance to suit their preferences. They can edit and format text, select animations (Animate.css) for message input and output and effects while displaying text, change the background of the animation, and select any font from a database of nearly 1000 Google Fonts and unique Tipply fonts.
Another important convenience for streamers was the configuration of various payment methods, including bank transfers, payment cards, BLIK system, and Paysafecard, PayPal or SMS. Thanks to our actions, the Tipply application is the first platform of its kind in Poland to offer instant payouts.
In Tipply we have also introduced a Google speech synthesizer, which allows you to read aloud the text displayed on the screen. The synthesizer is available in both male and female versions.
The great challenge we had to face was to provide the user with the best possible user experience, designing the website in such a way that they did not have to watch the loading elements, but focused on freeing up their creativity by creating diverse templates, distinguishing their transmissions or personalising their account settings. We managed to do this by using the best and most modern technologies from the front-end world, which did not limit us in programming complicated application logic.
PRZEMYSŁAW Front-end developer
From the beginning, we knew that the application would develop dynamically, so we had to create the code to be open to adding new functionality without introducing chaos with every new change. The scale of the project forced us to reach as high as possible in the context of system architecture planning, as well as to use a full range of different back-end technologies.
EMIL Back-end developer
An intuitive user panel, editable templates for messages displayed to viewers and fast and secure payouts are just some of the features that characterize Tipply. To this day, we monitor and improve the platform on an ongoing basis, providing our Partners with a constant service. The application is the answer to the expectations of people developing an adventure in the world of streaming or those who are just taking their first steps in it. The virtual reality, where donations are one of the main sources of income, is supported by the Tipply application, which was created by the best front and back-end developers from our agency.
to be continued.
back to portfolio