SportLink

SportLink Logo
Shaq SportLink
John Cena SportLink
Vin Diesel SportLink

Inspiration

We chose to do the entertainment track and wanted to create a website that fit with the theme of in-person events after quarantine. We decided on pickup basketball because it is something that allows people to get active and connect in-person with others who enjoy playing the sport.

What it does

The website allows users to join existing games in their area as well as create their own. Each of these games has various info, including location, skill level, and current attendance that help people find the games they are interested in. The website is currently a prototype and while we do not have a back-end, the website displays how SportLink would function and how the user could interact with it. We plan to add a back-end in the future to make the website fulfill its goals.

How we built it

We used JavaScript, React, Leaflet, geolocation API, SoftVC VITS Singing Voice Conversion AI, HTML, and CSS to create the website. When building the website, we started off with the join a game section and host a game section. The join a game section was made with React and the host a game section was made using Leaflet. Throughout making the website, we started off each section by creating the HTML and JavaScript, and then focused on the CSS after everything was finished. We used the so-vits-svc AI to create celebrity endorsements for our website and the geolocation API to determine what area the user is located in.

Challenges we ran into

One immediate challenge that we ran into was having to move forward with a team of two opposed to a team of three, as our third teammate got sick. We had originally planned to split the work among three people and because of this we had to split it among two instead. This meant that we had to work at a faster pace and each take on more work than originally expected.

We also had difficulty tailoring the Leaflet library to our project goals. After reading through the Leaflet documentation and developing a plan, we were able to successfully integrate the Leaflet interactive map. Another challenge was getting the information that was entered when hosting a game to appear in the list of nearby games, while also maintaining the same format as the existing games in the list. We found that using ChatGPT to help us debug and find mistakes in our code helped speed up this process and allowed us to develop our solution in a more timely manner.

Working with the mentors was also really helpful in getting more insight on the technologies that we were using and helped us to overcome the additional challenges that we had.

Accomplishments that we're proud of

We were able to create every element of the website that we had planned too plus more. We also used technologies that we didn't have much previous experience with and were able to create something that we think is cool.

What we learned

We improved our HTML and CSS skills while also using several JavaScript libraries. React and Leaflet were both libraries that we didn't have a lot of experience with so it was cool being able to get more familiar with them. We also sharpened our ability to prioritize different tasks and complete them in the order that is most efficient and relevant to the final product.

What's next for SportLink

We want to add a back-end so that the website will be fully functional for people to use. Some other features that we think would be essential is having an account system, dedicated text channels for each event, and the ability to filter by various criteria when searching for events.