Forem: Dominic Hupp

Spontaneous Conversations - My Twilio Hackathon Project

Dominic Hupp — Fri, 01 May 2020 03:19:41 +0000

What I built

I built a website that can be used to spur spontaneous conversations between friends in order to simulate random conversations like the ones that may happen in the workplace or during school.

When conducting my initial research for what to do my project on, many people told me they missed interacting with people they wouldn't otherwise go out of their way to interact with. Because of this, I've created a web app that allows you to either directly call a specific friend or randomly call any of your online friends. As long as you have the tab open, it signals to others that you're willing to have a conversation with them and it's okay for them to call you (and you're then added to all of your friends' random lists)!

Here is the home page of the website, it's pretty basic, but I wanted to spend time on the functionality of the program to start, not the visuals.

This is the page that you get taken to when you first want to make an account. It registers you within Firebase Auth and then also gets your whole user profile formatted within Firebase Database.

This is a pretty basic sign-in screen. It's complete with a password reset and everything. But yeah!

This is what the main page of the web app looks like. You have your top bar, which is pretty standard across all of the pages on the website (besides the signup or sign-in pages). Then on the side, you have a bar with various options, such as initiating a random call, reloading the friend cards, or signing out.

Below that holds your user information and the friend invites. All that you need to know to send a friend request is their email, and then the backend takes care of everything else for you!

As you can see in the middle of the screen are both friend cards and friend request cards (yes, I got permission from the people shown to display their display names). The friend cards have the option to call that person or remove them from your friend group, whereas the friend request cards have accept or deny buttons on them.

The website also tracks online status, so the only friend cards that will appear when you log in or refresh will be your friends that have been on the website within the last 120 seconds, meaning the displayed information will constantly be up to date.

This is the video chat screen. Upon getting a call request, you're magically whisked away to this screen to be met with one other person. The room system is based on the REST API and is not ad-hoc, as well as being set to the P2P setting with only 2 members allowed in each room. This helps to provide a spontaneous and personal conversation that many felt they were lacking in their lives.

What Makes This Different?

Well, that's a great question. There are many platforms out there, such as Zoom, Google Hangouts, Discord, etc. However, all of those require users to complete multiple steps and send out links or remember usernames, as well as attempting to provide many features that the majority of the personal userbase may not utilize. I attempted to create a lightweight application that can be used by anyone without requiring any special knowledge while still developing something that is fun and meaningful to our everyday lives.

Category Submission:

Covid-19 Communications (Because like, being stuck at home can suck without friends)
Exciting X-Factors (cause like random video calls are random)
Interesting Integrations (Firebase API integration!)

Demo Link

Well, this demo would cost money both in a server and Twilio credits due to the cost per participant fee. So there may be some activity happening on https://vidchat.domhupp.space at some point, and I'll leave a notice in the commits or a post edit if that happens

Link to Code

Here's my GitHub! - https://github.com/Huppdo/TwilioHackathon

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Well, building this was quite a fun time. You see, I created this project within the 5 days (where I only worked on it for 4_ before the competition ended, and I also decided that I wanted to teach myself React in that time. So now, I've made my very first React app!

Besides that, this project utilizes:

React/Node.js for the frontend
Material-UI for the frontend
Python/Flask for the backend
Twilio for Video services
Google Firebase for user auth and storage

Twilio Hackathon - Final Day Pt2

Dominic Hupp — Thu, 30 Apr 2020 15:13:27 +0000

[Comment]: Well, the video API is now working. The only issue that I've run into is that Twilio/Chrome doesn't like me serving the video chat over http (since I'm running node on my machine and not my server for development).

What I built

An Omegle type product for first and second-degree friends in order to facilitate more spontaneous conversations

Category Submission:

Covid19 Communications

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Firebase Auth
Firebase DB
Twilio Video
React & Material UI
Python & Flask for Video API

Twilio Hackathon - Final Day Pt1

Dominic Hupp — Thu, 30 Apr 2020 13:13:29 +0000

[Comment]: Time to grind out some API and user state tracking this morning before I go take my midday break!

What I built

An Omegle type product for first and second-degree friends in order to facilitate more spontaneous conversations

Category Submission:

Covid19 Communications

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Firebase Auth
Firebase DB
Twilio Video
React & Material UI
Python & Flask for Video API

Twilio Hackathon - Day 3 Pt 3

Dominic Hupp — Wed, 29 Apr 2020 22:41:31 +0000

[Comment]: The video backend has been started, thanks to Twilio for their great guides on getting users connected and up and running!

What I built

An Omegle type product for first and second-degree friends in order to facilitate more spontaneous conversations

Category Submission:

Covid19 Communications

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Firebase Auth
Firebase DB
Twilio Video
React & Material UI
Python & Flask for Video API

Twilio Hackathon - Day 3 Pt 2

Dominic Hupp — Wed, 29 Apr 2020 16:27:15 +0000

[Comment]: I have now added user persistence (woo!), but in doing so, I've created a bug where after signing in, you have to hit sign in a second time to go to the main user page. Whelp

What I built

An Omegle type product for first and second-degree friends in order to facilitate more spontaneous conversations

Category Submission:

Covid19 Communications

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Firebase Auth
Firebase DB
Twilio Video
React & Material UI
Python & Flask for Video API

Twilio Hackathon - Day 3 Part 1

Dominic Hupp — Wed, 29 Apr 2020 13:39:11 +0000

[Comment]: I had to take yesterday off due to some college admissions stuff that I was dealing with! However, I have a plan for these next two days. The first step is going to be rewriting some of my main react components to work better for my application

What I built

An Omegle type product for first and second-degree friends in order to facilitate more spontaneous conversations

Category Submission:

Covid19 Communications

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Firebase Auth
Firebase DB
Twilio Video
React & Material UI
Python & Flask for Video API

Twilio Hackathon - Day 2 Pt2

Dominic Hupp — Mon, 27 Apr 2020 19:21:09 +0000

[Comment]: Woo! Friends are FINALLY showing up (I learned A LOT about React throughout my morning). It's almost time to begin implementing the video API and Python backend!

What I built

An Omegle type product for first and second-degree friends in order to facilitate more spontaneous conversations

Category Submission:

Covid19 Communications

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Firebase Auth
Firebase DB
Twilio Video
React & Material UI
Python & Flask for Video API

Twilio Hackathon - Day 2

Dominic Hupp — Mon, 27 Apr 2020 14:07:36 +0000

[Comment]: I'm still trying to come up with a good name for my project, but it is what it is. I got started on firebase auth last night and now I'm creating a system to add friends!

What I built

An Omegle type product for first and second-degree friends in order to facilitate more spontaneous conversations

Category Submission:

Covid19 Communications

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Firebase Auth
Firebase DB
Twilio Video
React & Material UI
Python & Flask for Video API

Day One Pt2 - Twilio Hackathon

Dominic Hupp — Sun, 26 Apr 2020 18:29:12 +0000

[Comment]: # I've just began my project!

What I built:

I'm going to create a video app that encourages spontaneous conversation between people within your friend group and second-degree friends

Category Submission:

COVID-19 Communications

Demo Link:

It's coming (eventually)

Link to Code:

See last post (the repo is still empty)

How I built it (what's the stack? did I run into issues or discover something new along the way?)

I'm currently cramming react into my brain so I can make an elegant looking UI! Besides that, it'll be a react frontend with a python backend using Twilio Video for P2P conversations

Day One - Twilio Hackathon

Dominic Hupp — Sun, 26 Apr 2020 15:19:33 +0000

[Comment]: Woo, hopping into the game late (aka starting today) but ready to grind out some hackathon code!

What I built:

Ya know, I'm not quite sure yet

Category Submission:

Either gonna go for the API category or the communication category

Demo Link:

None yet

Link to Code:

https://github.com/Huppdo/TwilioHackathon

How I built it (what's the stack? did I run into issues or discover something new along the way?)

I know I'm gonna be using some form of python with probably a web frontend. My IDEs of choice are any of the JetBrains ones, so I'll be using PyCharm Professional and WebStorm, hosted on an AWS RHEL EC2 instance

Forem: Dominic Hupp

Spontaneous Conversations - My Twilio Hackathon Project

What I built

What Makes This Different?

Category Submission:

Demo Link

Link to Code

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Links to the DEV progress stories

Twilio Hackathon - Final Day Pt2

What I built

Category Submission:

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Twilio Hackathon - Final Day Pt1

What I built

Category Submission:

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Twilio Hackathon - Day 3 Pt 3

What I built

Category Submission:

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Twilio Hackathon - Day 3 Pt 2

What I built

Category Submission:

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Twilio Hackathon - Day 3 Part 1

What I built

Category Submission:

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Twilio Hackathon - Day 2 Pt2

What I built

Category Submission:

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Twilio Hackathon - Day 2

What I built

Category Submission:

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Day One Pt2 - Twilio Hackathon

What I built:

Category Submission:

Demo Link:

Link to Code:

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Day One - Twilio Hackathon

What I built:

Category Submission:

Demo Link:

Link to Code:

How I built it (what's the stack? did I run into issues or discover something new along the way?)