South African developers build web application to help local athletes

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title> South African developers build web application to help local athletes - Google Developers Blog </title> <meta property="og:title" content="South African developers build web application to help local athletes- Google Developers Blog" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="" /> <meta content="summary_large_image" name="twitter:card"/> <meta content="Google for Developers Blog - News about Web, Mobile, AI and Cloud" property="twitter:title"/> <meta property="og:title" content="South African developers build web application to help local athletes" /> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Google for Developers Blog", "item": "https://developers.googleblog.com/" },{ "@type": "ListItem", "position": 2, "name": "South African developers build web application to help local athletes", "item": "http://developers.googleblog.com/en/south-african-developers-build-web-application-to-help-local-athletes/" }] } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "South African developers build web application to help local athletes", "description": "None", "image": "https://storage.googleapis.com/gweb-developer-goog-blog-assets/images/Copy_of_Soweto_GDG_v3_tDZLdjl.2e16d0ba.fill-800x400.png", "datePublished": "2022-05-27", "author": [ ] } </script> <meta content="https://storage.googleapis.com/gweb-developer-goog-blog-assets/images/Copy_of_Soweto_GDG_v3_tDZLdjl.2e16d0ba.fill-1200x600.png" property="og:image"/>  <script type="text/javascript" src="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/js/analytics.js"></script>  <link href="//www.gstatic.com/glue/v27_1/glue.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/css/dgc_blog.css"> <link rel="icon" href="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/images/favicon.ico" type="image/x-icon"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" href="https://fonts.googleapis.com/css2?family=Product+Sans&family=Google+Sans+Display:ital@0;1&family=Google+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Google+Sans+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" as="style"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Product+Sans&family=Google+Sans+Display:ital@0;1&family=Google+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Google+Sans+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap"> <link href="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/css/blog_detail.css" /> <link rel="stylesheet" href="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/pygmentify/css/default.min.css"> </head> <body id="main-content" class="glue-body ">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WVTLDSL " height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <header class="dgc-header"> <div class="dgc-header-inner"> <button class="hamburger" aria-haspopup="true" aria-expanded="false" aria-label="Open Menu"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#menu"></use> </svg> </button> <div class="product-name-wrapper"> <a href="https://developers.google.com/" class="site-logo-link" data-label="Site logo"> <img src="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/images/g-dev.svg" class="site-logo" alt="Google for Developers"> </a> </div> <div class="desktop-nav-wrapper"> <div class="upper-tabs-wrapper"> <div class="upper-tabs"> <nav class="tabs" aria-label="Upper Tabs"> <div class="tab" dropdown> <a href="//developers.google.com/products" class="top-nav-title"> Products </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="true" aria-label="Dropdown menu for Products" class="dropdown-toggle"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#arrow-drop-down"></use> </svg> </a> <div class="tabs-dropdown" aria-label="Submenu"> <div class="tabs-dropdown-content"> <div class="tabs-dropdown-column"> <ul class="tabs-dropdown-section"> <li class="nav-title" aria-label="Develop Menu">Develop</li> <li class="nav-item"> <a href="//developer.android.com"> <div class="nav-item-title"> Android </div> </a> </li> <li class="nav-item"> <a href="//developer.chrome.com"> <div class="nav-item-title"> Chrome </div> </a> </li> <li class="nav-item"> <a href="//chromeos.dev/"> <div class="nav-item-title"> ChromeOS </div> </a> </li> <li class="nav-item"> <a href="//cloud.google.com"> <div class="nav-item-title"> Cloud </div> </a> </li> <li class="nav-item"> <a href="//firebase.google.com"> <div class="nav-item-title"> Firebase </div> </a> </li> <li class="nav-item"> <a href="//flutter.dev"> <div class="nav-item-title"> Flutter </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/assistant"> <div class="nav-item-title"> Google Assistant </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/maps"> <div class="nav-item-title"> Google Maps Platform </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/workspace"> <div class="nav-item-title"> Google Workspace </div> </a> </li> <li class="nav-item"> <a href="//www.tensorflow.org"> <div class="nav-item-title"> TensorFlow </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/youtube"> <div class="nav-item-title"> YouTube </div> </a> </li> </ul> </div> <div class="tabs-dropdown-column"> <ul class="tabs-dropdown-section"> <li class="nav-title" aria-label="Grow Menu">Grow</li> <li class="nav-item"> <a href="//firebase.google.com"> <div class="nav-item-title"> Firebase </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/google-ads"> <div class="nav-item-title"> Google Ads </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/analytics"> <div class="nav-item-title"> Google Analytics </div> </a> </li> <li class="nav-item"> <a href="//developer.android.com/distribute"> <div class="nav-item-title"> Google Play </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/search"> <div class="nav-item-title"> Search </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/web/fundamentals/engage-and-retain/push-notifications"> <div class="nav-item-title"> Web Push and Notification APIs </div> </a> </li> </ul> </div> <div class="tabs-dropdown-column"> <ul class="tabs-dropdown-section"> <li class="nav-title" aria-label="Earn Menu">Earn</li> <li class="nav-item"> <a href="//developers.google.com/admob"> <div class="nav-item-title"> AdMob </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/google-ads/api"> <div class="nav-item-title"> Google Ads API </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/pay"> <div class="nav-item-title"> Google Pay </div> </a> </li> <li class="nav-item"> <a href="//developer.android.com/google/play/billing/"> <div class="nav-item-title"> Google Play Billing </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/interactive-media-ads"> <div class="nav-item-title"> Interactive Media Ads </div> </a> </li> </ul> </div> </div> </div> </div> <div class="tab"> <a href="//developers.google.com/solutions/catalog" class="top-nav-title"> Solutions </a> </div> <div class="tab"> <a href="//developers.google.com/events" class="top-nav-title"> Events </a> </div> <div class="tab"> <a href="//developers.google.com/learn" class="top-nav-title"> Learn </a> </div> <div class="tab" dropdown> <a href="//developers.google.com/community" class="top-nav-title"> Community </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="true" aria-label="Dropdown menu for Community" class="dropdown-toggle"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#arrow-drop-down"></use> </svg> </a> <div class="tabs-dropdown" aria-label="Submenu"> <div class="tabs-dropdown-content"> <div class="tabs-dropdown-column"> <ul class="tabs-dropdown-section"> <li class="nav-title" aria-label="Groups Menu">Groups</li> <li class="nav-item"> <a href="//developers.google.com/community/gdg"> <div class="nav-item-title"> Google Developer Groups </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/community/gdsc"> <div class="nav-item-title"> Google Developer Student Clubs </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/womentechmakers"> <div class="nav-item-title"> Woman Techmakers </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/community/experts"> <div class="nav-item-title"> Google Developer Experts </div> </a> </li> <li class="nav-item"> <a href="//www.techequitycollective.com/"> <div class="nav-item-title"> Tech Equity Collective </div> </a> </li> </ul> </div> <div class="tabs-dropdown-column"> <ul class="tabs-dropdown-section"> <li class="nav-title" aria-label="Programs Menu">Programs</li> <li class="nav-item"> <a href="//developers.google.com/community/accelerators"> <div class="nav-item-title"> Accelerator </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/community/gdsc-solution-challenge"> <div class="nav-item-title"> Solution Challenge </div> </a> </li> <li class="nav-item"> <a href="//developers.google.com/community/devfest"> <div class="nav-item-title"> DevFest </div> </a> </li> </ul> </div> <div class="tabs-dropdown-column"> <ul class="tabs-dropdown-section"> <li class="nav-title" aria-label="Stories Menu">Stories</li> <li class="nav-item"> <a href="//developers.google.com/community/stories"> <div class="nav-item-title"> All Stories </div> </a> </li> </ul> </div> </div> </div> </div> <div class="tab"> <a href="//developers.google.com/profile/u/me" class="top-nav-title"> Developer Program </a> </div> <div class="tab"> <a href="//developers.googleblog.com/" class="top-nav-title"> Blog </a> </div> </nav> </div> </div> </div> </div> <div class="dgc-header-search"> <div class="search-wrapper glue-page"> <div class="glue-grid"> <form id="search-form" action="/en/search/" method="get" class="search-content glue-grid__col glue-grid__col--span-4-sm glue-grid__col--span-9-md glue-grid__col--span-7-lg"> <div class="search-input-wrapper"> <svg role="presentation" aria-hidden="true" class="glue-icon search-icon"> <use href="/glue-icon/#search"></use> </svg> <input type="text" name="query" placeholder="Search all articles..." aria-label="Search" class="search-input-field" /> </div> <button class="glue-button glue-button--high-emphasis"> Search </button> </form> <div class="language-selector glue-grid__col glue-grid__col--span-4-sm glue-grid__col--span-3-md glue-grid__col--span-5-lg" aria-label="Select your language preference"> <button type="button" aria-controls="lang-menu-header" aria-haspopup="true"> <svg role="presentation" aria-hidden="true" class="glue-icon lang-icon"> <use href="/glue-icon/#language"></use> </svg> <span class="lang-label">English</span> <svg role="presentation" aria-hidden="true" class="glue-icon lang-icon"> <use href="/glue-icon/#arrow-drop-down"></use> </svg> </button> <div id="lang-menu-header" class="lang-menu hidden" role="menu"> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" aria-current="true" href="/en/south-african-developers-build-web-application-to-help-local-athletes/">English</a> </li> <li role="presentation"> <a role="menuitem" lang="es" href="/es/south-african-developers-build-web-application-to-help-local-athletes/">Español (Latam)</a> </li> <li role="presentation"> <a role="menuitem" lang="id" href="/id/south-african-developers-build-web-application-to-help-local-athletes/">Bahasa Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" href="/ja/south-african-developers-build-web-application-to-help-local-athletes/">日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" href="/ko/south-african-developers-build-web-application-to-help-local-athletes/">한국어</a> </li> <li role="presentation"> <a role="menuitem" lang="pt-br" href="/pt-br/south-african-developers-build-web-application-to-help-local-athletes/">Português (Brasil)</a> </li> <li role="presentation"> <a role="menuitem" lang="zh-hans" href="/zh-hans/south-african-developers-build-web-application-to-help-local-athletes/">简体中文</a> </li> </ul> </div> </div> </div> </div> </div> </header> <div class="mobile-drawer" top-level-nav> <nav class="nav-content" aria-label="Side menu"> <div class="mobile-header"> <button class="nav-close-btn nav-btn" aria-label="Close navigation"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#close"></use> </svg> </button> <button class="nav-back-btn nav-btn hidden" aria-label="Back to Menu"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#arrow-back"></use> </svg> </button> <div class="product-name-wrapper"> <a href="https://developers.google.com/" class="site-logo-link" data-label="Site logo"> <img src="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/images/g-dev.svg" class="site-logo" alt="Google for Developers"> </a> </div> </div> <div class="nav-wrapper"> <div class="mobile-nav-top"> <ul class="nav-list"> <li class="nav-item"> <a href="//developers.google.com/products" class="nav-title" data-label="Tab: Products"> <span class="nav-text" tooltip=""> Products </span> </a> <ul class="nav-responsive-tabs"> <li class="nav-item"> <span tabindex="0" class="nav-title products-btn" data-label="More Products"> <span class="nav-text" menu="Products"> More </span> <span class="nav-icon" menu="Products"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#arrow-forward"></use> </svg> </span> </span> </li> </ul> </li> <li class="nav-item"> <a href="//developers.google.com/solutions/catalog" class="nav-title" data-label="Tab: Solutions"> <span class="nav-text" tooltip=""> Solutions </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/events" class="nav-title" data-label="Tab: Events"> <span class="nav-text" tooltip=""> Events </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/learn" class="nav-title" data-label="Tab: Learn"> <span class="nav-text" tooltip=""> Learn </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/community" class="nav-title" data-label="Tab: Community"> <span class="nav-text" tooltip=""> Community </span> </a> <ul class="nav-responsive-tabs"> <li class="nav-item"> <span tabindex="0" class="nav-title community-btn" data-label="More Community"> <span class="nav-text" menu="Community"> More </span> <span class="nav-icon" menu="Community"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#arrow-forward"></use> </svg> </span> </span> </li> </ul> </li> <li class="nav-item"> <a href="//developers.google.com/profile/u/me" class="nav-title" data-label="Tab: Developer Program"> <span class="nav-text" tooltip=""> Developer Program </span> </a> </li> <li class="nav-item"> <a href="//developers.googleblog.com/" class="nav-title" data-label="Tab: Blog"> <span class="nav-text" tooltip=""> Blog </span> </a> </li> </ul> </div> <div class="mobile-nav-bottom"> <ul class="nav-list products-submenu" menu="Products" aria-label="Side menu"> <li class="nav-item nav-heading"> <span class="nav-title"> <span class="nav-text"> Develop </span> </span> </li> <li class="nav-item"> <a href="//developer.android.com" class="nav-title"> <span class="nav-text"> Android </span> </a> </li> <li class="nav-item"> <a href="//developer.chrome.com" class="nav-title"> <span class="nav-text"> Chrome </span> </a> </li> <li class="nav-item"> <a href="//chromeos.dev/" class="nav-title"> <span class="nav-text"> ChromeOS </span> </a> </li> <li class="nav-item"> <a href="//cloud.google.com" class="nav-title"> <span class="nav-text"> Cloud </span> </a> </li> <li class="nav-item"> <a href="//firebase.google.com" class="nav-title"> <span class="nav-text"> Firebase </span> </a> </li> <li class="nav-item"> <a href="//flutter.dev" class="nav-title"> <span class="nav-text"> Flutter </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/assistant" class="nav-title"> <span class="nav-text"> Google Assistant </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/maps" class="nav-title"> <span class="nav-text"> Google Maps Platform </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/workspace" class="nav-title"> <span class="nav-text"> Google Workspace </span> </a> </li> <li class="nav-item"> <a href="//www.tensorflow.org" class="nav-title"> <span class="nav-text"> TensorFlow </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/youtube" class="nav-title"> <span class="nav-text"> YouTube </span> </a> </li> <li class="nav-item nav-heading"> <span class="nav-title"> <span class="nav-text"> Grow </span> </span> </li> <li class="nav-item"> <a href="//firebase.google.com" class="nav-title"> <span class="nav-text"> Firebase </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/google-ads" class="nav-title"> <span class="nav-text"> Google Ads </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/analytics" class="nav-title"> <span class="nav-text"> Google Analytics </span> </a> </li> <li class="nav-item"> <a href="//developer.android.com/distribute" class="nav-title"> <span class="nav-text"> Google Play </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/search" class="nav-title"> <span class="nav-text"> Search </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/web/fundamentals/engage-and-retain/push-notifications" class="nav-title"> <span class="nav-text"> Web Push and Notification APIs </span> </a> </li> <li class="nav-item nav-heading"> <span class="nav-title"> <span class="nav-text"> Earn </span> </span> </li> <li class="nav-item"> <a href="//developers.google.com/admob" class="nav-title"> <span class="nav-text"> AdMob </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/google-ads/api" class="nav-title"> <span class="nav-text"> Google Ads API </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/pay" class="nav-title"> <span class="nav-text"> Google Pay </span> </a> </li> <li class="nav-item"> <a href="//developer.android.com/google/play/billing/" class="nav-title"> <span class="nav-text"> Google Play Billing </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/interactive-media-ads" class="nav-title"> <span class="nav-text"> Interactive Media Ads </span> </a> </li> </ul> <ul class="nav-list community-submenu hidden" menu="Community" aria-label="Side menu"> <li class="nav-item nav-heading"> <span class="nav-title"> <span class="nav-text"> Groups </span> </span> </li> <li class="nav-item"> <a href="//developers.google.com/community/gdg" class="nav-title"> <span class="nav-text"> Google Developer Groups </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/community/gdsc" class="nav-title"> <span class="nav-text"> Google Developer Student Clubs </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/womentechmakers" class="nav-title"> <span class="nav-text"> Woman Techmakers </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/community/experts" class="nav-title"> <span class="nav-text"> Google Developer Experts </span> </a> </li> <li class="nav-item"> <a href="//www.techequitycollective.com/" class="nav-title"> <span class="nav-text"> Tech Equity Collective </span> </a> </li> <li class="nav-item nav-heading"> <span class="nav-title"> <span class="nav-text"> Programs </span> </span> </li> <li class="nav-item"> <a href="//developers.google.com/community/accelerators" class="nav-title"> <span class="nav-text"> Accelerator </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/community/gdsc-solution-challenge" class="nav-title"> <span class="nav-text"> Solution Challenge </span> </a> </li> <li class="nav-item"> <a href="//developers.google.com/community/devfest" class="nav-title"> <span class="nav-text"> DevFest </span> </a> </li> <li class="nav-item nav-heading"> <span class="nav-title"> <span class="nav-text"> Stories </span> </span> </li> <li class="nav-item"> <a href="//developers.google.com/community/stories" class="nav-title" aria-label="All Stories"> <span class="nav-text"> All Stories </span> </a> </li> </ul> </div> </div> </nav> <select aria-label="Change language" name="lang-selector" id="lang-selector-nav" class="glue-form__dropdown glue-mobile-nav__lang-dropdown" onchange="window.location.href=this.value" > <option value="/en/south-african-developers-build-web-application-to-help-local-athletes/" lang="en" selected > English </option> <option value="/es/south-african-developers-build-web-application-to-help-local-athletes/" lang="es" > Español (Latam) </option> <option value="/id/south-african-developers-build-web-application-to-help-local-athletes/" lang="id" > Bahasa Indonesia </option> <option value="/ja/south-african-developers-build-web-application-to-help-local-athletes/" lang="ja" > 日本語 </option> <option value="/ko/south-african-developers-build-web-application-to-help-local-athletes/" lang="ko" > 한국어 </option> <option value="/pt-br/south-african-developers-build-web-application-to-help-local-athletes/" lang="pt-br" > Português (Brasil) </option> <option value="/zh-hans/south-african-developers-build-web-application-to-help-local-athletes/" lang="zh-hans" > 简体中文 </option> </select> </div> <div class="backdrop"></div> <div class="blog-detail-container"> <section class="heading-container glue-page glue-spacer-5-top"> <h1 class="glue-headline glue-headline--headline-1">South African developers build web application to help local athletes</h1> </section> <section class="summary-container glue-page glue-spacer-4-top"> <div class="date-time"> <div class="published-date glue-font-weight-medium">MAY 27, 2022</div> </div> </section> <section class="glue-page glue-grid glue-spacer-1-top"> <section class="author-container glue-grid__col glue-grid__col--span-4-sm glue-grid__col--span-10-md"> </section> <section class="social-container glue-grid__col glue-grid__col--span-4-sm glue-grid__col--span-2-md"> <button id="social-button" class="glue-button glue-button--low-emphasis glue-button--icon" aria-haspopup="true" aria-expanded="false"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#share"></use> </svg> <span>Share</span> </button> <ul id="social-menu" class="glue-elevation-level-1" role="menu" aria-labelledby="social-button"> <li> <a href="https://www.facebook.com/sharer/sharer.php?u={url}" title="Share on Facebook" target="_blank" rel="noopener"> <svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--social glue-icon--32px"> <use href="/glue-icon/#post-facebook"></use> </svg> <span>Facebook</span> </a> </li> <li> <a href="https://twitter.com/intent/tweet?text={url}" title="Share on Twitter" target="_blank" rel="noopener"> <svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--social glue-icon--32px"> <use href="/glue-icon/#twitter-x"></use> </svg> <span>Twitter</span> </a> </li> <li> <a href="https://www.linkedin.com/shareArticle?url={url}&mini=true" title="Share on LinkedIn" target="_blank" rel="noopener"> <svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--social glue-icon--32px"> <use href="/glue-icon/#post-linkedin"></use> </svg> <span>LinkedIn</span> </a> </li> <li> <a href="mailto:name@example.com?subject=Check%20out%20this%20site&body=Check%20out%20{url}" title="Send via Email"> <svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--social glue-icon--32px"> <use href="/glue-icon/#email"></use> </svg> <span>Mail</span> </a> </li> <li> <a href="#" title="Get shareable link" data-link="" data-copy-text="Copy Link" data-copied-text="Copied!"> <svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--social glue-icon--32px"> <use href="/glue-icon/#link"></use> </svg> <span></span> </a> </li> </ul> </section> </section> <meta name="twitter:image" content="https://storage.googleapis.com/gweb-developer-goog-blog-assets/images_archive/original_images/Copy_of_Soweto_GDG_v3.png"> <img style="display:none" src="https://storage.googleapis.com/gweb-developer-goog-blog-assets/images_archive/original_images/Copy_of_Soweto_GDG_v3.png"> <p><em>Posted by Aniedi Udo-Obong, Sub-Saharan Africa Regional Lead, Google Developer Groups </em><p> <a name='more'></a><p></p> <p> Lesego Ndlovu and Simon Mokgotlhoa have stayed friends since they were eight years old, trading GameBoy cartridges and playing soccer. They live three houses away from each other in Soweto, the biggest township in South Africa, with over one million residents. The two friends have always been fascinated by technology, and by the time the duo attended university, they wanted to start a business together that would also help their community. </p> <center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgETHX3t9w-GCJcOhSOOpGIYgWmTaggmmDrS7Y6udiRvWvvNeGuABEEke4m1FVDugrGJpQZHgC9tqz5TPK-cuShbr3KE6_KXCJ8l4i5dikVMT2AM_bairhJSADgpOkMAfuFGc5bJWYaewgky31EM1LhKx0p2YDsaBF3O6FSa1mES9S1q_Z0Mynf82Mq/s1600/image3.jpg" imageanchor="1" ><img style=width:500px alt="Lesego Ndlovu and Simon Mokgotlhoa sitting at a desk on their computers" id=imgFull border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgETHX3t9w-GCJcOhSOOpGIYgWmTaggmmDrS7Y6udiRvWvvNeGuABEEke4m1FVDugrGJpQZHgC9tqz5TPK-cuShbr3KE6_KXCJ8l4i5dikVMT2AM_bairhJSADgpOkMAfuFGc5bJWYaewgky31EM1LhKx0p2YDsaBF3O6FSa1mES9S1q_Z0Mynf82Mq/s1600/image3.jpg" data-original-width="1058" data-original-height="714" /></a></center> <p> After teaching themselves to code and attending <strong><a href="https://goo.gle/GDG">Google Developer Groups</a> </strong>(GDG) events in Johannesburg, they built a prototype and launched a chapter of their own (<a href="https://gdg.community.dev/gdg-soweto/">GDG Soweto</a>) to teach other new developers how to code and build technology careers. </p> <p> <strong>Building an app to help their community</strong> </p> <p> Lesego and Simon wanted to build an application that would help the talented soccer players in their community get discovered and recruited by professional soccer teams. To do that, they had to learn to code. </p> <center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5m6cm_m6uuzoc0FwtNdkutX9eYQOSbp2YdBc16EaW7TSuThoe-glJKizm6CcYOXO7WhXX3sr4Rbc5DiCpiCdndqBH9hd6uWqZNwkRKLuwiIHTaRLuTrP1LhTA9jEpkY8P7-XtLidbJZVuI2O3xeC57dHUw6_UnFTiwS7auAE50wOe1E3F_Cs-f0W/s1600/image1.png" imageanchor="1" ><img style=width:250px alt="Lesego Ndlovu and Simon Mokgotlhoa holding their phones towards the screen showcasing the Ball Talent app" id=imgFull border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5m6cm_m6uuzoc0FwtNdkutX9eYQOSbp2YdBc16EaW7TSuThoe-glJKizm6CcYOXO7WhXX3sr4Rbc5DiCpiCdndqBH9hd6uWqZNwkRKLuwiIHTaRLuTrP1LhTA9jEpkY8P7-XtLidbJZVuI2O3xeC57dHUw6_UnFTiwS7auAE50wOe1E3F_Cs-f0W/s1600/image1.png" data-original-width="1058" data-original-height="714" /></a></center> <p> “We always played soccer, and we saw talented players not get discovered, so, given our interest in sports and passion for technology, we wanted to make something that could change that narrative,” Lesego says. “We watched videos on the Chrome Developers YouTube channel and learned HTML, CSS, and JavaScript, but we didn’t know how to make an app, deliver a product, or start a business. Our tech journey became a business journey. We learned about the code as the business grew. It’s been a great journey.” </p> <p> After many all-nighters learning frontend development using HTML, CSS, and JavaScript, and working on their project, they built <a href="https://balltalent.co.za/">BallTalent</a>, a <a href="https://web.dev/progressive-web-apps/">Progressive Web App</a> (PWA), that helps local soccer players in their neighborhood get discovered by professional soccer clubs. They record games in their neighborhood and upload them to the app, so clubs can identify new talent. </p> <p> “We tested our prototype with people, and it seemed like they really loved it, which pushed us to keep coding and improving on the project,” says Simon. “The application is currently focused on soccer, but it’s built it in a way that it can focus on other sports.” </p> <p> In 2019, when BallTalent launched, the project placed in the top 5 of one of South Africa’s most prestigious competitions, Diageo Social Tech Startup Challenge. BallTalent has helped local soccer players match with professional teams, benefiting the community. Simon and Lesego plan to release version two soon, with a goal of expanding to other sports. </p> <p> <strong>Learning to code with web technologies and resources </strong> </p> <p> Lesego and Simon chose to watch the <a href="https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw">Chrome Developers YouTube channel</a> to learn to code, because it was free, accessible, and taught programming in ways that were easy to understand. Preferring to continue to use free Google tools because of their availability and ease of use, Lesego and Simon used <a href="https://developer.chrome.com/docs/devtools/">Google developer tools</a> on Chrome to build and test the BallTalent app, which is hosted on Google Cloud Platform. </p> <center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9zCRvaPMg36L1jfmiGydnOl1VYvwzwk5_YAcN7S1HoyvnEqRt4Tj5CDoNJaA2c7acBbW7Hd_ySU0L7qIwAY30GMwl4yB1Cr39bizBBa85jMOQ9cAqqNlV3Gu_ONGhaDVo7NM49rZB9g04Sv6JKwLVGRB0tBctN9vuSj136swhktxCmr8amFTqfGMJ/s1600/image4.png" imageanchor="1" ><img style=width:450px alt="BallTalent Shows Youth Talent to the Worlds Best Scouts and Clubs" id=imgFull border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9zCRvaPMg36L1jfmiGydnOl1VYvwzwk5_YAcN7S1HoyvnEqRt4Tj5CDoNJaA2c7acBbW7Hd_ySU0L7qIwAY30GMwl4yB1Cr39bizBBa85jMOQ9cAqqNlV3Gu_ONGhaDVo7NM49rZB9g04Sv6JKwLVGRB0tBctN9vuSj136swhktxCmr8amFTqfGMJ/s1600/image4.png" data-original-width="1058" data-original-height="714" /></a></center> <p> They used NodeJS as their backend runtime environment to stay within the Google ecosystem–NodeJS is powered by the V8 JavaScript engine, which is developed by the Chromium Project. They used a service worker codelab from Google to allow users to install the BallTalent PWA and see partial content, even without an internet connection. </p> <p> We are focused on HTML, CSS, JavaScript, frontend frameworks like Angular, and Cloud tools like Firebase, to be able to equip people with the knowledge of how to set up an application,” says Simon. </p> <center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH6aiJ8dOMIllzkOebgkhBRNsnSEIis6bCix90xMi1J04oV1Z-3CC2P7grt0uFsRQgCrPrf0JQQBZYOwzu_iGvLkC8i3BP8-Cyl_vKD2ndMt_9sIl14mBQ6NCeT5mdgyaeCxyGO5KeiIwsHUFApneiCx0t4xxcF9BAE4gzZ9KzzJM1HIFm-76EDlfl/s1600/ezgif.com-gif-maker%20%2825%29.gif" imageanchor="1" ><img style=width:450px alt="Moving gif of soccer players playing on a soccer field" id=imgFull border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH6aiJ8dOMIllzkOebgkhBRNsnSEIis6bCix90xMi1J04oV1Z-3CC2P7grt0uFsRQgCrPrf0JQQBZYOwzu_iGvLkC8i3BP8-Cyl_vKD2ndMt_9sIl14mBQ6NCeT5mdgyaeCxyGO5KeiIwsHUFApneiCx0t4xxcF9BAE4gzZ9KzzJM1HIFm-76EDlfl/s1600/ezgif.com-gif-maker%20%2825%29.gif" data-original-width="1058" data-original-height="714" /></a></center> <center><p id="imgCaption">BallTalent shares sample footage of a previous match: Mangaung United Vs Bizana Pondo Chiefs, during the ABC Motsepe Play Offs</p></center> <p> “Google has been with us the whole way,” says Simon. </p> <p> <strong>Contributing to the Google Developer community</strong> </p> <p> Because of their enthusiasm for web technologies and positive experience learning to code using Google tools, Lesego and Simon were enthusiastic about joining a Google Developer Community. They became regular members at GDG Johannesburg and went to DevFest South Africa in 2018, where they got inspired to start their own GDG chapter in Soweto. The chapter focuses on frontend development to meet the needs of a largely beginner developer membership and has grown to 500+ members. </p> <p> <strong>Looking forward to continued growth</strong> </p> The duo is now preparing to launch the second version of their BallTalent app, which gives back to their community by pairing local soccer talent with professional teams seeking players. In addition, they’re teaching new developers in their township how to build their own apps, building community and creating opportunities for new developers. <a href="https://developers.google.com/community/gdg">Google Developer Groups</a> are local community groups for developers interested in learning new skills, teaching others, and connecting with other developers. We encourage you to <a href="https://gdg.community.dev/">join us</a>, and if you’re interested in becoming a <a href="https://developers.google.com/community/gdg/organizers">GDG organizer</a> like Simon and Lesego, we encourage you to <a href="https://gdg.advocu.com/">apply</a>. <section class="navigation-container glue-page glue-spacer-6-top"> <div class="posted-in-section"> <div class="posted-in-section__heading"> <span class="glue-caption"> posted in: </span> </div> <div class="posted-in-section__tags"> <ul> <li> <a href="/en/search/?tag=Soweto" class="glue-caption">Soweto</a> </li> <li> <a href="/en/search/?tag=South Africa" class="glue-caption">South Africa</a> </li> <li> <a href="/en/search/?tag=Tech for good" class="glue-caption">Tech for good</a> </li> <li> <a href="/en/search/?tag=GDG" class="glue-caption">GDG</a> </li> <li> <a href="/en/search/?tag=Google Devs" class="glue-caption">Google Devs</a> </li> <li> <a href="/en/search/?tag=Google" class="glue-caption">Google</a> </li> <li> <a href="/en/search/?tag=community" class="glue-caption">community</a> </li> <li> <a href="/en/search/?tag=google developers" class="glue-caption">google developers</a> </li> <li> <a href="/en/search/?tag=Google Cloud Platform" class="glue-caption">Google Cloud Platform</a> </li> <li> <a href="/en/search/?tag=developers" class="glue-caption">developers</a> </li> <li> <a href="/en/search/?tag=Get Inspired" class="glue-caption">Get Inspired</a> </li> <li> <a href="/en/search/?tag=Google Developer Groups" class="glue-caption">Google Developer Groups</a> </li> </ul> </div> </div> <div class="buttons-section"> <div class="buttons-section__left"> <a href="/en/expertsanyoneanywhere/" class="glue-button--icon glue-elevation-level-1 " aria-label="Previous"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#chevron-left"></use> </svg> </a> <span class="caption ">Previous</span> </div> <div class="buttons-section__right"> <span class="caption ">Next</span> <a href="/en/google-workplace-gde-alice-keeler-on-balancing-responsibilities-and-using-coding-as-self-care/" class="glue-button--icon glue-elevation-level-1 " aria-label="Next"> <svg role="presentation" aria-hidden="true" class="glue-icon"> <use href="/glue-icon/#chevron-right"></use> </svg> </a> </div> </div> </section> </div> <div class="footer-linkboxes__wrapper"> <nav class="footer-linkboxes" aria-label="Footer links"> <ul class="footer-linkboxes__list"> <li class="footer-linkbox"> <span class="footer-linkbox-heading"> Connect </span> <ul class="footer-linkbox-list"> <li class="footer-linkbox-list__item"> <a href="//googledevelopers.blogspot.com" class="footer-linkbox-list__link"> Blog </a> </li> <li class="footer-linkbox-list__item"> <a href="https://goo.gle/googlefordevs" class="footer-linkbox-list__link"> Instagram </a> </li> <li class="footer-linkbox-list__item"> <a href="https://goo.gle/gdevs-li" class="footer-linkbox-list__link"> LinkedIn </a> </li> <li class="footer-linkbox-list__item"> <a href="https://goo.gle/gdevs-tw" class="footer-linkbox-list__link"> Twitter </a> </li> <li class="footer-linkbox-list__item"> <a href="https://goo.gle/developers" class="footer-linkbox-list__link"> YouTube </a> </li> </ul> </li> <li class="footer-linkbox"> <span class="footer-linkbox-heading"> Programs </span> <ul class="footer-linkbox-list"> <li class="footer-linkbox-list__item"> <a href="//www.womentechmakers.com" class="footer-linkbox-list__link"> Women Techmakers </a> </li> <li class="footer-linkbox-list__item"> <a href="//developers.google.com/community/gdg" class="footer-linkbox-list__link"> Google Developer Groups </a> </li> <li class="footer-linkbox-list__item"> <a href="//developers.google.com/community/experts" class="footer-linkbox-list__link"> Google Developer Experts </a> </li> <li class="footer-linkbox-list__item"> <a href="//developers.google.com/community/accelerators" class="footer-linkbox-list__link"> Accelerators </a> </li> <li class="footer-linkbox-list__item"> <a href="//developers.google.com/community/gdsc" class="footer-linkbox-list__link"> Google Developer Student Clubs </a> </li> </ul> </li> <li class="footer-linkbox"> <span class="footer-linkbox-heading"> Developer consoles </span> <ul class="footer-linkbox-list"> <li class="footer-linkbox-list__item"> <a href="//console.developers.google.com" class="footer-linkbox-list__link"> Google API Console </a> </li> <li class="footer-linkbox-list__item"> <a href="//console.cloud.google.com" class="footer-linkbox-list__link"> Google Cloud Platform Console </a> </li> <li class="footer-linkbox-list__item"> <a href="//play.google.com/apps/publish" class="footer-linkbox-list__link"> Google Play Console </a> </li> <li class="footer-linkbox-list__item"> <a href="//console.firebase.google.com" class="footer-linkbox-list__link"> Firebase Console </a> </li> <li class="footer-linkbox-list__item"> <a href="//console.actions.google.com" class="footer-linkbox-list__link"> Actions on Google Console </a> </li> <li class="footer-linkbox-list__item"> <a href="//cast.google.com/publish" class="footer-linkbox-list__link"> Cast SDK Developer Console </a> </li> <li class="footer-linkbox-list__item"> <a href="//chrome.google.com/webstore/developer/dashboard" class="footer-linkbox-list__link"> Chrome Web Store Dashboard </a> </li> </ul> </li> </ul> </nav> </div> <div class="footer-utility__wrapper"> <div> <nav class="footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="site-logo-link" data-label="Site logo"> <img src="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/images/g-dev.svg" class="site-logo" alt="Google for Developers"> </a> <ul class="footer-sites-list"> <li class="footer-sites-item"> <a href="//developer.android.com" class="footer-sites-link"> Android </a> </li> <li class="footer-sites-item"> <a href="//developer.chrome.com/home" class="footer-sites-link"> Chrome </a> </li> <li class="footer-sites-item"> <a href="//firebase.google.com" class="footer-sites-link"> Firebase </a> </li> <li class="footer-sites-item"> <a href="//cloud.google.com" class="footer-sites-link"> Google Cloud Platform </a> </li> <li class="footer-sites-item"> <a href="//developers.google.com/products" class="footer-sites-link"> All products </a> </li> <li class="footer-sites-item"> <button aria-hidden="true" class="glue-cookie-notification-bar-control footer-sites-link"> Manage cookies </button> </li> </ul> </nav> <nav class="footer-utility-links"> <ul class="footer-utility-list"> <li class="footer-utility-item"> <a href="//developers.google.com/terms/site-terms" class="footer-utility-link"> Terms </a> </li> <li class="footer-utility-item"> <a href="//policies.google.com/privacy" class="footer-utility-link"> Privacy </a> </li> </ul> <div class="language-selector footer" aria-label="Select your language preference"> <button type="button" aria-controls="lang-selector-footer" aria-haspopup="true"> <svg role="presentation" aria-hidden="true" class="glue-icon lang-icon"> <use href="/glue-icon/#language"></use> </svg> <span class="lang-label">English</span> <svg role="presentation" aria-hidden="true" class="glue-icon lang-icon"> <use href="/glue-icon/#arrow-drop-down"></use> </svg> </button> <div id="lang-selector-footer" class="lang-menu hidden" role="menu"> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" aria-current="true" href="/en/south-african-developers-build-web-application-to-help-local-athletes/">English</a> </li> <li role="presentation"> <a role="menuitem" lang="es" href="/es/south-african-developers-build-web-application-to-help-local-athletes/">Español (Latam)</a> </li> <li role="presentation"> <a role="menuitem" lang="id" href="/id/south-african-developers-build-web-application-to-help-local-athletes/">Bahasa Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" href="/ja/south-african-developers-build-web-application-to-help-local-athletes/">日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" href="/ko/south-african-developers-build-web-application-to-help-local-athletes/">한국어</a> </li> <li role="presentation"> <a role="menuitem" lang="pt-br" href="/pt-br/south-african-developers-build-web-application-to-help-local-athletes/">Português (Brasil)</a> </li> <li role="presentation"> <a role="menuitem" lang="zh-hans" href="/zh-hans/south-african-developers-build-web-application-to-help-local-athletes/">简体中文</a> </li> </ul> </div> </div> </nav> </div> </div> <script src="https://www.youtube.com/player_api"></script> <script src="//www.gstatic.com/glue/v27_1/glue.min.js"></script> <script type="text/javascript" src="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/js/dgc_blog.js"></script> <script src="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.js" data-glue-cookie-notification-bar-category="2A" data-glue-cookie-notification-bar-site-id="developers.googleblog.com"> </script> <script src="https://storage.googleapis.com/gweb-developer-goog-blog-cms-assets/f677f1b8-8552-4a23-83cc-57c36dbaf782/js/blog_detail.js"></script> </body> </html>

CINXE.COM

South African developers build web application to help local athletes - Google Developers Blog