ColorMatch

Inspiration

After attending the React Workshop we were very interested in using the software for our own project, and we wanted to make something very chill and happy for users to have fun with, so we created this nifty color matching game!

What it does

ColorMatch is a fun game where a user can enter in rgb values and try to match it to the color of the button their given. Once they accomplish that they get a fun celebratory message of congratulation. The user can keep practicing for however long they want by changing the button color which is randomly picked.

How we built it

We developed the application using React for the frontend, leveraging its component-based architecture for a responsive UI. Node.js served as the backend, handling server-side logic and ensuring smooth communication with the client. To enhance user experience, we implemented dynamic color matching with RGB input and utilized luminosity calculations to adjust font color, ensuring text remains readable against varying background colors. This combination of technologies and features created an engaging and accessible application.

Challenges we ran into

We struggled with ensuring that text remained readable against varying background colors, which involved calculating luminosity for font colors. Integrating React with our Node backend also posed some challenges, requiring careful state management. Debugging these issues took more time than we expected, but it ultimately improved our final product.

Accomplishments that we're proud of

We successfully created a dynamic color-matching app using React and Node, allowing users to interactively learn about RGB values. After pivoting to this idea late in the process, we’re proud to have delivered a fun finished product for users to enjoy!

What we learned

We gained valuable experience in using React and Node to build interactive applications, as well as insights into color theory and its practical applications. We learned the importance of user feedback in refining our design and functionality. Additionally, adapting our project mid-way taught us to be flexible and prioritize teamwork in overcoming challenges :)