Hi there ! Adrien and Julien from Paris here, we're happy to submit our very first Twitch Extension \o/ : it's called Nice Shot! and it's dedicated to Rocket League.

Inspiration

We believe that one of the key part of the Twitch experience is interaction. It's not your dad's TV after all; you, as a viewer, can talk with your favorite streamer and his/her entire audience at anytime using the chat.

"Nice shot!" comes from an iconic part of Rocket League online interactions : the (in)famous Quick Chat. Every day, all over the world, players interact with each other using some pre-defined messages. It became a key part of every game "meta" : people use it to praise a player, shame another one, or even make fun of themselves after a unexpected action... It quickly became a real "thing" between players.

We asked ourselves how could we bring this Rocket League "thing" in our average Twitch experience : after some quick experiments, it was clear that it was achievable with an Extension !

What it does

Your favorite Rocket League Quick Chat, now on Twitch with real-time game event sync, streamer customization and more! Wow!

FEATURES :

  • Rocket League Quick Chat Overlay !
  • Real-time messaging with all the viewers
  • In-game event synchronisation with Overwolf "Twitch Game Events" App.
  • Streamer customization (coming soon)

USAGE:

That's it! Whenever a team scores and when the game ends, every viewer will be able to share their feelings with all the audience thanks to the Quick Chat!

How we built it

The extension is built using Javascript and React to assemble our pages and deliver a solid web app. We use Next.JS, a solid React Framework, to make sure our extension use best-is-class web mechanics and standards.

We use the OverWolf client to capture in game events for an unmatched streaming experience! All the player data is sent to our backend via WebSocket, and we dispatch the information to the correct channel on Twitch.

On the backend side, we have a tiny server operating in the cloud, running our EBS. it should scale to a certain extend. If it has to, it will surely be exciting!

Challenges we ran into

Here are some challenging facts :

  • Capturing events from the game. How the hell were we supposed to do that?! Using the OverWolf client was one of our best decisions here. Their "Twitch Game Events" app is now a core components of our extension. Kudos to the OverWolf team, they were very welcoming and helpful.
  • Emulating the game mechanics so people get a feeling of the real Quick Chat. We spent some time to "reverse engineer" the behavior of the game : how long should the chat display ? how should we throttle users ?
  • Helping user getting started with our extension. How to make the onboarding a smooth process ? We finally put together a simple help center site at https://niceshot.gitbook.io/niceshot/

Accomplishments that we're proud of

We are proud of the product we made so far, even if we know their is (large) room for optimisation, new features and more. We were particularly proud of :

  • Using our favorite stack (React+NextJS, NodeJS for the EBS).
  • Learning how to use Twitch and OW APIs in a couple weeks.
  • Working really fast as a team of two.
  • Engaging with the dev community on the Twitch Developers Discord.

What we learned

Learning was the goal of all of this. We, as engineers, are eager to learn new and/or advanced things about computing and tech product crafting. First of all, we learned how to architecture a complete Twitch Extension. It was a complete mystery for us before we joined this Dev Jam. Adrien made his first steps into Art Direction by creating the extension color chart, logo and more.

We love productivity. We both are DevOps engineers and one of our daily missions is to find room for improvements in every workflows. There was no difference with this extension project : we continously asked ourselves how to use smart tools even better than before to work as a agile team of two full-stack developers. We used Trello for project planning, Github for code hosting/collaboration, Now.sh for easy static webpages deployment, GitBook for our Help Center...

We are now able to list every pre-defined Rocket League Quick Chat message by heart. Not our best learning here but meh, it's a funny side-effect.

What's next for NiceShot!

Conquer the world ! Err, no, but we have some cool ideas for the next couple months :

  • Engage with the community and start a strong feedback loop with our first users.
  • Make sure key Rocket League streamers / organizers enjoy using the extension with their audience.
  • Develop new features: internationalization, custom messages, monetization (maybe even before the end of the contest!) and more!

BONUS : we wrote some lines about how we did it with NextJS : https://dev.to/djiit/bootstrapping-a-twitch-extension-with-nextjs-3k7d

Built With

Share this project:
×

Updates