website[M5]: init (#310)

content/ws23/master/m5-mov.io/_index.md

@@ -0,0 +1,43 @@
++++
+title = "mov.io"
+project_id = "M5"
+
+# Properties for displaying the project in the project list
+card_image = "logo.png"
+card_description = "mov.io - a revolutionary solution designed to tackle desocialization among remote workers." 
+
+team = [ "Brandon Mandzik", "Mohamed Amine Sallami", "Reynaldo Domenico", "Yosua Sentosa"]
+supervisor = "D. Koschnick"
+draft = false
++++
+
+{{<image src="logo.png" alt="mov.io">}}
+
+In the wake of the post-pandemic shift to remote work, the need for genuine social connections in professional settings has become more critical than ever. Enter mov.io, a revolutionary solution designed to tackle the growing issue of desocialization among remote workers. As the modern workforce adapts to remote environments, mov.io steps in to bridge the gap by offering a virtual office platform that prioritizes personal interactions alongside professional tasks.
+
+{{<section title="Our Goal">}}
+In response to the post-pandemic shift to remote work, mov.io tackles a critical challenge – the growing isolation and desocialization experienced by employees and freelancers. Traditional communication tools, primarily focused on professional tasks, have left a void in personal connections, leading to demotivation and misunderstandings in the virtual workspace.
+
+mov.io aims to improve personal interconnection in the virtual workspace. By visualizing interactions, reactions, and providing accessible communication features, mov.io transcends the limitations of existing tools. The objective is not just to enhance productivity but to create a virtual office environment that prioritizes personal connections. mov.io seeks to empower remote workers, making work not only about completing tasks but also about building fulfilling and meaningful connections that transform the remote work experience.
+
+{{</section>}}
+
+
+{{<section title="The team">}}
+Driving mov.io's development is a team of highly motivated master's IMI- students, each specializing in a key aspect of the platform:
+
+The Frontend Development team ensures a seamless and user-friendly interface, enhancing the visual and interactive aspects of mov.io. On the backend, another team focuses on implementing robust server-side functionalities to support the platform's core features.
+
+A Team working with Phaser integration brings dynamic and engaging elements to mov.io, creating an immersive virtual office experience. Simultaneously, the Web-RTC team focuses on real-time communication features, ensuring smooth and reliable interactions within the mov.io virtual workspace.
+
+This collaborative effort ensures that mov.io, from its frontend aesthetics to backend functionality and interactive elements, is meticulously crafted by a highly motivated and dedicated team of master's students.
+
+{{</section>}} 
+
+{{<gallery>}}
+{{<team-member image="amine.jpeg" name="Amine">}}
+{{<team-member image="yosua.jpeg" name="Yosua">}}
+{{<team-member image="reynaldo.jpeg" name="Reynaldo">}}
+{{<team-member image="brandon.png" name="Brandon">}}
+{{</gallery>}}
+

content/ws23/master/m5-mov.io/challanges.md

@@ -0,0 +1,26 @@
++++
+title = "Challanges"
+weight = 1
++++
+
+{{<section title="Ideation Struggles">}}
+The extensive ideation phase challenged the team as each member brought different perspectives, which led to difficulties in agreeing on a unified vision for mov.io. Uncertainty about the most appropriate technology required thorough research to make an informed decision. In addition, each team member brought unique insights, requiring additional effort to synthesize ideas and define key features, which impacted the initial stages of project build.
+{{</section>}}
+
+
+{{<section title="Learning Curve of New Technologies">}}
+Incorporating a range of new technologies, each assigned to a specific team member, presented a multi-faceted challenge. Integrating these technologies required an extensive research and learning process. Becoming proficient in these different technologies, while simultaneously implementing them within the project, added a layer of complexity that required a dedicated effort to master and apply the acquired knowledge.
+{{</section>}}
+
+
+{{<section title="Coding Practices">}}
+Merge Conflicts and differences in coding approaches:
+Collaborative coding presented challenges in managing conflict during the merge process, particularly due to the different coding approaches adopted by team members. Each responsible for specific components, team members had different perspectives on coding styles and methodologies. Establishing uniform coding conventions and improving communication channels became critical to managing conflicts and ensuring seamless integration of different components.
+{{</section>}}
+
+
+{{<section title="Git Server Downtime">}}
+A critical setback occurred shortly before the project submission deadline when the Git server experienced downtime for two days. This unexpected interruption disrupted the team's workflow, impacting collaboration and version control. Swift adaptation and the implementation of alternative solutions were essential to ensure the project's continuity despite the server outage.
+{{</section>}}
+
+

content/ws23/master/m5-mov.io/features.md

@@ -0,0 +1,34 @@
++++
+title = "Features"
+weight = 1
++++
+
+{{<section title="Interactive WebApp">}}
+**Engaging Virtual Collaboration**
+
+Step into a world of seamless collaboration with our Interactive Web - App, an engaging and responsive platform designed to facilitate user interaction in a virtual environment. Our focus is on creating a dynamic space that encourages effortless collaboration and enhances the overall user experience.
+{{</section>}}
+
+{{<section title="Virtual Office">}}
+**Replicating Physical Office Online**
+
+Bring the essence of a physical office into the digital realm with our Virtual Office. It serves as a digital workspace where users can effectively collaborate, communicate, and coordinate tasks. Experience the convenience of a centralized hub that streamlines workflows and fosters efficient team interaction.
+{{</section>}}
+
+{{<section title="Seamless UI / UX">}}
+**Effortless Navigation, Delightful Experience**
+
+Navigate our platform with ease through a seamless user interface (UI) and user experience (UX). Enjoy an aesthetically pleasing design that prioritizes effortless navigation, making every interaction on our platform a delightful experience for users.
+{{</section>}}
+
+{{<section title="Live Communication">}}
+**Real-Time Collaboration and Connection**
+
+Immerse yourself in real-time collaboration through our Live Communication features. Whether it's video, voice, or chat functionalities, our platform facilitates instant connections among users, promoting efficient and effective collaboration in a virtual environment.
+{{</section>}}
+
+{{<section title="Spatial Audio">}}
+**Immersive Communication Experience**
+
+Enhance your virtual interactions with our Spatial Audio feature. Experience an audio environment that simulates the natural direction and distance of voices, providing an immersive and authentic communication experience within our platform. Break down virtual barriers and bring a sense of physical presence to your interactions.
+{{</section>}}

content/ws23/master/m5-mov.io/future.md

@@ -0,0 +1,24 @@
++++
+title = "Future"
+weight = 1
++++
+
+As we look to the future of mov.io, our vision goes beyond a simple virtual office platform - we envision a dynamic and customisable ecosystem that truly adapts to the individual preferences and needs of our users.
+
+{{<section title="Unleash personalisation">}}
+A key aspect of our future plans revolves around providing users with an unprecedented level of customisation. Imagine having the freedom to design and personalize your virtual office space, from room layout to overall aesthetics. Users will be able to create their own office environment that reflects their unique style and preferences. Furthermore, customisation extends to personal avatars, allowing users to tailor their virtual representation and truly make mov.io a reflection of their identity.
+{{</section>}}
+
+{{<section title="Customize your virtual space">}}
+In the future, users will be able to customize every nook and cranny of their virtual workspace. From adjusting the lighting and decor to choosing the color scheme of each room, mov.io will become a canvas for users to express their creativity. The goal is to create an immersive and personalized environment that goes beyond the limitations of traditional virtual offices.
+
+{{</section>}}
+
+{{<section title="Seamless integration with external applications">}}
+To enhance the user experience, mov.io will seamlessly integrate with external applications, making it a central hub for productivity and entertainment. Integration with popular platforms such as Google Calendar will streamline scheduling and task management within the virtual workspace
+{{</section>}}
+
+{{<section title="Fun collaborations and interaction">}}
+Beyond the practical, we're exploring partnerships and integrations that add an element of fun and collaboration. Imagine interactive features that allow users to engage in virtual team building activities, brainstorming sessions or even friendly competitions within their customised 
+{{</section>}}
+

content/ws23/master/m5-mov.io/process.md

@@ -0,0 +1,35 @@
++++
+title = "Process"
+weight = 1
++++
+
+{{<section title="Research">}}
+At the start of our development journey, we devoted a significant amount of time to in-depth research. Our goal? To get inside the user's world, to understand the challenges they face on a daily basis, whether in a traditional office or in the rapidly evolving landscape of remote working. We dug deep to uncover the pros and cons and shed light on the finer details of their working environment.
+
+This in-depth exploration wasn't just about understanding workflows; it was about getting to the heart of communication. We recognised a common challenge - the lack of real connection experienced in online interactions. This realization fueled our determination to build features into mov.io that went beyond mere functionality. We wanted to bridge the gap in online communication and ensure that users felt the presence and essence of their colleagues, even in the virtual realm.
+
+As a result, the research phase became the compass that steered mov.io towards not just solving problems, but creating an experience that eliminates the sense of detachment often associated with online communication.
+{{</section>}}
+
+{{<section title="Concept">}}
+During this phase, we carefully identified the essential Jobs to be Done (JTBD), gaining a deep understanding of the core tasks that mov.io had to fulfil. Complementing this, the formulation of "How Might We" (HMW) questions stimulated innovative thinking and provided a creative lens through which we approached challenges.
+
+To humanise our development process, we created detailed user personas, envisioning the characteristics, needs and goals of our target users. This step ensured that mov.io would resonate authentically with real people facing real scenarios.
+
+In addition, the identification of Minimum Viable Products (MVPs) was critical in strategically outlining the essential features for an initial release. This approach allowed for a focused and effective launch, with room for iterative improvements.
+
+The concept phase therefore acted as a strategic blueprint, providing a comprehensive understanding of mov.io's objectives and the user demographic it was intended to serve. This groundwork set the stage for a streamlined and focused implementation process, ensuring that every development decision was rooted in a well-defined conceptual framework.
+
+{{</section>}}
+
+{{<section title="Creation">}}
+Beginning the practical journey of turning ideas into reality, the implementation phase marked a crucial chapter in the creation of mov.io. We began this phase by setting up a stable Git repository, creating a collaborative and version controlled environment that ensured smooth coordination between team members throughout the project lifecycle.
+
+With Vue.js at its core, we launched the Vue project, laying the groundwork for a user-friendly interface and integrating the interactive elements essential to shaping the overall user experience. To streamline our development workflow, we chose PNPM to improve the efficiency and organisation of project dependency management.
+
+Recognising the key role of a well-configured database, we carefully structured it to handle the complexity of the data critical to mov.io's functionality. At the same time, we seamlessly integrated Phaser components to add dynamic and engaging elements that enhance the virtual office experience.
+
+In tandem with these efforts, we focused on creating a seamless connection between the front-end, server, back-end and Phaser components. This strategic move was designed to ensure a responsive and cohesive user experience, creating a cohesive application.
+
+At the end of this phase, a comprehensive application structure emerged with distinct front-end, server and phaser components. This concrete result represented the collaborative efforts of our team and set the stage for ongoing refinements and feature enhancements as mov.io continues to evolve.
+{{</section>}}

content/ws23/master/m5-mov.io/techStack.md

@@ -0,0 +1,26 @@
++++
+title = "Tech Stack"
+weight = 1
++++
+
+{{<section title="Organization">}}
+- GitLab
+- NX
+- Gather.town
+- Figma & FigJam
+- Zoom
+{{</section>}}
+
+{{<section title="Frontend">}}
+- Vue3
+- Nuxt3
+- TailwindCSS
+- PhaserJS
+- WebRTC
+{{</section>}}
+
+{{<section title="Backend">}}
+- Express
+- Socket.IO
+- MongoDB
+{{</section>}}