Having experienced the difficulties that are associated with networking in a digital age, we sought to bring a fun, collaborative, and innovative way for communities, event organizers, and friends to connect with each other! Interactions at in-person coffee chats and networking events are often spontaneous and random, so we wanted to be able to deliver that experience and value with traffa. Our app eradicates the barriers associated with communication and relationship building during a period of social isolation; it provides a simple and accessible way for everyone to spark and foster meaningful connections.
traffa is a lightweight, innovative platform that allows speed coffee chats within a group, big or small! An organizer simply needs to host a traffa room and invite attendees to get the networking party started!
No one is required to create an account, bypassing the hassle of the sign-in process. On traffa's homepage, there are two options - you can either join a room by entering a room code, or host a room by clicking on the "Host" button. As soon as an organizer clicks "Host", they will be immediately brought to a host dashboard where they are able to see a room code, a participants list, and a form that allows the host to add questions they want to help spark conversation. The host can invite people to join their room by supplying them with the room code displayed on the top of their dashboard.
As people are joining, they will be prompted to create a username, and will then be redirected into a lobby. In the lobby, participants will be able to see a list of the other participants attending the event. Once the host sees that all participants have entered, and once they have added all the questions they would like to add, it is then time for them to click the "Start Networking" button. This will match users from within the group into 1-on-1 video chat sessions. In these video chats, participants will have access to a chat, timer, as well as customized prompts that the host created to help them to get to know each other a bit better.
Modern coffee chats usually require weeks of scheduling in advance, but traffa offers a convenient way for event organizers to get all their participants engaged in a matter of minutes!
On the front-end we built the UI/UX using Bootstrap and React.js. We created a web application using React JS for our front-end client and Node JS for our backend server. To integrate the video chat functionality, we used the Vonage video API. On the back-end we used Express.js, websockets, and node.js in order to communicate on a server between users.
On the front-end we challenged ourselves to develop responsive UI/UX in addition to implementing fundamental design principles! Furthermore, it was particularly challenging creating React components using the Vonage Video API that could respond in any situations. Despite being four developers, we wanted to make sure our web app was user-friendly to everyone! Furthermore, while first developing the concept, we really wanted to emphasize traffa's deceptive simplicity by streamlining the online networking experience.
On the back-end, this was our first time using websockets and it was definitely an interesting learning experience!
We are super proud of the seamless user experience that we built in addition to the back-end infrastructure! There are friendly welcome and loading screens to make the participants feel comfortable and excited, and the host dashboard offers a good level of customization.
We learned so much both about design and development! We had the opportunity to talk with many mentors who gave us advice about how to approach our project!
Note: icons are from Flaticon.com