Sketch-Connect
SketchConnect is a four-person collaborative drawing game where individuals are given a topic, assigned to a unique quadrant, and take turns drawing, while only seeing a small subset of the previous players’ work. At the end of the game, the quadrants are combined, to create and witness the magic of creativity and diversity as the quadrants unite, creating a mesmerizing and (potentially) seamless masterpiece.
Sketch-Connect Demo
Authentication
To safeguard user data and maintain a secure environment, the app implements Firebase authentication, providing a hassle-free login and registration process. With these innovative features, SketchConnect promises endless fun, collaboration, and artistic expression for all players.
Image Storage
SketchConnect incorporates many additional features such as cloud storage using Google’s external API, allowing players to save their final drawings.
Research-driven UX
In shaping SketchConnect, we prioritized a user-centric approach through conducting thorough UX research and testing with over 50 users. By understanding player preferences (style of online games played, prompts, timer configurations, etc.) we ensured an interface that would be fun, friendly, seamless and intuitive for a delightful collaborative online doodling experience.
Integrates with Social Media sharing
Additionally, SketchConnect integrates with social media platforms, empowering players to share their masterpieces with friends and family.
HTML, CSS, JS
The application's web pages were structured using HTML, complemented with CSS for styling. Core logic for handling dynamic interactions and client-side functionality was implemented using JavaScript to create a seamless user experience.
React & Redux
The front-end of the application utilized React as the library for building interactive user interfaces, offering a component-based architecture to manage UI elements efficiently. For state management, Redux was employed, enabling centralized storage and seamless data sharing among components.
Node & Express
Node.js and Express were utilized to set up and operate the server, facilitating smooth communication between the React frontend components and backend services. With Express, handling HTTP requests, defining routes, and managing middleware becomes more straightforward, enhancing the overall efficiency of the system.
MongoDB
MongoDB served as the database to efficiently store, retrieve, and modify user and game session data, ensuring data persistence even when the application is closed. Its schema-less and flexible nature, as a NoSQL database, made it a suitable choice for managing the large amounts of data present in the application.
Builds & Deployment
Deployment allows the application to be live and accessible from a public URL in which users can interact with Sketch ConnectThe React front-end was deployed on Vercel and backend was deployed on Render which are two cloud-based platforms
Technologies Used
The main drawing functionality of SketchConnect is achieved with HTML5’s Canvas. Each player’s canvas is created and scaled according to the device's pixel ratio, and the component has several state variables to handle different functionalities such as brush color, size, erasing, and exporting. Something extra we implemented that we thought would enhance the user experience is to show players glimpses of previous players’ drawings to help guide their drawings. In addition, the styling of the canvas and tools are unique to each player’s perspective, and provides visual cues to help align their artwork within the combined canvas, ensuring a cohesive final product.
We decided to combine websockets using Socket.IO and MongoDB’s change streams to notify the players every time a monitored field’s value changes. We set up change streams to monitor changes to relevant fields in our collections that impact the flow of the game, like a game’s status or number of players. When a change is detected, the server will send a message to the players in the game. Then, each player’s frontend will react to that change by either updating a component or sending the user to a new page