Chromic: A Color Palette Generator

Building Chromic was a journey in taking a simple design concept and turning it into a functional, production-ready tool. My main goal was to practice building a clean, responsive web product using React and TypeScript while refining the developer experience.

The Vision and Build Process

The core idea was to create a specialized color palette generator that uses Tetradic (square) color harmonies to ensure the generated colors always feel balanced and professional. As a Designer, it’s very important for me to find a very nice, harmonic color palette for my projects, and I thought I could combine that need with my desire to practice my useState knowledge in React. So, in a way, killing two birds with one stone (just figuratively, please, don’t kill birds).

• Mind over Matter (Logic over Luck): Instead of just picking random numbers, the app uses the colortranslator library to calculate mathematically harmonious colors based on a single random starting point.
• Component Architecture: The app was built using a modular approach. A parent "Brain" component handles the logic and state, while "Dumb" components like ColorCard focus purely on the visual presentation and user interaction.
• User Experience Focus: Beyond just looking at colors, I wanted the app to be useful. This led to the implementation of a "Click to Copy" feature, giving users an immediate way to grab hex codes for their own projects.

Notification Message powered crafted using Toastify

Hurdles and Technical Growth

Even with a "small" app, the development process revealed several challenges that required a deeper understanding of how modern web frameworks operate. That’s fancy wording for reading documentation, googling, and reading dev forums.

1. The Infinite Loop Trap

One of the most significant learning moments occurred when the app started crashing because of too many re-renders. I discovered that placing state-updating logic directly in the body of a component causes it to trigger itself repeatedly.

• Learning Point: This reinforced the importance of Event-Driven logic. I learned to move "actions" (like generating a new palette) into specific handler functions that only fire when a user clicks a button, rather than during the rendering process itself.

2. The "Handshake" Between Components

Another hurdle was getting the "Click to Copy" feature to work across different files. I faced issues where the parent component knew what to copy, but the child component (the card) didn't know when the user had clicked.

• Learning Point: This was a masterclass in Lifting State Up and Prop Drilling. I learned in the Frontend Developer Certification by Meta how to pass functions as variables from a parent to a child, allowing the child to "report back" to the parent when an action occurs. I think this was a point where I got really hooked up (pun intended) on React, and its ability to maintain a single source of truth.

3. TypeScript's Strict Safety

Using TypeScript added a layer of complexity, especially when working with third-party libraries like react-toastify. I encountered several errors where the data types didn't match what the library expected. Fortunately, I just finished a couple of TypeScript courses in Platzi that showed me how to solve that.

• Learning Point: I learned how to define Interfaces to strictly dictate what kind of data a component should receive. This makes the code much more robust and prevents "silent" bugs that would usually only appear after the app is live. I have to say I’m growing fond of TypeScript with each project.

Deployment and Automation

The final challenge was moving the app from my local machine to the web. This involved setting up a CI/CD pipeline (Continuous Integration/Continuous Deployment) using GitHub Actions.

• The Deployment Hurdle: The initial deployment resulted in a 404 error because the automated "server" didn't know how to navigate the project structure.
• Learning Point: I learned how to configure Vite's base path and the precise folder structure required for GitHub Actions to successfully build and host a modern JavaScript application.

Chromic is now live, serving as a testament to the "Build in Public" philosophy, where every bug is just a hidden lesson in better software architecture.