Color Healing

Colors are different frequencies of light. In this application, you can use colors to relax or deal with your emotions. The goal is to take it easy and slow down anytime you think or feel too much.

Comment

Inspiration

For quite some time, I have been eager to develop an application that would in some way use colors in its features. Because I was busy with other projects and my day job, I have kept this idea safely in the corner of my mind, hoping some day I will have the time to develop it. I've done some work related to it in one of the previous Hackathons, but at the time I was lacking experience and knowledge to justify what I really wanted to create. Before the TiDB Hackathon was announced, I was working on integrating different APIs and learning how to communicate between them. As soon as I saw that integrating AI models and APIs in the application was one of the main points of the TiDB Hackathon, I almost instantly knew what I will be creating, and yes, it would include colors. Suddenly, everything made sense to me, and I couldn't wait to start planning and developing the project.

What it does

Color Healing app analyzes a text description entered by user and detects emotion in that description. It then uses emotion to find a related color and provides user with color visualization. After indulging in color visualization. user can expect to achieve more peaceful and relaxed mental and emotional state.

How I built it

When the inspiration hit me, I opened One Note and immediately wrote down all the processes application would have. I translated that to main functionalities and UI design. I have researched and implemented additional APIs used for data representation. I created ER models, and database in TiDB Cloud, and eventually integrated all parts into one functioning system, called Color Healing. Front-end was build using Angular and Angular Material, and I have used Netlify Serverless functions as back-end service. Application is deployed on Netlify.

Challenges I ran into

Extracting name of the color from the ChatGPT response. At first I thought I would use REGEX pattern to solve that problem, but the response from ChatGPT wouldn't always be the same, it would be in a different format. To avoid having more regex queries, I figured that the best solution for the moment is to have a list of color names and use JavaScript to check if the name of the color appears in the response.

I've had problems with authenticating to OpenAI's API using Netlify, and with the suggestions of technical staff, I was able to make it work and also learn about Digest authentication.

Towards the end of development, I encountered a situation where I would always get data from database that was related to previous request. If I would refresh the browser, then I would get appropriate data. That seemed like it's an issue with browser cache and after I've spent some time dealing with it, I've soon realized that cache is not the problem. Debugging to the rescue, I have learned that one of the SQL queries was not adjusted to the current application state, and so it only seemed I was getting previous data. Application was returning what server was instructing it. As soon as I fixed the query, it all worked fine. It was definitely interesting to observe how I thought the problem is one thing, and then it turned out to be something else entirely. It's important to debug your processes.

Accomplishments that I am proud of

I am proud of implementing and using external APIs, and creating my own SQL query endpoints in the TiDB Cloud. I am proud to have advanced in JavaScript and especially in understanding Asynchronous programming and chained promises. I am proud to understand the entire process of project development, from research and analysis to design and functionality, deployment and maintenance. Most importantly, I am proud of creating the application that in some ways uses colors, as that was my personal goal.

What I learned

I have learned lots of different things during this process. At first, I thought that it would probably be easier to have a team and separate the tasks, but because I've had it so well developed in my mind, I was a bit afraid that parts of it would be gone when I try to explain to others. All though, I knew that working in a team is easier and has its own benefits, this process taught me that you can achieve your desired goals by yourself, as long as you are able to determine all application functionalities and processes in advance, and easily adapt to change when necessary. I have proven myself that I am able to do exactly that.

On a more technical side, I have improved my JavaScript and Angular skills greatly, which has been a personal goal for me. Another goal I have completed is to learn how an application can communicate with APIs without exposing API key. Most importantly, and that was the most fun I had at the beginning, was the ability to write MySQL queries, which I haven't done in that complexity since college. I have confirmed to myself that I am able to take on any technology and use it, regardless of my previous experience with it. Started in front-end development area in my professional expertise, I am going to full-stack development and I have TiDB Hackhaton to thank to.

Some of specific things I have learned:

  1. Implement and use BreakpointObserver in Angular
  2. Chain promises in asynchronous way
  3. Importance of [ng-class]
  4. Implement mat-input with mat-option (mat-autocomplete)
  5. Netlify redirect options
  6. Getting the largest numerical value in the object
  7. Learn about TiDB transaction mechanisms and AI-driven capabilities

What's next for Color Healing

A lot of advancement and improvement to be continued:

  1. Code refactoring
  2. Improving the existing features
  3. Adding additional data visualizations
  4. Adding more color animations
  5. Extending the data to include more emotions and colors
  6. Improving the overall UI/UX
  7. Creating and selling a commercial product

Built With

Share this project:

Updates