Team Cool RunningspresentDrawn Together
Drawn Together Demo Video
Draw with 4 or more
Drawn Together is a web app that allows multiple users to join together online to play a simple drawing game. One player is given a word and draws it on the on-screen whiteboard. The other players connected to the game guess what the word is from the picture. Players guesses are submitted through a chatbox feature and feedback is given via a message response.
The Team
Ashlyn Lovatt
Louis Balać
Hannah Hill
Kyle Compton
Technologies
We used: Typescript, Angular, Tailwind / CSS, HTML5, Express, Socket.io , dotenv , Netlify ,PG ,rxjs ,JavaScript ,Supabase ,Render ,SQL ,Jest
Backend Development:
For the backend, we opted for a straightforward approach, as we anticipated that the database wouldn’t be a major component of our application. We chose JavaScript, SQL, and PostgreSQL to create and seed our database, and used Express to manage our API endpoints. Environment variables were handled with .env files, facilitating our backend hosting on Supabase and Render.
WebSocket Integration:
To implement multiplayer functionality, we used Socket.IO. On the backend, Socket.IO managed our server, while on the frontend, it served as our WebSocket library, enabling real-time communication between users.
Frontend Development:
Our frontend was more complex since many of these technologies were new to us. We set up the repository with Angular, using TypeScript as our language. State management would form an integral part of our app’s functionality. We utilised RxJS within our Angular components to achieve this. HTML was employed for templating within Angular, and we used Tailwind CSS for most of the styling to support accessability, with additional CSS for finer adjustments.
Hosting:
To make our frontend accessible to users, we hosted it on Netlify. We chose Netlify because of our familiarity with it, ensuring a smoother deployment process with minimal issues.
Challenges Faced
We ran into some issues trying to integrate a whiteboard library with the version of Angular we were using for the project.
After running into challenges trying to change Angular to a later version, rather than risk compromising other elements of the project dependencies, we decided to implement another whiteboard library used within Angular.
We found ourselves referring to the docs a lot for angular as this was a new front end library for us.