What's That?! Drawing Application
Overview
You draw, BUGY guesses. You have only 15 seconds per round to show off your artistic skills. Can BUGY understand what you are trying to draw? Let's get started!
This game is based on Google's Quick, Draw! game. Quick, Draw! is an A.I. Experiment by Google. The dataset of 50 million+ drawings means that it is the largest unique data set of doodles in the world. Developers can also use the dataset to train their own neural networks.
Application Setup
Frontend
Navigate into the /client folder.
Install dependencies using npm:
npm i
Run the app:
npm start
Backend
Navigate into the /server folder.
Install dependencies using npm:
npm i
Run the app:
nodemon
Technical Highlights
| Technical Highlights | |
|---|---|
| 🎨 | Object recognition. Relying on Google's QuickDraw API. |
| 🔌 | Socket.IO Enables real-time, bidirectional and event-based communication. |
| 💅 | Styled Components. Utilises the power of tagged template literals. CSS scoped to single, reusable components. |
| ✨ | Pose Animation Library. Pose is a declarative motion system that combines the simplicity of CSS transitions with the power and flexibility of JavaScript. |
| 🚀 | Redux. Application state management for both frontend and backend. |
Credits
Development Team
🇪🇸 Darío Vallés, 🇧🇾 Konstantin Morozov, 🇱🇻 Gelena Barker, 🇹🇼 Shanshan Chen, 🇩🇪 Ole Kranz, & 🇬🇧 Freddie Smith
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent