Tame Your Inner Critic

About the project

Who said working with your inner critic has to be heavy and serious? This project offers a playful and creative approach to exploring and transforming your inner critic.

Through activities like drawing, naming, animating, and even giving your inner critic a silly voice, this platform helps you build a new relationship with that critical voice. It’s not about silencing it but reimagining it in ways that encourage curiosity, humor, and self-kindness.

Whether you’re an adult, teen, or child, this project invites you to laugh more and transform inner battles into moments of creativity and growth.

Link to the project

https://degreeproject-of6l.vercel.app/

Why I Built This

I created this project because of my personal experiences with a harsh inner critic. I’ve struggled with self-doubt and negativity, and I know many others face similar challenges. This platform is my way of providing a helpful resource that feels approachable and enjoyable.

Features

• Thought Reflection: Users can note down the thoughts of their inner critic and evaluate how true they feel.
• Emotion Mapping: Explore what emotion these thoughts generate and search for an image that represents the feeling (using Pixabay's API).
• Critic Naming: Assign a name to the inner critic and save it.
• Critic Visualization: Draw the inner critic and animate it using Meta's Animated Drawings (integrated via an iframe).
• Voice Manipulation: Record and modify the inner critic's voice with fun effects like "chipmunk" or "mountain troll."
• Thought Animation: Apply animations to the recorded thoughts, such as spinning them away or making them disappear.

Tech Stack

• React
• TypeScript
• Tone.js
• Sass
• Pixabay API
• Meta’s Animated Drawings (via iframe)

Installation

To set up the project locally:

1. Clone this repository:

   git clone <https://github.com/helenaskagerlid/degreeproject>

2. Navigate to the project directory:

   cd yourinnercritic

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Screenshots

Homepage:

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6:

Step 7:

Step 8:

Step 9:

Step 10:

Closing:

Acknowledgments

Thank you to everyone who supported this project, especially the users who provided valuable feedback