Design

Frontend

Our app supports four primary functionality, including login, post, chat, and a SURPRISING PAINT. Each functionality is implemented with some dedicated user interface and interaction. Below is a screenshot for each screen.

Login

Just like any other apps in the world, our app starts with login activitiy. It integrates with the firebase authentication as the backend and supports email as username and any password. The user first should click the "Register" button to register an account. After the toast "Register Succeed", he/she could then click the "Login" button to login.

Post

After clicking "Post" on the main page, the user should jump to the post screen. Post screen will read posts data stored in the firebase database and add two posts to the screen every few seconds. Each post is clickable, which will jump to the next screen with more info like text, and users are able to like by clicking the "LIKE" button and save by clicking the "Star" button. All saved posts can be retrieved from the "FAVORITEPOSTS" button at the post screen, and where a list of favorite posts is shown. Lastly, the user could also search posts with tag and/or user by clicking the "Search" icon. A more detailed grammar is shown in the search section.

Chat

Similarly, the user could click "Message" on the main screen and jump to chat functionality. The chat screen will read all users registered in the firebase datastore and display them in the list. The user could click one of the users and instantly starts a chat. Chats are read in real-time.

Paint

Our project builds a surprising paint for friends functionality. After clicking the "Paint" button on the main screen, the user will jump to a paint palette. Here, the user could paint with different colors, stroke widths, and undo and erase lines they do not want. After clicking the circle, the image you just painted will be uploaded to our secret backend server at ccyy.xyz for doodle recognition using a deep learning model. The prediction results will pair with the users who have a similar drawing and redirect you to chat with that person. This is an absolute opportunity for you to find new friends with the same interests.

Backend

Our secret backend is implemented using GoLang. It has three major functions.

1. Receiving and sending users' drawings.
2. Maintaining a connection for users to ask for who has a similar painting and return the matched users.
3. Recognizing users drawing for matching.

The first requirement can be implemented using a simple HTTP multipart protocol for image sending and receiving. In contrast, the second part is quite tricky because when the user sends an image for recognition, the server may not find any matched images from other users to pair. So it has to maintain a long connection until the server returns a paired user. Hence, we choose to use WebSocket to realize this long connection.

To fulfill the third requirement, we trained a MobileNet doodle recognition network based on Google quickdraw dataset. It can classify doodles into 345 categories. The current accuracy of our model is not high, only reaches 61%. This is due to our private server's relatively low computing capability (ccyy.xyz), which only has 1 CPU core and 2 GB ram. It is infeasible to run large models other than MobileNet. Later we will deploy our backend to a better server, and at that time, our model will be improved.

Firebase

All other data and connections are stored in firebase for convenient, including user information, chat information, post information. Our app does not store any user data locally.