Greetings to our tech-savvy TrickyKeys community! Our captivating UI didn't just materialize out of thin air. Let's embark on a journey to understand our alliance with Storybook, and how we can leverage an integration with Chromatic for visual regression testing and component previewing.

 is a workshop for building UI components and pages in isolation that supercharges component-driven development.

At TrickyKeys, we're big believers in the principle of separation of concerns, especially when it comes to our components. By leveraging Storybook, we focus first on creating "dumb" components — those that are purely presentational, devoid of any embedded business logic. This allows our team to concentrate solely on the component's design, ensuring that its rendering to the DOM is pixel-perfect and consistent across various scenarios.

Once we've nailed the aesthetic and functional aspects of these components, we can confidently integrate them with "smart" components or pages. This strategy ensures a clear delineation between design and functionality, streamlining our development process and ensuring that both design fidelity and functional integrity are maintained.

To install Storybook to your repository, first open a terminal and navigate to your project:

Alternatively, if you're creating a new project you can start a new React app using the following command (don't forget to navigate to the new directory you create):

Next, install storybook into your repository:

It's that simple! Now let's take a look at how we can add our components into our Storybook environment.

First things first, build your component as you usually would in your preferred framework or library (React, Vue, Angular, etc.). Let's kick off with something simple, a basic button component in React:

For each component you want to showcase, create a corresponding .stories.js (or .stories.tsx for TypeScript) file. This is where you'll define the various "stories" or states of your component:

As your component library grows, it's useful to organize stories using folders. For instance, Button.stories.js might live under a components directory, resulting in a structure like:

Now you've successfully added a component into Storybook, you can view your the component in the Storybook environment. You should find it much simpler to quickly review your components in isolation, and iterate on it without the distraction of your other beautiful UI components!

 builds upon Storybook, offering a cloud service for UI testing and review. It's a tool we can't rave enough about.

Chromatic seamlessly meshes with Storybook. After setting up Storybook, installing Chromatic is as easy as:

With every PR, Chromatic automatically captures snapshots, making visual regressions easy to spot. Not only that, but Chromatic also offers a visual diff tool, so any changes made are explicitly highlighted. If a component changes visually, we get notified.

Reviewing components just got 100x easier! Each Storybook build gets it's own unique link, enabling engineers and designers to preview components without diving into the codebase or waiting for local setups. Instant feedback is now a reality.

To make things even simpler, Chromatic even supplies a 

 to automatically deploy preview environment on each PR commit, meaning your latest Storybook build is always just one click away!

Using Storybook and Chromatic, we realized several advantages:

 Every PR is automatically checked for visual anomalies, ensuring a consistent UI.

 Instead of manual UI checks, we rely on automated visual tests. This expedited our release cycles.

 Designers can review actual components, not just mockups. This strengthened our designer-developer synergy.

With Storybook as our design playground and Chromatic safeguarding our visuals, our UI/UX process became streamlined and efficient. Every component crafted and every design decision made, bore the hallmark of precision.

Want more insights? Stick around! The TrickyKeys development journey is filled with learnings and experiences we can’t wait to share.

TrickyKeys utilized Storybook for UI component development and integrated Chromatic for automated visual testing and seamless design reviews.

Getting started with Storybook

Hello to all keyboard and typing enthusiasts! We're thrilled to lift the curtain on our passion project and introduce you to 

 - a game where your typing prowess is both your weapon and your shield.

From the outset, our vision for TrickyKeys was clear: to create an engaging multiplayer typing experience that was as thrilling as it was educational. Gone are the days when typing was a mundane skill practiced in isolation. With TrickyKeys, each keystroke becomes a step closer to victory.

For the uninitiated, here's a brief rundown:

 with fellow typists from around the world. Challenge friends, rivals, or take on the TrickyKeys community at large.

. We've put painstaking attention into designing environments that captivate as you type.

 through detailed metrics. Every duel, every challenge becomes a stepping stone to becoming a better typist.

. Represent yourself in the TrickyKeys arena and stand out from the crowd.

So, how can you dive into this electrifying world of fast-paced typing duels?

We're excited to announce that while TrickyKeys is in its final development stages, 

early access is available to those who join our Discord community

. Not only will you get a first-hand experience of TrickyKeys, but you'll also be able to provide invaluable feedback, interact with our development team, and shape the future of the game!

Thank you for joining us on this journey. Your support and enthusiasm fuel our development, and we can't wait for you to experience the rush of a TrickyKeys duel. Whether you're here for the competition, the improvement, or simply the love of typing - welcome to the TrickyKeys family!

Stay tuned for more updates, behind-the-scenes glimpses, and tips to elevate your typing game.

The thrilling multiplayer typing game set in captivating landscapes. Join our Discord community for exclusive early access and shape the future of this exhilarating experience!

Getting started with Storybook

Introducing TrickyKeys