Hackathon Team Builder: A Teams Tab Application

Published May 06 2022 12:55 PM 987 Views
Microsoft

This article provides guidance for how to build Hackathon Team Builder application for Microsoft Teams, which is open source and available on GitHub. The GitHub repo linked below provides a sample app that you can install and start using it to run a simple hackathon.

 

Team Builder app allows hackathon participants to form their own team based on challenges they want to tackle.

The participants can do the following from the app:

  • Create a hackathon team
  • Edit a hackathon team's description
  • Join a hackathon team
  • Leave a hackathon team
  • Lead a hackathon team

There is an optional GitHub integration for automatically creating a repository for teams. This optional feature follows an event-driven pattern you can learn more about in the linked articles below.

 

In this video, Phil Jirsa, Daniel Kim, Dave Upton, and I present a technical overview of our Hackathon Team Builder project.

 

 Architecture diagram

 

TeamBuilder Architecture - Basic.png

 

Additional Resources & Related Content

GitHub Repo - microsoft/hackathon-team-builder (github.com)

Teams Tool Kit - Teams Toolkit Overview - Teams | Microsoft Docs

Extending Your Application with Event Grid - Part 1 & Part 2

Auto-Regenerating API Client for Your Open API Project

%3CLINGO-SUB%20id%3D%22lingo-sub-3334437%22%20slang%3D%22en-US%22%3EHackathon%20Team%20Builder%3A%20A%20Teams%20Tab%20Application%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3334437%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EThis%20article%20provides%20guidance%20for%20how%20to%20build%20Hackathon%20Team%20Builder%20application%26nbsp%3Bfor%20Microsoft%20Teams%2C%20which%20is%20open%20source%20and%20available%20on%20GitHub.%26nbsp%3BThe%20GitHub%20repo%20linked%20below%20provides%20a%20sample%20app%20that%20you%20can%20install%20and%20start%20using%20it%20to%20run%20a%20simple%20hackathon.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ETeam%20Builder%20app%26nbsp%3Ballows%20hackathon%20participants%20to%20form%20their%20own%20team%20based%20on%20challenges%20they%20want%20to%20tackle.%3C%2FP%3E%0A%3CP%3EThe%20participants%20can%20do%20the%20following%20from%20the%20app%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CSPAN%3ECreate%20a%20hackathon%20team%20%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%3EEdit%20a%20hackathon%20team's%20description%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%3EJoin%20a%20hackathon%20team%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%3ELeave%20a%20hackathon%20team%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%3ELead%20a%20hackathon%20team%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3EThere%20is%20an%20optional%20GitHub%20integration%20for%20automatically%20creating%20a%20repository%20for%20teams.%20This%20optional%20feature%20follows%20an%20event-driven%20pattern%20you%20can%20learn%20more%20about%20in%20the%20linked%20articles%20below.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20this%20video%2C%20Phil%20Jirsa%2C%20Daniel%20Kim%2C%20Dave%20Upton%2C%20and%20I%20present%20a%20technical%20overview%20of%20our%20Hackathon%20Team%20Builder%20project.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3C%2FP%3E%3CDIV%20class%3D%22video-embed-center%20video-embed%22%3E%3CIFRAME%20class%3D%22embedly-embed%22%20src%3D%22https%3A%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Fsrc%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FFxOrBEk2nuM%253Ffeature%253Doembed%26amp%3Bdisplay_name%3DYouTube%26amp%3Burl%3Dhttps%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DFxOrBEk2nuM%26amp%3Bimage%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252FFxOrBEk2nuM%252Fhqdefault.jpg%26amp%3Bkey%3Db0d40caa4f094c68be7c29880b16f56e%26amp%3Btype%3Dtext%252Fhtml%26amp%3Bschema%3Dyoutube%22%20width%3D%22470%22%20height%3D%22264%22%20scrolling%3D%22no%22%20title%3D%22Hackathon%20Team%20Builder%20-%20MS%20Teams%20Tab%20App%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%22%20allowfullscreen%3D%22true%22%3E%3C%2FIFRAME%3E%3C%2FDIV%3E%3CP%3E%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--1378258408%22%20id%3D%22toc-hId--1378229646%22%3E%E2%80%83Architecture%20diagram%3C%2FH3%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22TeamBuilder%20Architecture%20-%20Basic.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F369905i4BDDB16AA4ADDB8F%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22TeamBuilder%20Architecture%20-%20Basic.png%22%20alt%3D%22TeamBuilder%20Architecture%20-%20Basic.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-1109254425%22%20id%3D%22toc-hId-1109283187%22%3EAdditional%20Resources%20%26amp%3B%20Related%20Content%3C%2FH3%3E%0A%3CP%3EGitHub%20Repo%20-%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fhackathon-team-builder%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Emicrosoft%2Fhackathon-team-builder%20(github.com)%3C%2FA%3E%3C%2FP%3E%0A%3CP%3ETeams%20Tool%20Kit%20-%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftoolkit%2Fteams-toolkit-fundamentals%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ETeams%20Toolkit%20Overview%20-%20Teams%20%7C%20Microsoft%20Docs%3C%2FA%3E%3C%2FP%3E%0A%3CP%3EExtending%20Your%20Application%20with%20Event%20Grid%20-%20%3CA%20title%3D%22Integrating%20Event%20Grid%20with%20GraphQL%20(Hot%20Chocolate)%20API%22%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fhealthcare-and-life-sciences%2Fintegrating-event-grid-with-graphql-hot-chocolate-api%2Fba-p%2F3107245%22%20target%3D%22_self%22%3EPart%201%3C%2FA%3E%20%26amp%3B%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fhealthcare-and-life-sciences%2Fextending-your-application-with-event-grid%2Fba-p%2F3302417%22%20target%3D%22_self%22%3EPart%202%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%3CA%20title%3D%22Auto-Regenerating%20API%20Client%20for%20Your%20Open%20API%20Project%22%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fhealthcare-and-life-sciences%2Fauto-regenerating-api-client-for-your-open-api-project%2Fba-p%2F3302390%22%20target%3D%22_self%22%3EAuto-Regenerating%20API%20Client%20for%20Your%20Open%20API%20Project%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-3334437%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Team%20Builder%20Overview%20Teaser.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F369904i6391E2E5EAEA942A%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Team%20Builder%20Overview%20Teaser.png%22%20alt%3D%22Team%20Builder%20Overview%20Teaser.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3ELearn%20how%20to%20automate%20building%20teams%20during%20a%20Virtual%20hackathon%20using%20sample%20app%20on%20GitHub.%20This%20article%20provides%20technical%20overview%20of%20our%20Hackathon%20Team%20Builder%20project%2C%20a%20Microsoft%20Teams%20tab%20application%20to%20be%20used%20by%20hackathon%20participants%20to%20find%2C%20join%2C%20and%20create%20teams.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3334437%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EHLS_Hack%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ETeams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Version history
Last update:
‎May 10 2022 05:00 AM
Updated by: