b4-HypnoBuddy first version (#283)

* added first information

* update groupnames

* updated overview

* added features and screenshots

* added image gallery

* challenges, features, future, proccess

* added profile pictures

* delete card bunny picture

* changed the card

* added teckstack and profile pictures

* merge fix

* shortened overview text

* adjusted img sizes

* resized photos

---------

Co-authored-by: PiaDue <[email protected]>

content/ws23/bachelor/b4-HypnoBuddy/_index.md

@@ -0,0 +1,32 @@
++++
+title = "HypnoBuddy"
+project_id = "B4"
+
+# Properties for displaying the project in the project list
+card_image = "bunnyCard.png"
+card_description = "Hypno Buddy, an innovative app, enhances hypnotherapy effectiveness, especially for children and adolescents. Facilitating seamless communication between therapists, young clients, and parents, it empowers all parties. Strengthening the bond and trust between therapists and patients, Hypno Buddy emphasizes mutual collaboration. Patients receive support for daily progress without external pressure, and therapists benefit from enhanced communication for resource sharing."
+
+team = ["Justin Gebert", "Pia Dünow", "Sina Han", "Marwa Hariz", "Mai Le Phuong", "Nataliia Remezova"]
+supervisor = "Andreas Lehner"
+draft = true
++++
+
+{{<section title="Our Goal">}}
+Despite the rapid success achievable through hypnotherapy, the challenge lies in sustaining positive behavioral changes beyond therapy sessions, especially for complex issues like social phobias or school anxiety. Hypno Buddy addresses this gap by providing a child-friendly solution that extends the benefits of hypnotherapy into clients' daily lives. The app serves as a bridge between hypnotherapists, children, and parents, fostering continuous communication and support. Hypno Buddy aims to create a long-lasting, profound positive behavioral change. The ultimate goal is to empower young clients to overcome deep-rooted fears, identify the roots of their anxieties, and develop healthier responses to life's challenges.
+{{</section>}}
+
+
+
+{{<section title="The team">}}
+Our team consists of six developers currently pursuing our IMI bachelor's studies, each bringing distinct skills and expertise to create, together with our supervisor, a well-coordinated unit. Throughout our collaboration, we've fostered a culture of continuous learning, expanding our skillsets and gaining new perspectives. Regular weekly updates have been crucial in keeping everyone informed about individual progress, sharing feedback, and providing mutual support, resulting in a dynamic and collaborative environment. Our journey not only involved technical development but also a deep exploration of hypnotherapy, showcasing our commitment to the success of the HypnoBuddy app.
+{{</section>}} 
+
+{{<gallery>}}
+{{<team-member image="justin.png" name="Justin Gebert">}}
+{{<team-member image="pia.jpeg" name="Pia Dünow">}}
+{{<team-member image="sina.png" name="Sina Han">}}
+{{<team-member image="marwa.png" name="Marwa Hariz">}}
+{{<team-member image="mai.png" name="Mai Le Phoung">}}
+{{<team-member image="nathaliia.jpeg" name="Nataliia Remezova">}}
+{{</gallery>}}
+

content/ws23/bachelor/b4-HypnoBuddy/challenges.md

@@ -0,0 +1,28 @@
+---
+title: Challenges
+---
+
+{{<section title="Challenges: ">}}
+* **User Management: Balancing Complexity and Simplicity**
+
+The intricacies of managing users across three categories—therapists, patients, and parents—demanded a delicate balance. Based on therapists' recommendations, we opted to allow patients and parents to share the same account, simplifying the user experience. However, creating a secure yet straightforward connection between therapists and patients posed a unique challenge. To streamline this, we implemented connection codes, enabling therapists to effortlessly initiate and secure connections with their patients during the first therapy session.
+
+<br/>
+
+* **Feature Implementation: A Dual Perspective**
+
+Developing features from both therapists' and patients' perspectives presented a dual challenge. Meeting the requirements of these distinct user groups required careful consideration and collaboration. As we collected a myriad of feature ideas from interviews, deciding on the most crucial features, prioritizing them, and ensuring their feasibility became a complex yet pivotal task. Balancing these perspectives allowed us to create a holistic solution that addressed the diverse needs of both therapists and patients. 
+
+<br/>
+
+* **Designing a Mental Health Concept: Sensitivity and Empathy**
+
+Crafting an appropriate mental health concept demanded a heightened level of sensitivity. Mental health is a profoundly personal and delicate topic, necessitating a design approach infused with care and empathy. Our process involved multiple refinement cycles, incorporating expert views from psychology professionals and in-depth research. We strived to ensure that our design not only met functional requirements but also created a positive emotional association for users, fostering a sense of comfort and trust.
+
+<br/>
+
+* **Backend-Frontend Independence: Harmonizing the Symphony**
+
+Developing the backend and frontend independently brought its own set of challenges. Ensuring seamless communication between these components required meticulous planning and agreement on common interfaces. The team worked collaboratively to align the frontend and backend effectively, overcoming the complexities associated with parallel development. This synchronization was vital to achieving a cohesive and efficient final product.
+
+{{</section>}}

content/ws23/bachelor/b4-HypnoBuddy/features.md

@@ -0,0 +1,22 @@
+---
+title: Features
+---
+
+{{<section title="Dos And Don'ts Guide">}}
+Introducing our Dos and Don'ts Guide: a specialized feature designed exclusively for parents in the Hypno Buddy app. This guide, created by therapists and linked directly to the patient, offers practical tips for daily life, categorizing advice to address common challenges. Unlike resources for children, parents access personalized recommendations, ensuring relevance to their unique situation. The feature, derived from therapist interviews, reflects a concise suggestion to enhance the overall effectiveness of the therapeutic process. It provides concise, targeted insights for parents, contributing to the success and continuity of their child's therapeutic journey.
+{{<gallery>}}
+{{<image src="FearOverview.png" alt="Dos And Don'ts Feature" caption="Overview over Dos And Don'ts Categories">}}
+{{</gallery>}}
+{{</section>}}
+
+{{<section title="Roadmap">}}
+Our Roadmap feature is a dynamic tool that seamlessly merges patient autonomy with therapist support. On their Roadmap, patients can set daily life goals—whether integrated into therapy sessions or pursued individually. Therapists leverage these insights to gauge therapy effectiveness and observe real-life progress.
+The comment feature encourages ongoing communication, enabling therapists to offer guidance and motivation. Actively engaging, patients share thoughts, creating a dynamic dialogue beyond formal therapy sessions. Through this interactive tool, our goal is to motivate patients, aiding them in recognizing and celebrating their successes. In doing so, it enhances patient awareness and fosters a deeper appreciation for their progress on the therapeutic journey.
+{{</section>}}
+
+{{<section title="Journal and Mood Tracking" >}}
+Our Journaling and Mood Tracking feature in Hypno Buddy is a personalized tool to enhance self-reflection and positive focus. This feature allows users to track their emotions through a simple yet effective journal, emphasizing positive aspects of their day. With an uncomplicated text field, users can easily document their thoughts, aided by sample questions for inspiration. Emoji-buttons provide a quick and expressive way to capture daily moods. Entries are saved chronologically, fostering reflection by allowing users to revisit and visualize their progress. This feature serves as a valuable resource for users to not only track their feelings but also celebrate achievements, creating a dynamic and empowering aspect of their therapeutic journey.
+{{<gallery>}}
+{{<image src="JournalingFeat.png" alt="Journaling Feature" caption="Moodtracking Feature">}}
+{{</gallery>}}
+{{</section>}}

content/ws23/bachelor/b4-HypnoBuddy/future.md

@@ -0,0 +1,31 @@
+---
+title: Future
+---
+
+- As we reflect on our current achievements, we envision a future where our web application evolves into an essential tool for diverse forms of mental therapy. Here are key areas where we see potential for improvement:
+
+{{<section title="Therapy Session Calendar">}}
+**Streamlining Appointment Management**
+
+To streamline the therapeutic process, we plan to incorporate a comprehensive Therapy Session Calendar. This feature would empower therapists and clients to create or request new appointments directly within the app. This ensures that therapists have all relevant information about their patients consolidated in one platform, fostering a more efficient and organized workflow.
+{{</section>}}
+
+{{<section title="Roadmap Experience">}}
+**Gamifying the User Experience**
+
+Improving the intuitiveness of our roadmap is a key focus. We aim to make the interface more user-friendly, introducing features such as drag-and-drop functionality for seamless navigation. Inspired by gamification principles, we aspire to make the UI more engaging, drawing inspiration from platforms like Duolingo to create a visually appealing and interactive experience.
+{{</section>}}
+
+{{<section title="Exercise Feature">}}
+**Flexibility and Feedback**
+
+Our Exercise Feature will be refined to provide therapists with the capability to create/upload exercises within the app. Patients can then upload their results, allowing therapists to offer feedback or make notes for subsequent sessions. This feature will prioritize flexibility, ensuring therapists can customize exercises for various formats, including audio files for meditation recorded by the therapists themselves. The goal is to save time and enhance the overall effectiveness of therapeutic exercises.
+{{</section>}}
+
+{{<section title="Feature Connection">}}
+**Seamless Integration for Holistic Insights**
+
+Connecting different features will be a pivotal improvement to create a more seamless user experience. For instance, integrating therapists' notes from the Exercise, Roadmap, and Journal features into the calendar will provide therapists with a consolidated view of important information. This interconnected approach aims to enhance the overall therapeutic process, providing a holistic understanding of the patient's journey.
+
+{{</section>}}
+

content/ws23/bachelor/b4-HypnoBuddy/process.md

@@ -0,0 +1,22 @@
+---
+title: Process
+---
+
+- Our development journey can be broken down into distinct phases, each contributing to the evolution of our vision. Let's explore the key milestones that shaped our project from its inception to the current stage.
+
+{{<section title="Preparation: Setting the Foundation">}}
+Before diving into the technicalities, our team initiated the project by agreeing on a concrete problem within the realm of therapy that we aimed to solve. We defined major responsibilities, sharing our preferences and experiences to foster effective collaboration. Establishing a solid groundwork, we set basic rules and guidelines for teamwork, using tools like Git to streamline our development process. Weekly meetings were scheduled to keep everyone on the same page, and we built an infrastructure using GitHub, Discord, Miro, Google Docs, WhatsApp, and Zoom for seamless communication.
+{{</section>}}
+
+{{<section title="Research: Deepening Insights">}}
+To develop a comprehensive understanding of hypnosis therapy, our team delved into extensive research. We reached out to hypnosis therapists, engaging in insightful interviews with potential users to gather valuable feedback. Constant communication with therapists allowed us to evaluate our findings and refine our direction, ensuring our solution aligned with their needs.
+{{</section>}}
+
+{{<section title="Conception: Shaping the Vision">}}
+Agreeing on the app's structure and initial features, we built a common understanding and vision for our project. The selection of the MERN tech stack (MongoDB, Express.JS, React, Node.js + Typescript) and additional tools such as Bootstrap, SASS, Docker, and Figma laid the foundation for our development. Crafting features and user stories, we meticulously structured our backlog, using Miro to visualize data structures and model connections. This phase provided the blueprint for the upcoming development process.
+{{</section>}}
+
+{{<section title="Development: Bringing Ideas to Life">}}
+Adopting a SCRUM-like workflow with one-week sprints, our team held weekly meetings to synchronize progress and address challenges. We began by constructing the basic application structure and implementing a user management concept. Choosing the most critical features, we formed development groups, working towards delivering the first version before the holiday season. Alongside the implementation, we emphasized writing unit tests for both backend and frontend components, ensuring the reliability and stability of our application. As the first version came together, we conducted retrospectives, identifying areas for improvement and planning for additional features.
+{{</section>}}
+

content/ws23/bachelor/b4-HypnoBuddy/techstack.md

@@ -0,0 +1,48 @@
++++
+title = "Tech Stack"
+weight = 1
++++
+
+{{<section title="Projektmanagement">}}
+{{<gallery>}}
+{{<image src="miro.png" alt="Miro Icon" caption="Miro">}}
+{{<image src="github.png" alt="Github Icon" caption="Github">}}
+{{<image src="discord.png" alt="Discord" caption="Discord">}}
+{{<image src="zoom.avif" alt="Zoom" caption="Zoom">}}
+{{<image src="whatsapp.png" alt="Whatsapp" caption="Whatsapp">}}
+{{</gallery>}}
+{{</section>}}
+
+{{<section title="Design / Styling">}}
+{{<gallery>}}
+{{<image src="figma.webp" alt="Figma Icon" caption="Figma">}}
+{{<image src="scss.png" alt="SCSS Icon" caption="SCSS & CSS">}}
+{{<image src="bootstrap.png" alt="Bootstrap" caption="Bootstrap">}}
+{{</gallery>}}
+{{</section>}}
+
+{{<section title="Frontend">}}
+{{<gallery>}}
+{{<image src="typescript.png" alt="TypeScript Icon" caption="TypeScript">}}
+{{<image src="react.png" alt="React Icon" caption="React">}}
+{{</gallery>}}
+{{</section>}}
+
+{{<section title="Backend">}}
+{{<gallery>}}
+{{<image src="nodejs.svg" alt="Node JS Icon" caption="NodeJS">}}
+{{<image src="express.png" alt="ExpressJS Icon" caption="Express JS">}}
+{{<image src="typescript.png" alt="TypeScript Icon" caption="TypeScript">}}
+{{<image src="mongodb.png" alt="MongoDB Icon" caption="Mongo DB">}}
+{{</gallery>}}
+{{</section>}}
+
+{{<section title="DevOps & Deployment">}}
+{{<gallery>}}
+{{<image src="docker.png" alt="Docker Icon" caption="Docker">}}
+{{<image src="github-actions.png" alt="Github Actions Icon" caption="Github Actions">}}
+{{<image src="jest.jpeg" alt="Jest Icon" caption="Jest (Unit Testing)">}}
+{{<image src="cypress.png" alt="Cypress Icon" caption="Cypress (End-to-End Tests)">}}
+{{</gallery>}}
+{{</section>}}
+