PictoChat Rebrand

choose a name!
chat!
choose a color!
choose a room!

Inspiration

This project was heavily inspired by Pictochat, an old DS game where you can join chatrooms and send drawings to everyone.

What it does

The main features of this project are naming yourself, picking your brush color, joining a chatroom, and most importantly, sending drawings to everyone else in the chatroom.

How we built it

We heavily utilized flask, webscokets, react, and localstorage for this project. Localstorage was used to store userdata such as names and drawings on their device. We chose to use localstorage opposed to a database because we do not plan on storing user data for a long time. This app is meant to be something you can use to kill some time before leaving. It is not meant for long term use like discord, instagram, etc.

We used flask to handle new messages. Upon sending a message posts to our send-messages endpoint. When our api gets that request it parses the message the socket sends it back as a string to every single client.

Our websocket also handles user connects and disconnects. We chose to use sockets because they are event based. It would be incredibly inefficient to check for client connect/disconnects/messages on a timer. It would be both intensive for our api (getting multiple checking requests) and the use (sending multiple check requests).

React was extremely useful in our project. It is connected to both our socket and api in order to get and display data such as messages, how many people are online, and who sent what message.

With our front and back end working together, we were able to relive our memories of one of our favorite DS games.

Challenges we ran into

This project definitely didn't come easy. We ran into numerous challenges in both our front and backend. For our front end, we had to get comfortable with using react. Figuring out how to make components such as having different chat rooms, being able to choose the user's favorite color, making an interactive whiteboard and making each component flow into the other.

For our backend, the most challenging part was figuring out ways to make chat messages appear on everyone's screen. Our first approach was putting it on a timer with api requests, but it was far too slow and laggy. So, we turned to websockets and had to take time to understand and implement them in our project.

Accomplishments that we're proud of

We are extremely proud of getting messages to work seamlessly between all clients and the overall design of our app. Every single icon, box, button, etc was sprited by hand with aseprite. This project was immensely personal to each of us- we did not take any images from the internet.

We're also proud of planning out our app and breaking each step down into something manageable. The majority of us have never used react before and none of us have used websockets. Being able to research, learn, and grow together is something that we will never forget.