Ascend

Inspiration

Both of us have dabbled in competitive esports in the past. Tran was part of the varsity League of Legends team in college, and Ray was a competitive Masters player in Overwatch with regular team members. However, delving into esports, especially in a organized team, requires much more than simply playing the game. After all, half the battle when it comes to organized sports is the plan and strategy going into the game itself.

Having played for colegiate esports during undergrad, we noticed that there was a lot to be desired when it came to managing the teams, organizing other members, and communicating/finding new solutions. Things such as team schedules, champion pools, draft planning, and much more - these were all arranged and organized in such a haphazard and ununified fashion that was difficult to navigate. Usually, scrim results, meeting notes, and other data were all halfheartedly stitched together in a Google Spreadsheet. What this meant was that it required a lot of time to digest the data, not to mention the time it took to set up the spreadsheets, maintain it, and clean it on a regular basis. And the more time that was spent on this, meant less time actually playing the game and improving.

This was where the idea of Ascend was born.

The goal of Ascend was to get teams, both amateur and pro alike - a permanent, timesaving solution that would organize this data in an intuitive and easy to understand user interface, while displaying all of the data that they would need - so that they can focus more on playing the game, and winning.

Features

Right now, Ascend lets teams manage their schedule and players' League of Legends champion pool. In the near future, we want to add functionality to plan drafts, automate scrim result tracking with stats (CS/min, KDA, etc.), and analyze solo queue/scrim data for areas of improvement. We also want to sync schedules between teams (e.g. for scrim planning) and implement notifications for reminders and rescheduling. All of this is meant to save time and present only the most important data to help pinpoint potential areas of improvement and places to strategize on, so that the user is aware of what it will take to reach the next level.

How we built it

Ascend was built using Next.js (React) and Prisma with a PostgreSQL database. Our authentication is managed through the NextAuth.js library. Other open source frontend libraries (Mosaic Lite, Ant Design, and react-big-calendar) were crucial because they significantly cut down our development time.

The frontend communicates with our backend by using Axios to hit our REST API endpoints that perform create, read, update, and delete (CRUD) operations on the PostgreSQL database. The REST API was built using Next.js' serverless functions (Node.js) and Prisma (ORM).

The champion data was fetched from the Riot Games' API.

Challenges we ran into

• 🕔 Time management. As we needed to balance our full-time job with LiquidHacks, this made it very difficult to accomplish everything we initially hoped to during the hackathon. This included having tough conversations and deliberations on what to cut, such as our our initial plan to launch this for multiple games at once.
• 📍 Remote collaboration. Tran is based in New York whereas Ray is based in California. While we have worked on several projects in the past, this was our first time working completely in different time zones and remote. We could no longer discuss our problems over a whiteboard, or quickly look over at another's screen for help on a specific snippet of code. Finding alternative solutions with various tools, such as Discord, or Zoom with the control mouse feature, was definitely an integral part in making sure this project took off. Also, it meant that there was a need for increased communication, such as coordinating time zones and other issues that come with remote work.
• ⚙️ New tech stack. We wanted to challenge ourselves by learning a new tech stack. Although a good chunk of our hackathon time was spent reading documentation rather than pumping out features, it was ultimately, in our opinion, worth the effort as we learned how to utilize new tools that will help improve our products in the future.

Accomplishments that we're proud of

• 🎉 This was Ray's first hackathon! It was also his first time building a full-stack application, so we pair programmed all the way through.
• We worked really hard building a working full-stack application and thinking about ways to scale our platform, and we can't wait to release our platform for people to use.

What we learned

• 🛠 Next.js and Prisma. Next.js has gained immense popularity recently. This hackathon was a great opportunity to gain exposure to these technologies and build a full-stack application with them.
• 🤝 Teamwork makes the dream work. This experience strengthened our understanding of cross-discipline collaboration (Tran is a software engineer and Ray is a business analyst). It also served to highlight areas that we could both improve upon, and what skills (both soft and hard skills alike) are imperative no matter what job function you are in.

What's next for Ascend

Even though we didn't fully get to implement all of the features that we first set out to accomplish at the start of this hackathon, we're still really excited and optimistic about Ascend's future! We have a lot of plans in mind to scale up this program and make it accessible and useful for various audiences. Our ultimate goal, and one that we've constantly been striving for since the start, was creating a valuable tool that anyone, from any level of play, can effectively utilize (From amateur, to collegiate, and even to pro level). Here are some of the next steps that we've planned out, after our week of developing Ascend:

• 🔗 Ability to invite team members via email or unique URL. This will make it so it's easily accessible and user friendly for people to adopt, while providing a simple solution to join a team. We also want to potentially add in various sign in methods to make the transition as smooth as possible.
• 💻 Integration with other API's. One thing that we also want to include is integration with other useful API's that will allow for an improvement on our product, such as the ability to connect one's game account to the service.
• 🧪 Product testing. Initial beta testing for Ascend will be done with our alma mater's collegiate esports team, as we are familiar with the users and managers. By being able to get this candid feedback, it'll give us the opportunity to see where improvements should be made and iterate on the product. Eventually, we plan to use the connections from these teams to expand our testing to other campuses, and other various levels of play. Of course, our number one goal is to listen to real users who would use this product to understand where the pain points are and create something that they really need.
• 🌐 Deployment (production). Ray is currently preparing the marketing for a potential first release, after we are comfortable we have created a sufficient product that people will use, from our feedback. Once that's ready, we'll release a production version for the public to use.
• 💡 New features. There's a vast amount of data that can be gathered from solo queue, scrim games, and much more! Future features will use this information to provide teams with valuable insights that will help them improve.
• 🎮 Add support for other games. Of course, League of Legends isn't the only game that makes up the competitive esports scene! From the start, our goal has always been to provide this service for various games. After we feel we have a working formula for League of Legends, then we plan to move onto other games that could benefit from the service as well.

Built With

• next.js
• nextauth.js
• postgresql
• prisma
• react