ZenCanvas

ZenCanvas is a mental wellness app combining art, mindfulness, and grounding games to help reduce stress and anxiety. Save your creations and grow your peace—anytime, anywhere.

Comment

ZenCanvas: The Journey Behind the App

Inspiration

As a dentist turned data analyst, I have always wanted to improve people’s lives. As a victim of mental illness and its crippling effects on one's life, I became increasingly aware of the growing mental health crisis and how stigma and lack of engagement prevent many individuals from seeking help. My own experiences with anxiety and depression made me empathize deeply with those who struggle silently. This inspired me to create ZenCanvas, an app that combines creativity, mindfulness, and grounding exercises to guide individuals toward acknowledging and managing their emotions gently.

What I Learned

Building ZenCanvas was an eye-opening journey that taught me more than I could have imagined. This was my first-ever attempt at creating an app from scratch, and it challenged me to step out of my comfort zone in every way possible. From understanding user experience design to learning about AWS services for data storage, I learned how to take an idea and translate it into a tangible, functional product. The process also helped me better appreciate the nuances of app development, from frontend interactions to backend integrations.

How I Built the Project

The foundation of ZenCanvas is a combination of art and mindfulness:

  • Technologies Used: The app was built using React.js for the frontend, along with AWS S3 to store and retrieve users' creative outputs. I used libraries like Framer Motion for animations and incorporated soundscapes to enhance user engagement.

  • Key Features:

    • A ZenPattern canvas for creative expression.
    • Grounding exercises that prompt users to list sights, sounds, and textures around them to help with anxiety management through mindfulness.
    • An Ocean Mindfulness game for helping with rhythmic breathing exercises.
    • A Gallery to save and revisit creations.

  • Development Journey: I started by drafting a user flow keeping in mind the chief objective of helping people practice mindfulness and then went on to create basic wireframes. Next came coding the core features, integrating AWS S3 for file storage, and refining the interface to ensure a seamless experience. ZenCanvas was my first attempt at building an app from scratch, and Amazon Q played a crucial role in accelerating my learning and development process by:

Guided Development

Amazon Q's AI-powered insights helped break down coding concepts, allowing me to better understand complex tasks, like managing state in React, implementing AWS services, and integrating APIs.

Code Validation and Debugging

Throughout the development, Amazon Q provided real-time feedback and debugging suggestions, helping me identify errors and optimize performance.

AWS Integration

For features like uploading and managing user-generated mandalas, Amazon Q simplified the process of integrating AWS S3 into the app. It provided step-by-step guidance for setting up bucket policies, managing CORS configurations, and enabling seamless file uploads.

Dynamic Features

With Amazon Q's recommendations, I was able to implement dynamic elements like personalized prompts and responsive UI components for mindfulness exercises.

Problem-Solving and Learning

As someone new to app development, I faced several challenges—from setting up cloud storage to creating a functional UI. Amazon Q acted like a tutor, offering tailored solutions and learning resources to help me overcome these hurdles.

By leveraging Amazon Q’s capabilities, I not only built ZenCanvas but also significantly improved my coding skills, gaining confidence to tackle larger projects in the future.

Challenges Faced

Every step of building ZenCanvas came with its own set of challenges:

  1. Learning New Tools: As someone new to app development, I had to quickly learn React.js, AWS S3, and sound integration, all while juggling multiple other tasks.
  2. CORS Policy Errors: Integrating AWS S3 for user-generated content came with configuration hurdles, such as resolving permissions and overcoming CORS errors.
  3. Time Management: Balancing the demands of creating an app with a focus on user needs and functionality requires meticulous planning.
  4. Design Iterations: Creating an interface that feels calm yet functional took several rounds of feedback and refinement.

Final Thoughts

ZenCanvas isn’t just an app—it’s a reflection of my journey, my struggles, and my passion for helping others embrace their emotions. It’s designed to remind users that mindfulness can be approachable and fun, whether they’re creating a mandala or simply taking a moment to breathe. Building this app was a leap of faith, but I hope it becomes a small yet meaningful step in helping others find their inner peace.

Thank you for considering ZenCanvas for this hackathon. I look forward to improving and expanding its capabilities in the future!

Share this project:

Updates