How I Built My First Play For ReactPlay

Hello everyone! Welcome back to another article. Recently, I joined a platform for React developers called ReactPlay. It is an open-source online platform for learning, building and sharing React projects. I discovered ReactPlay about a month ago and tweeted about it, but I couldn't join/contribute to it because I was already working on the Hashnode X PlanetScale hackathon project.

So a few days after submitting my hackathon project, I was ready to join the platform. Firstly, I starred the repository, forked it and joined the discord community. Then I had to decide how I can actually share contributions to it. I looked at some issues but I was hesitant to fix them because I wasn't yet comfortable working with the project. Luckily, ReactPlay is a platform where anyone can create small/big projects(plays) and share/host the play on ReactPlay. So I went with this idea because unlike bugs, I wasn't working with something internal/core to the project. Instead, you'd build a play as a personal project and make it a part of the platform.

So in this article, I'll be sharing how I built my play and hopefully you can build a similar tool too. So without any further ado, let's dive in.

What did I build?

Since this was my first play on this platform, I thought I'd go with something simple. So I decided to build React Gradients, a tool to discover gradients that you can easily use in your application either by copying the CSS or TailwindCSS code for it. You can also use the individual colors that are used in each gradient.

Although there are already some incredible tools out there like uiGradients, Gradient Hunt and CSS Gradients that provide similar functionalities, they only provide you with the CSS and color codes. Since I'm using Tailwind lately, I decided a tool like this for TailwindCSS should also exist. Hence the reason for building this play.

Note:- Here onwards, whenever I use the word "play" I'm referring to the word "project".

How I built it

Building a tool like React Gradients is very simple. The method you use to build a tool like this might vary, so here's my way of building it:

• Firstly, create the data that you are going to need to use in the application.
  • To do this, you can store the data as objects in a .json file in your root folder. (something like gradients.json)
• Then you have to import the data from the JSON file.
  • To do this, you can either import the JSON file the way you normally import React components(import gradients from './gradients.json').
  • Or, you could serve this JSON file through an API which then you consume in your application. This is the best way in my opinion, but I still used the normal way when building React Gradients, just to keep it simple.
• Now that we have the data in our application, we need a logic to display each gradient from the data.
  • To achieve this, I used the .map() function to loop the data and get each object.
  • In the data I created, I set the following properties for each gradient.
    • name - The Name of the gradient
    • tailwind - The TailwindCSS code for the gradient.
    • css - The CSS code for the gradient.
    • colors - A list of colors used in the gradient.
  • So, according to my data, here's how the .map() logic looks:

    {gradients.map((gradient, index) => (
        <GradientComponent
             index={index}
             name={gradient.name}
             css={gradient.css}
             tailwind={gradient.tailwind}
             colors={gradient.colors}
           />
    ))}
    

• That's it for the "complex" part and now we start with the aesthetics.
  • As I showcased above, you could use the .map() to "map" each gradient to a custom React component to which you can pass each property of the gradient/object as props to be used for styling and stuff or simply use a <div> element. It's totally up to you.
• And finally I created a function to copy the CSS/TailwindCSS/color codes.
  • Here's how you can do it:

    const copyCode = async (codeToCopy, message) => {
      await navigator.clipboard.writeText(codeToCopy);
      toast(`Copied ${message}`, {
        icon: "📋",
        style: {
          backgroundColor: "#010326",
          color: "#00f2fe",
        },
      });
    };
    

• Some extra functionalities:
  • I also used react-hot-toast in my play for sending out a feedback toast when the copy function is called. A functionality like this is totally optional if you are building a tool like React Gradients, but it adds some nice touches.

Thanks for reading!

And that's it for today's article. Thank you so much for reading, if you learned something new from this, consider liking and sharing it with others. If you think that there's a better way to build a tool like this, please let me know in the comments down below. I also would like to take this opportunity to thank Tapas Adhikary for building and maintaining ReactPlay. And even though it has been only like 2 or 3 weeks since joining the platform, I have learned a lot more than just about React thanks to this supportive community and its amazing members.

Here are some useful links to the ReactPlay platform:

• Website - reactplay.io
• GitHub Repository - github.com/reactplay/react-play
• Twitter - twitter.com/reactplayio
• Discord - discord.gg/vrTxWUP8Am
• Blog - blog.reactplay.io

And finally as always, if you have any questions or feedback let me know in the comments down below and follow me on Twitter for more updates on my journey, tips and tricks about programming. Ciao 👋

P.S. By the time I finished writing this article, I also built a standalone API to serve the gradients data. Check it out and let me know your feedback. And if you'd like to see an article on how to build an API with Node.js, Express and Firebase, let me know in the comments.