React Native App development for a sports startup from New York City

Reasons behind the development of new application

This year our software development company had the pleasure of working on app development with a sports startup from the east coast of the USA. During our collaboration, we’ve created an MVP application dedicated to iOS - the target user group were high school students that are playing the most popular team sports. The founder of the company, who’s a rugby coach, decided to improve the organization of training and matches, as well as the management of school teams. 

The functionalities of the app include:

• organization of matches, training, and other team events,
• tracking of the statistics - both of the teams and individual players,
• gathering all of the communication within the team (as well as with the trainer) to one channel,
• introduction of players from the entire league.

Creative process of app development

Top developers from Merixstudio joined the project after the creation of the design. The work started with an in-depth study of the project - thanks to that after a few sessions we were sure that we fully understand both the client’s needs and their ideas, and were able to start the initial estimation. After confirming the approximate budget of the project, we organised a kick-off and got to work.

The work, which was based on the Scrum methodology, was carried out in the time span of five months and was divided into the main two stages. As part of the first three-month run, we conducted several two-week sprints with all the scrum ceremonies. It allowed us to provide the MVP version and make the application available to the first group of users. In the next two months, after learning the lessons from the first users’ usage of the MVP, we provided the remaining key functionalities.

Outsourcing work to a different time zone

Successful implementation wouldn’t be possible without the close partnership between both teams. Luckily, the significant time difference didn’t spoil the effective collaboration. Working in different time zones was even beneficial when it comes to working in sprints! While working, our team could gather up the questions we’ve had, which we would send to our client at the end of the day. Then they’ve had a whole day to answer them, work on the product without any haste, and, if necessary, test the implemented functionalities. The feedback they’ve gathered was then waiting for us first thing in the morning.

Tools used in the app development

During the development, we used a lot of different tools - Slack for everyday communication and JIRA for tasks management. Google Meet turned out to be perfect for joint planning, reviewing, and any quick meetings. When it comes to web design, as usual Invision proved to be a popular tool for a reason. We’ve also worked with the indispensable Github, without which no software project can be created. For development and quality assurance, we’ve used Fabric - Crashlytics and Fastlane.

Main features of the application

The developed app consists of two main components - Connect and Create. The first one allows users to connect with people they share a team/group with - users can send instant messages and have group conversations with other users. The second component, on the other hand, enables sharing information with a network and create a group or event.

Image: Groups/event creator view 

Functionalities within the group

The app distinguishes its users between PLAYERS and COACHES. Both have the ability to create three types of groups (team, school, and community) and three types of events (match, practice, and social). Each team consists of users that can send messages and notifications to each other, which allow for the use of text, photos, and videos. Users are also able to invite teammates to join the app or schedule practices, matches, and social events. The created app also displays if any other users have looked at their team profile page.

Image: Sign in views - choosing the type account of sport genre

Both groups and individual users can upload or modify their profile photos with the use of the edit function. When groups are set up, creators are be prompted to upload a photo. The only type of account that’s unable to do so are coaches, who have fixed profile icons.

Statistics of matches and individual users

Stats can be entered with the use of “completed match event” screens which show up at event’s page after it’s finished. Stats for games and players can only be entered by creators and admins and include the information on the players (for instance how many goals they scored) and the match result. User stats are read-only but if they appear incorrect, any user can tap X REPORT STAT to alert administrator for review.

Types of groups

The Groups Overview, which is shown on the screen below, displays groups that an individual user belongs to. Those groups are listed depending on how recent the user accessed them. With that, the group that was entered most recently will always be at the top of the list.

Image: View of group&indyvidual profiles

Adding and managing events

Each event within the app can be accessed through the schedule on user/group profiles or via the internal search engine. Practice and social events have the same style (which differs from matches) and each event includes sending/asking for RSVP, attendance list, and location info (based on Google Maps).

Image: Sending an RSVP for the event

In addition to that, matches also display final scores and players/teams stats. There are three states of a Match event:

• upcoming match - state before the start happens,
• past match (without stats) - a match is completed but doesn’t have stats,
• past match (with stats) - a match is completed and has the stats entered.

Scheduling an event

Schedule accessed from the players’ profiles show events from all groups they are part of. When browsing through the profile of other people, individual users will be able to only see the matches they are part of. The only exception here is for the members of the same group – in this case, all crossover events will be visible.

Dev stack of the project

To develop the app, we've decided to use these solutions:

The combination of React Native and Django turned out to be the perfect mix for our project and will be used in the plethora of other endeavors. In addition to that, among the Front-End technologies we used were trusty JavaScript, Redux, and WebSocket, while Back-end was covered by Python and Django Rest framework. 

Lean startup approach and Scrum were a great basis for working with our clients, which resulted in supporting for the sports community in the USA and enriching the startup scene in New York. And that's what cooperation with software house should be about - making a difference while creating great products!