Table of Contents

• Abstract........................................................................................1

• Introduction.................................................................................. 2

• Problem Statement.......................................................................3

• Challanges and Opportunities......................................................4

• Proposed Methodology................................................................5

• Tech Stack Used........................................................................... 8

• Architecture and Structure...........................................................9

• Conclusion..................................................................................11
 Abstract
"Hangsquare" is an innovative web application developed using Next.js
and Node.js, designed to foster a social platform. With a focus on user-
friendly design and seamless responsiveness, Hangsqaure empowers users
to engage in dynamic, collaborative chatting experiences. Key features
include the ability to create and join groips for up to 10 participants, real-
time chat , perosnalised feed, add and remove friend , like and share your
daily activities . Powered by WebSocket technology, Hangsquare offers an
immersive platform for individuals to connect, create, and express their
social outbursts together in a digital environment.
 Introduction
In a world increasingly interconnected by technology, the desire for
collaborative experiences has permeated every aspect of our digital lives.
"Hangsquare" emerges as a testament to this new era of interaction,
offering a fresh and engaging way for individuals to come together and
express and connect with their friends online. Developed using Next.js and
Node.js, this web application reimagines the traditional social website as a
dynamic, shared canvas where up to 10 users can chat as groups.
The heart of Hangsquare lies in its commitment to user experience,
ensuring an intuitive, user-friendly interface that caters to both seasoned
artists and novices. The application boasts a high degree of responsiveness,
enabling users to access the platform across a multitude of devices.
Through the magic of WebSocket technology, real-time communication
becomes the backbone of this virtual collaborative space. Users can not
only draw and design together but also personalize their strokes,
backgrounds, and even preserve their collaborative masterpieces as images
or SVG files.
 Problem Statement
In a world where digital connectivity knows no bounds, fostering creative
collaboration through real-time experiences is both a challenge and an
opportunity. "Hangsquare" seeks to address this challenge by providing a
platform for users to engage in collaborative social sharing experience,
transforming a traditional solo activity into a dynamic shared endeavor.

The problem statement for Hangsquare can be summarized as follows:

Problem: Traditional social applications are primarily designed for

individual use, lacking the capability to facilitate real-time chat experience
without ads. Users seeking to express their creativity alongside friends,
family, or colleagues encounter a significant gap in the availability of
interactive and user-friendly platforms that enable multi-user interactivity,
customization, and real-time synchronization.
 Challanges and Opportunities
• Real-Time Collaboration: Enabling real-time collaboration
introduces complex technical challenges, including data
synchronization, user interaction, and communication among
participants.
• User-Friendly Interface: Designing an intuitive and accessible user
interface that accommodates both experienced artists and novices is
critical to ensuring widespread usability.
• Cross-Device Accessibility: As users access the application from a
variety of devices, ensuring a responsive design that adapts to
different screen sizes is paramount.
• Security and Privacy: Ensuring the secure and private exchange of
data, including drawings and user interactions, is essential for user
trust and safety.
• Scalability: The application must be capable of handling multiple
users concurrently and scaling to accommodate growing user bases.
 Proposed Methodology
1. Project Planning and Requirements Gathering:
• Define project goals, objectives, and scope.
• Gather requirements by understanding user needs and
expectations, drawing on initial research and literature survey
findings.
2. System Architecture Design:
• Define the overall system architecture, including both the front-
end and back-end components.
• Identify the technology stack, data storage solutions, and server
infrastructure.
3. Front-end Development:
• Develop the user interface using Next.js, focusing on
responsive design principles to ensure accessibility across
various devices.
• Implement interactive canvas elements for drawing and real-
time collaboration.
4. Back-end Development:
• Create the server and API using Node.js, with a focus on
WebSocket integration to enable real-time communication.
• Develop user and room management systems, ensuring secure
and efficient data transfer.
5. Real-Time Functionality:
• Implement WebSocket communication for real-time
collaboration, enabling users to draw and interact
simultaneously.
 • Address challenges related to data synchronization and user
interactions.
6. Security and Privacy:
• Implement security measures to protect user data and ensure the
privacy of interactions.
• Perform security testing and validation to address
vulnerabilities.
7. Testing and Quality Assurance:
• Conduct rigorous testing to identify and resolve bugs, glitches,
and usability issues.
• Test the application's scalability under varying loads.
8. User-Centered Design:
• Gather user feedback through testing and user surveys.
• Iterate on the design and functionality based on user input to
enhance the overall user experience.
9. Documentation and Knowledge Sharing:
• Create comprehensive documentation for the application,
including user guides and developer documentation.
• Share knowledge and insights gained during the project to
foster a learning environment.
10.Deployment and Hosting:
• Deploy the Hangsquare application to a production
environment.
• Choose appropriate hosting and server configurations for
reliability and performance.
11.Maintenance and Updates:
• Provide ongoing maintenance and support for the application.
 • Address user feedback and implement updates and
enhancements as needed.
12.User Training and Onboarding:
• Develop onboarding materials to help new users understand
how to use Hangsquare effectively.
• Offer training and support to ensure a smooth user adoption
process.
 Tech Stack Used
After the initial research i decided on the following tech stack to use in my
app:-
• FrontEnd-
Next js as framework.
Typescript for its type advantage over javascript.
Tailwind css for design and css.
Shadcn ui for the styled components.
Zustand for the state store.
Zod for schema validation

• Backend-
Node js as the backend.
Web sockets for the realTime functionality.
Express js as the framework for api endpoints.

• Others-
Vercel for deployment of frontend.
OnRender for deployment of backend.
 Architecture and Structure

• After the web socket is initialized then the clients can talk to the
server and the server can relay data to client in a real time
connection.
• The room data is deleted when there are no user in the room.
Website structure
• This is the basic structure and walk through of the app
Package json of frontend

Package json of backend

 Conclusion
The objective of Hangsquare is to bridge the gap by creating an engaging,
user-friendly, and responsive web application that offers a collaborative
social experience for up to 10 participants. The platform will support real-
time synchronization, customizable feeds, background selection, and the
ability to socialize online, all while maintaining the security and privacy of
user data.
By addressing these challenges, Hangsquare aims to empower individuals
to connect, create, and express their artistic inclinations together in a
digital environment, making collaborative drawing accessible and
enjoyable for all.