Mood Map - Draw all your feelings

This is a submission for the GitHub Copilot Challenge : Transitions and Transformations

What I Built

This year started with being diagnosed with PCOD, which means mood swings are a common part of my life. I go from feeling a ton of emotions in a day to nothing at all. Along with me, 60% of other women have it (yes, PCOD is that common).

But mood swings are not just limited to people with a uterus. Every human being experiences certain moods and emotions daily. So I built the Mood Map app to help turn these moods and feelings into masterpieces.

Sneak peek of the app:

Building the app

I started building the app with listing 12 basic emotions that a human might feel, here’s a list of them:

• Happiness

• Sadness

• Fear

• Disgust

• Anger

• Excitement

• Confusion

• Envy

• Empathetic

• Sympathy

• Triumph

• Satisfaction

And then, asked GitHub Copilot to list me one shape and colour that represents these moods. This is what it suggested:

Mood	Shape	Color
Happiness	Circle	Bright Yellow
Sadness	Teardrop	Deep Blue
Fear	Sharp Triangle	Dark Purple
Disgust	Irregular Blob	Olive Green
Anger	Jagged Spike	Fiery Red
Excitement	Starburst	Electric Blue
Confusion	Spiral	Pale Gray
Envy	Twisting Vine	Deep Green
Empathetic	Interlocking Loop	Warm Peach
Sympathy	Gentle Wave	Light Blue
Triumph	Upward Arrow	Gold
Satisfaction	Square	Earthy Brown

For the final step before coding, I went to Excalidraw to visualize how my app would look like, and then built this structure:

Demo

You may not know how to use a paintbrush, but with technology, everyone can be an artist. So try out the app here 👉 https://mood-mapdraw.vercel.app/ , and when you do, feel free to share and tag me on X @HaimantikaM.

Repo

Haimantika / Mood-map

Mood Map Creator

A web-based interactive tool for creating drawings, based on mood. This can help you relax and relieve stress.

Features

• Draw and manipulate shapes on a canvas
• Color selection for shapes
• Shape customization
  • Resize shapes using slider controls
  • Rotate shapes with precise angle control
  • Copy, cut, and paste shapes
• Download created mood maps as PNG files
• Fully keyboard accessible
• Screen reader friendly

Technologies

• Next.Js
• Tailwind CSS
• Lucide React (for icons)

Installation

# Clone the repository
git clone https://github.com/{username}/Mood-map

# Install dependencies
cd mood-map
npm install

# Start development server
npm run dev

Usage

1. Select a shape from the shape selector
2. Choose a color from the color picker
3. Click on the canvas to place the shape
4. Modify shapes using:
   • Size slider (10-100)
   • Rotation slider (0-360 degrees)
   • Click on shapes to select them

Keyboard Shortcuts

• Ctrl/Cmd + C: Copy selected shape
• Ctrl/Cmd + V: Paste copied shape
• Ctrl/Cmd…

View on GitHub

Copilot Experience

This entire application was built with the help of Copilot, from ideation to fixing deployment errors.
Here's how I used it:

• For generating color and shape for different moods, and the prompt was, I am building a mood based drawing app, I have these moods: happiness, sadness, anger, etc, can you help me suggest a color and shape for each of them.
• For improving accessibility in the page.tsx file, and the prompt for it was Make this code more accessible.

• To fix deployment errors, and the prompt was:

Got this error while deploying in Vercel:

Type error: Type '{}' is missing the following properties from type 'DrawingCanvasProps': selectedShape, selectedColor, shapes, setShapes, and 4 more.
  17 |           onShapeChange={setCurrentShape}
  18 |         />
> 19 |         <Drawing />
     |          ^
  20 |       </div>
  21 |     </div>
  22 |   )
Static worker exited with code: 1 and signal: null
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn build" exited with 1` can you help me fix it?
- To generate the project README using the prompt, `Read the entire project and add a simply Readme for it that includes all about the project and what it does.

GitHub Models

I used two GitHub models for the entire project:

• GPT4 - To help in code generation and update
• Claude 3.5 - To write the README for the projects

Conclusion

I love building, and when I build for a cause, it is even better. I first discovered the painting concept in 2024, while casually strolling through the streets of Bangalore. Everything seemed to pause and feel peaceful for a moment when I picked up the sketch paints based on my mood and started coloring.

Now that I finally have an opportunity to build something, I want you all to feel that moment of peace with me. Embrace every feeling, every transition that you are going through with my Mood Map app. The application is open-source, and I would love to have your ideas on what else I can add. As for my future plans, I want to make the app more scalable, add more features, and provide an option to generate the sketch while you just sit and paint.

Comments

[Sophia Iroegbu]

I love this 🔥🔥🔥

[haimantika mitra]

Thank you :D