## 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](https://livepeer.org/).

## 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.
## Inspiration

Living in the big city, we're often conflicted between the desire to get more involved in our communities, with the effort to minimize the bombardment of information we encounter on a daily basis. NoteThisBoard aims to bring the user closer to a happy medium by allowing them to maximize their insights in a glance. This application enables the user to take a photo of a noticeboard filled with posters, and, after specifying their preferences, select the events that are predicted to be of highest relevance to them.

## What it does

Our application uses computer vision and natural language processing to filter any notice board information in delivering pertinent and relevant information to our users based on selected preferences. This mobile application lets users to first choose different categories that they are interested in knowing about and can then either take or upload photos which are processed using Google Cloud APIs. The labels generated from the APIs are compared with chosen user preferences to display only applicable postings.

## How we built it

The the mobile application is made in a React Native environment with a Firebase backend. The first screen collects the categories specified by the user and are written to Firebase once the user advances. Then, they are prompted to either upload or capture a photo of a notice board. The photo is processed using the Google Cloud Vision Text Detection to obtain blocks of text to be further labelled appropriately with the Google Natural Language Processing API. The categories this returns are compared to user preferences, and matches are returned to the user.

## Challenges we ran into

One of the earlier challenges encountered was a proper parsing of the fullTextAnnotation retrieved from Google Vision. We found that two posters who's text were aligned, despite being contrasting colours, were mistaken as being part of the same paragraph. The json object had many subfields which from the terminal took a while to make sense of in order to parse it properly.
We further encountered troubles retrieving data back from Firebase as we switch from the first to second screens in React Native, finding the proper method of first making the comparison of categories to labels prior to the final component being rendered. Finally, some discrepancies in loading these Google APIs in a React Native environment, as opposed to Python, limited access to certain technologies, such as ImageAnnotation.

## Accomplishments that we're proud of

We feel accomplished in having been able to use RESTful APIs with React Native for the first time. We kept energy high and incorporated two levels of intelligent processing of data, in addition to smoothly integrating the various environments, yielding a smooth experience for the user.

## What we learned

We were at most familiar with ReactJS- all other technologies were new experiences for us. Most notably were the opportunities to learn about how to use Google Cloud APIs and what it entails to develop a RESTful API. Integrating Firebase with React Native exposed the nuances between them as we passed user data between them. Non-relational database design was also a shift in perspective, and finally, deploying the app with a custom domain name taught us more about DNS protocols.

## What's next for notethisboard

Included in the fullTextAnnotation object returned by the Google Vision API were bounding boxes at various levels of granularity. The natural next step for us would be to enhance the performance and user experience of our application by annotating the images for the user manually, utilizing other Google Cloud API services to obtain background colour, enabling us to further distinguish posters on the notice board to return more reliable results. The app can also be extended to identifying logos and timings within a poster, again catering to the filters selected by the user. On another front, this app could be extended to preference-based information detection from a broader source of visual input.
## Inspiration

Everyone in this team has previously been to post-secondary and noticed that their large group of friends have been slowly dwindling since graduation, especially after COVID. It's already well known that once you leave school it's a lot harder to make friends, so we got this idea to make FriendFinder to match you with people with similar hobbies in the same neighbourhood as you.

## What it does

**Find friends!**

When making an account on FriendFinder, you will be asked to input your hobbies, whether you prefer chatting or hanging out, whether you enjoy outdoor activities or not, and your neighbourhood. It then gives other users a relative score based on your profile, with more matching hobbies and preferences having a higher score. Now when ever you log in, the front page will show you a list of people near you with the highest score, allowing you to send them friend requests to start a chat.

## How we built it

**With friends!**

We used HTML, CSS, and Javascript for the frontend and Firebase and Firestore for the backend.

## Challenges we ran into

**Our friends...**

Just kidding. One of the biggest challenges we faced was the short amount of time (24 hours) of this hackathon. Being first year students, we made a project of similar scale in school but over 4 months! Another challenge was that none of us knew how to implement a real time chat app into our project. At first we wanted to learn a new language React and make the chat app beautiful, but due to time constraints, we researched a simpler way to do it just to give it base functionality.

## Accomplishments that we're proud of

**Our friendship survived!**

After the initial scramble to figure out what we were doing, we managed to get a minimum viable product in 24 hours. We are really proud that we incorporated our knowledge from school and learned something new and integrated it together without any major issues.

## What we learned

**Make good friends**

The most important thing we learned is that team work is one of the most important things needed for a good development team. Being able to communicate with your team and dividing work up by each team member's strengths is what made it possible to finish this project within the strict time limit. The hackathon was a really fun experience and we're really glad that we could form a team together.

## What's next for FriendFinder

**More features to find more friends better**

* beautify the app
* add friend / pending friend requests feature
* security/encryption of messages
* report user function
* more detailed hobby selection list for better matching
* update user's profile / hobby selection list at any time
* let users add photos
* group chat function
* rewrite sections of code to become more efficient