kizuna

Home/Browse
Friends
Following
Watching a Stream
Start Stream (1)
Start Stream (2)
Stream Started Feedback
Personal Profile
Other User Profile

Inspiration

We wanted to use Livepeer's features to build a unique streaming experience for gaming content for both streamers and viewers.

Inspired by Twitch, we wanted to create a platform that increases exposure for small and upcoming creators and establish a more unified social ecosystem for viewers, allowing them both to connect and interact on a deeper level.

What is does

kizuna has aspirations to implement the following features:

Livestream and upload videos
View videos (both on a big screen and in a small mini-player for multitasking)
Interact with friends (on stream, in a private chat, or in public chat)
View activities of friends
Highlights smaller, local, and upcoming streamers

How we built it

Our web-application was built using React, utilizing React Router to navigate through webpages, and Livepeer's API to allow users to upload content and host livestreams on our videos. For background context, Livepeer describes themselves as a decentralized video infracstucture network.

The UI design was made entirely in Figma and was inspired by Twitch. However, as a result of a user research survey, changes to the chat and sidebar were made in order to facilitate a healthier user experience. New design features include a "Friends" page, introducing a social aspect that allows for users of the platform, both streamers and viewers, to interact with each other and build a more meaningful connection.

Challenges we ran into

We had barriers with the API key provided by Livepeer.studio. This put a halt to the development side of our project. However, we still managed to get our livestreams working and our videos uploading! Implementing the design portion from Figma to the application acted as a barrier as well. We hope to tweak the application in the future to be as accurate to the UX/UI as possible. Otherwise, working with Livepeer's API was a blast, and we cannot wait to continue to develop this project!

You can discover more about Livepeer's API here.

Accomplishments that we're proud of

Our group is proud of the persistance through the all the challenges that confronted us throughout the hackathon. From learning a whole new programming language, to staying awake no matter how tired, we are all proud of each other's dedication to creating a great project.

What we learned

Although we knew of each other before the hackathon, we all agreed that having teammates that you can collaborate with is a fundamental part to developing a project.

The developers (Josh and Kennedy) learned lot's about implementing API's and working with designers for the first time. For Josh, this was his first time implementing his practiced work from small projects in React. This was Kennedy's first hackathon, where she learned how to implement CSS.

The UX/UI designers (Dorothy and Brian) learned more about designing web-applications as opposed to the mobile-applications they are use to. Through this challenge, they were also able to learn more about Figma's design tools and functions.

What's next for kizuna

Our team maintains our intention to continue to fully develop this application to its full potential. Although all of us our still learning, we would like to accomplish the next steps in our application:

Completing the full UX/UI design on the development side, utilizing a CSS framework like Tailwind
Implementing Lens Protocol to create a unified social community in our application
Redesign some small aspects of each page
Implementing filters to categorize streamers, see who is streaming, and categorize genres of stream.

Built With

figma
livepeer
react

Submitted to

nwHacks 2023
- Winner Livepeer Best Overall Video Applications

Created by

I was the React front-end developer. I implemented Livepeer's API for streaming and uploading video to our website. This was my first time implementing my skills on React.js, and using an API in a web application. I worked closely with my designers and co-developer to provide what seems like the best design for our application.

Josh Nguyen
I was the UI/UX Designer alongside Brian. I first led the User Research for kizuna. I conducted user interviews and released a survey to find that many users wanted a platform to further connect with each other as well as a way to highlight smaller creators.
I worked alongside Brian to implement all user feedback into the overall UI design and hi-fi Figma prototype.

Dorothy Tung
I was the front-end developer responsible for the design of our application. It was my first time learning and using CSS where I was in charge of the implementation of the UX/UI from the designers.

Kennedy Yung
As the UX/UI Designer, I worked with Dorothy to conduct user research and competitive analysis of Twitch - the leading game streaming site. Our findings suggested that many Twitch users wanted a more social aspect on the site to further connect streamers or viewers as well as a way for smaller creators to break through the barriers of starting a channel. We implemented a social feature including a live friend page complimented with a sidebar for easy access as well as a "Discover Small Communities" section on the home page. Finally, developed high-fidelity wireframes and generated a working prototype available in our GitHub Repo.

brian yang