Compliment Constellation

• 

  initial look

• 

  Adding a compliment

• 

  After completing a constellation

• 

  After completeing one constellation

Inspiration

We often remember negative things that we face rather than compliments, as someone who knows the importance of these compliments when i saw the compliments generator example i thought why not build something that remembers the compliments i.e "the small good things". Well that is my project COMPLIMENTS CONSTELLATIONS.

What it does

Compliments constellation is a chrome extension where every compliments turns into a star eventually becoming a constellations. It is a wellness tool that visualizes small act of kindness by turning the compliments into a star. User can add compliments , so far there are 5 constellations and after each constellation user gets a meaningful message. This tool helps you remember all the small good things that happened to you.

How we built it

We built the project using React, Vite, and CRXJS as a Chrome extension.Used reusable React components for the stars, constellations, and compliment system, with local storage to save compliments and custom logic to make the constellations grow and glow as more compliments are added. Claude sonnet 5(free model) was used to build this project.

Challenges we ran into

We had difficulties setting up chrome extension environment and few bugs in code.

Accomplishments that we're proud of

I am really proud to pull this off , as it would be my first ever solo hackathon not only that this tool is very meaningful even if one is not using their laptop when you look up at the night sky and you see any of the constellations then you will remember the compliments.

What we learned

Learnt how to set up a chrome extension , different kind of constellations .

What's next for Compliment Constellation

I am planning on adding more constellations maybe add a feature where friends can compliment each other or use it some other entertainment apps where likes can be turned into constellations.

Built With

• claude
• crxjs
• css
• html5
• javascript
• react.js