DEV Community: Aleks Popovic

Easy Customizable Star Rating Component in React

Aleks Popovic — Wed, 15 Nov 2023 15:36:58 +0000

In this tutorial you will learn how to set up a simple, yet pretty customizable star rating component in React. You know those little stars that you use to rate stuff all over the internet? We will build those as a default use-case, but we will also add support for other text-based and emoji-based icons that you can use instead of little yellow stars.

If you would prefer a video version of this tutorial you can watch me build this component in React on Youtube:

I started a new React app through Vite by running:

yarn create vite

If you don't use yarn you can find detailed scaffolding instructions on Vite's Getting Started page.

For this component we won't use any additional libraries, so we can jump straight into it.

I created a file for my component and I called it Stars.jsx. I also created a separate styles file which I called Stars.css. Since this is a simple mini project I've left them in the /src/ folder, so if you are plugging these into your existing project you will have to make some adjustments.

I started off by adding some simple CSS to my App.css file, which I used to set up the page background color and to center stuff on screen. If you plan to add this component to an existing project you can skip this step.

//App.css

body {
  background: rgb(39, 39, 39);
  color: white;
}

#root {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;

  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

We will initialize the Stars.jsx component and add some default properties and props to it.

// Stars.jsx

import "./Stars.css";

const DEFAULT_COUNT = 5;
const DEFAULT_ICON = "★";
const DEFAULT_UNSELECTED_COLOR = "grey";
const DEFAULT_COLOR = "yellow";

export default function Stars({ count, defaultRating, icon, color, iconSize }) {
  return (
    <div className="starsContainer"></div>
  );
}

The idea here is that we want our use-case to be the 5/5 yellow star rating component, so we need to set up our default properties to reflect that. We will continue with setting up our state and mapping out an appropriate number of stars.

// Stars.jsx

import "./Stars.css";
import { useState } from "react";

const DEFAULT_COUNT = 5;
const DEFAULT_ICON = "★";
const DEFAULT_UNSELECTED_COLOR = "grey";
const DEFAULT_COLOR = "yellow";

export default function Stars({ count, defaultRating, icon, color, iconSize }) {
  const [rating, setRating] = useState(defaultRating);
  const [temporaryRating, setTemporaryRating] = useState(0);

  let stars = Array(count || DEFAULT_COUNT).fill(icon || DEFAULT_ICON);

  return (
    <div className="starsContainer">
      {stars.map((item, index) => {
        return (
          <div className="star" key={index}>
            {icon ? icon : DEFAULT_ICON}
          </div>
        );
      })}
    </div>
  );
}

We will use temporaryRating as a helper property to visually display which rating will be set once we click on a star, and we will track that final rating in the rating property.

We are setting up an array which has the number of elements that we need and we are mapping through it to create new elements which contain our stars, or a different icon that we've set. Now would be an appropriate time to quickly jump into our Stars.css file and add some very light CSS which will fix our stars not being properly positioned.

.starsContainer {
  display: flex;
}

.star {
  cursor: pointer;
  transition: all 0.1s linear;
}

.star:hover {
  transform: scale(1.1);
}

I told you it's going to be light. We are just adding flex to our container to make the stars fit in a single row by default. We are also adding a slight transition effect on hover where we are bumping the icon size a bit when me mouse over it.

We can now go back to the component. Our next order of business is to determine when and how to change our icon color from grey to yellow (or any other color that you've set up through props).

// .starsContainer in Stars.jsx

<div className="starsContainer">
  {stars.map((item, index) => {
    const isActiveColor =
      (rating || temporaryRating) &&
      (index < rating || index < temporaryRating);

    let elementColor = "";

    if (isActiveColor) {
      elementColor = color || DEFAULT_COLOR;
    } else {
      elementColor = DEFAULT_UNSELECTED_COLOR;
    }

    return (
      <div className="star" key={index}>
        {icon ? icon : DEFAULT_ICON}
      </div>
    );
  })}
</div>

We will use isActiveColor as a helper property to figure out when should the icon have the "active" color. There are two main parts to it.

The first one says we need to have a rating or a temporary rating. If we don't have any rating set up then there is no need to change the color of any icon. The rating covers the use-case of loading the component which already has its state set up, and the temporaryRating covers the use-case of using our mouse to hover the component and preview the rating which we want to set.

The second part compares our current icon's index to rating and temporaryRating. Since array index in JavaScript starts from 0 we need to make sure the index has a strictly smaller value then our two ratings. For example, if our rating is 1/5 we need to color just the first star, which has the index of 0, which is smaller than 1.

Now that we know when the icon should have the "active" color we can use elementColor as a helper property to set the appropriate color. If we've passed in the color prop we will use that, otherwise we will use the DEFAULT_COLOR. If "active" color does not need to be set then we use the DEFAULT_UNSELECTED_COLOR. We can now proceed with actually using these properties to change the look of our icons.

// return statement in Stars.jsx

return (
  <div
    className="star"
    key={index}
    style={{
      fontSize: iconSize ? `${iconSize}px` : "14px",
      color: elementColor,
      filter: `${isActiveColor ? "grayscale(0%)" : "grayscale(100%)"}`,
    }}
  >
    {icon ? icon : DEFAULT_ICON}
  </div>
);

Remember we want to cover both the text based icons such as ★ or ❤, but also emoji based icons such as 🌷 or 😍. To do this we can add the style prop and directly set the color to our elementColor. This covers the text icons, but won't affect the emojis which are going to render in their full color. For that we need to conditionally set the filter to grayscale(100%) when the "active" color isn't being set, which will grey out emojis, or to grayscale(0%) when we are setting the "active" color, but in this case we are just resetting the filter.

Technically, you could go just with the filter approach and ditch the elementColor, which will work on the text based icons as well, but the shade of grey will depend on the active color, so your icons might look brighter or darker depending on which base color you chose.

Additionally, we are setting our fontSize to an appropriate value if we passed in the iconSize prop. If not we are setting it to 14px by default, which you could also separate into its own DEFAULT_ICON_SIZE property if you wanted to.

Next step is to make these colors apply on hover and on click.

// return statement in Stars.jsx

return (
  <div
    className="star"
    key={index}
    style={{
      fontSize: iconSize ? `${iconSize}px` : "14px",
      color: elementColor,
      filter: `${isActiveColor ? "grayscale(0%)" : "grayscale(100%)"}`,
    }}
    onMouseEnter={() => setTemporaryRating(index + 1)}
    onMouseLeave={() => setTemporaryRating(0)}
    onClick={() => handleClick(index + 1)}
  >
    {icon ? icon : DEFAULT_ICON}
  </div>
);

When we mouse over the icons we need to set and reset our temporaryRating. When we first hover it we use onMouseEnter to set the temporaryRating to index + 1 because, as you remember, our index will always be 1 lower than the actual rating. Once we move our mouse outside of the icon we use onMouseLeave to set temporaryRating back to 0, so it doesn't get stuck on the last hovered value.

Finally, we use onClick to call a new function called handleClick which will set the final rating to index + 1. Inside of this function we will also store our final value in localStorage so it will persist afer refreshing the page. Here is what that function looks like.

// handleClick function in Stars.jsx

const handleClick = (rating) => {
  setRating(rating);
  localStorage.setItem("starRating", rating);
};

We are doing this just for this example, to show what would be the final behavior for a single component. In production you would need to modify this to connect to your actual database where you keep the record of all of your different ratings. Otherwise, all your rating components will be set to the same value. Here is the final look of the full Stars.jsx file.

// Stars.jsx

import "./Stars.css";
import { useState } from "react";

const DEFAULT_COUNT = 5;
const DEFAULT_ICON = "★";
const DEFAULT_UNSELECTED_COLOR = "grey";
const DEFAULT_COLOR = "yellow";

export default function Stars({ count, defaultRating, icon, color, iconSize }) {
  const [rating, setRating] = useState(defaultRating);
  const [temporaryRating, setTemporaryRating] = useState(0);

  let stars = Array(count || DEFAULT_COUNT).fill(icon || DEFAULT_ICON);

  const handleClick = (rating) => {
    setRating(rating);
    localStorage.setItem("starRating", rating);
  };

  return (
    <div className="starsContainer">
      {stars.map((item, index) => {
        const isActiveColor =
          (rating || temporaryRating) &&
          (index < rating || index < temporaryRating);

        let elementColor = "";

        if (isActiveColor) {
          elementColor = color || DEFAULT_COLOR;
        } else {
          elementColor = DEFAULT_UNSELECTED_COLOR;
        }

        return (
          <div
            className="star"
            key={index}
            style={{
              fontSize: iconSize ? `${iconSize}px` : "14px",
              color: elementColor,
              filter: `${isActiveColor ? "grayscale(0%)" : "grayscale(100%)"}`,
            }}
            onMouseEnter={() => setTemporaryRating(index + 1)}
            onMouseLeave={() => setTemporaryRating(0)}
            onClick={() => handleClick(index + 1)}
          >
            {icon ? icon : DEFAULT_ICON}
          </div>
        );
      })}
    </div>
  );
}

Final thing left is to actually use our new component. In my example I will just import it to my App.jsx alongside a localStorage check to see if we already have a defaultRating that we need to pass in.

// App.jsx

import "./App.css";
import Stars from "./Stars";

function App() {
  const defaultRating = localStorage.getItem("starRating");

  return (
    <Stars defaultRating={defaultRating} />
  );
}

export default App;

To test out other props and customize your new rating component you can try one of these setups, or a combination of them.

<Stars icon="❤" color="red" defaultRating={defaultRating} /> // 5/5 red hearts component
<Stars icon="😍" defaultRating={defaultRating} /> // 5/5 smiley face with hearts for its eyes component
<Stars icon="🌷" defaultRating={defaultRating} count={10} /> // 10/10 flower component

And with that our (star) rating component is finished. It is light and fairly customizable, but depending on your use-case you might want to add more functionalities or customizations to it. Technically, this component will work with svg files and images, but you will need to take care of resizing them with CSS.

Have fun with messing around with it, and if you do end up using or even improving this component send me a message, as I would love to see and hear about your creations!

If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that's your cup of tea feel free to support me by subscribing.

Address Search with React and Mapbox API

Aleks Popovic — Thu, 09 Nov 2023 17:32:26 +0000

If you need a quick and simple solution for address search with autocomplete and geocoding this one is for you.

To set up this project you will need to get a Mapbox API key, or token, as they call it, from their official website. You can get started for free and use the API up to a limit, which is pretty generous, at least for a prototype app. You will have up to 100,000 free Search API requests (used for address search and autocomplete suggestions) and up to 50,000 free Map API requests (used for loading/generating a map of the selected location), after which you will have to pay to continue using the service. For this reason you will be asked to enter your credit card details in order to be able to get your API key, so be prepared for that.

If you would prefer a video version of this tutorial you can watch me build the Address Search app with React and Mapbox on Youtube:

I started a new React app through Vite by running:

yarn create vite

If you don't use yarn you can find detailed scaffolding instructions on Vite's Getting Started page.

For this project we are going to use several additional packages - axios, mapbox-gl, react-map-gl and sass. Axios is going to be used for fetching the autocomplete suggestions and isn't necessary if you don't want to use it. Sass is optional as well. I use it as a personal preference, but you can do the whole project with vanila CSS if you want to, just make sure to adjust your selectors accordingly. To install all of them run:

yarn add axios mapbox-gl react-map-gl sass

npm install axios mapbox-gl react-map-gl sass

I am also going to use an image for the map pin, or marker, which you can grab from my GitHub repo if you want to use the same one. Make sure to put it in your /src/assets folder.

Final peace of setup that you need to do before continuing is configuring your environment variable. If you are working with Vite like me you need to create a new file called .env.local in your project's root and add this property to it.

VITE_TOKEN = "YOUR_MAPBOX_TOKEN"

Make sure to replace the string with your actual Mapbox token. Your variable need to be prefixed with VITE_, so make sure to not remove that part. Bare in mind that this will make your token visible in the client if you intend to publish this app somewhere, or add this functionality to your existing web app. To prevent the misuse of your token Mapbox has in place a couple of options, such as limiting the scope of functionalities that can be accessed with the token, and also restricting the token use to a specific URL. As the safest option you can choose to handle all of the API stuff in the backend, which is out of the scope of this tutorial. After you have your token in place we can proceed with creating components.

To start off I made a new folder called components and in there I added three new components called AddressForm.jsx, AutoCompleteInput.jsx and Map.jsx. Each component has its own .scss file with the same name and I've put all of them in a new folder called styles. To being I've imported AddressForm and Map components into App.jsx, and added some simple state handling. Here is what the App.jsx looks like.

// App.js

import "./App.scss";
import AddressForm from "./components/AddressForm";
import Map from "./components/Map";
import "mapbox-gl/dist/mapbox-gl.css"; 
import { useState } from "react";

function App() {
  const [address, setAddress] = useState({
    streetAndNumber: "",
    place: "",
    region: "",
    postcode: "",
    country: "",
    latitude: "",
    longitude: "",
  });

  const handleFormSubmit = (event) => {
    event.preventDefault();

    if (address.streetAndNumber) {
      console.log("Selected address:", address);
    }
  };

  const updateCoordinates = (latitude, longitude) => {
    setAddress({ ...address, latitude, longitude });
  };

  return (
    <div className="App">
      <AddressForm
        onSubmit={handleFormSubmit}
        address={address}
        setAddress={setAddress}
      />
      {address.longitude && address.latitude && (
        <Map
          longitude={address.longitude}
          latitude={address.latitude}
          updateCoordinates={updateCoordinates}
        />
      )}
    </div>
  );
}

export default App;

Don't forget to import mapbox-gl/dist/mapbox-gl.css, as this is additional styling required for the map to render properly.

We are setting our state to an object which contains all of the address properties we will be getting from the API, and we are initializing them to an empty value.

The handleFormSubmit is an optional function which you can skip if you don't need it. We are using it to confirm our final address has been set after selecting one of the autocomplete suggestions and submitting the form, but also after manually changing one of the inputs and then submitting.

In case you want to manually adjust the map marker position in the end, and consequently the final map coordinates - we will use the updateCoordinates function which keeps the old state and changes just the latitude and longitude.

We will display the Map component conditionally, only if we have the address coordinates in place. We are also passing in several props to both components.

Here is what the AddressForm component looks like.

// AddressForm.jsx

import "../styles/AddressForm.scss";
import AutoCompleteInput from "./AutoCompleteInput";

export default function AddressForm({ address, onSubmit, setAddress }) {
  const handleManualInputChange = (event, stateProperty) => {
    const newAddress = { ...address };
    newAddress[stateProperty] = event.target.value;

    setAddress(newAddress);
  };

  return (
    <form className="form" onSubmit={onSubmit}>
      <label htmlFor="address">Address</label>
      <AutoCompleteInput
        setAddress={setAddress}
        handleManualInputChange={handleManualInputChange}
        streetAndNumber={address.streetAndNumber}
      />

      <label htmlFor="city">City</label>
      <input
        type="text"
        id="city"
        placeholder="City"
        value={address.place}
        onChange={(event) => handleManualInputChange(event, "place")}
      />

      <label htmlFor="state">State/Province/Region</label>
      <input
        type="text"
        id="state"
        placeholder="State/Province/Region"
        value={address.region}
        onChange={(event) => handleManualInputChange(event, "region")}
      />

      <label htmlFor="postcode">Postcode</label>
      <input
        type="text"
        id="postcode"
        placeholder="Postcode"
        value={address.postcode}
        onChange={(event) => handleManualInputChange(event, "postcode")}
      />

      <label htmlFor="country">Country</label>
      <input
        type="text"
        id="country"
        placeholder="Country"
        value={address.country}
        onChange={(event) => handleManualInputChange(event, "country")}
      />

      <div className="buttons">
        <button type="submit" className="confirm-button">
          Confirm
        </button>
        <button
          type="reset"
          className="reset-button"
          onClick={() =>
            setAddress({
              streetAndNumber: "",
              place: "",
              region: "",
              postcode: "",
              country: "",
              latitude: "",
              longitude: "",
            })
          }
        >
          Reset
        </button>
      </div>
    </form>
  );
}

It looks big, but it's mostly just a form with several input fields and their labels. We are also importing our AutoCompleteInput which we will implement next.

All inputs have an onChange event which calls our handleManualInputChange function which takes in the property name that needs to be manually changed in our state and sets it to the input's value. We are also passing in this function as a prop to the AutoCompleteInput component which will also implement it.

There is also a reset button which just resets our address state to our default object with empty address properties. We can now continue with setting up the AutoCompleteInput component which looks like this.

//AutoCompleteInput.jsx

import "../styles/AutoCompleteInput.scss";
import { useState } from "react";
import getPlaces from "../API/getPlaces";

export default function AutoCompleteInput({
  handleManualInputChange,
  setAddress,
  streetAndNumber,
}) {
  const [suggestions, setSuggestions] = useState([]);

  const handleChange = (event) => {
    handleManualInputChange(event, "streetAndNumber");
    handleInputChange(event.target.value);
  };

  const handleInputChange = async (query) => {
    const suggesions = await getPlaces(query);
    setSuggestions(suggesions);
  };

  const handleSuggestionClick = (suggestion) => {
    const streetAndNumber = suggestion.place_name.split(",")[0];
    const latitude = suggestion.center[1];
    const longitude = suggestion.center[0];

    const address = {
      streetAndNumber,
      place: "",
      region: "",
      postcode: "",
      country: "",
      latitude,
      longitude,
    };

    suggestion.context.forEach((element) => {
      const identifier = element.id.split(".")[0];

      address[identifier] = element.text;
    });

    setAddress(address);
    setSuggestions([]);
  };

  return (
    <div>
      <div className="autoCompleteInputContainer">
        <input
          id="address"
          type="text"
          placeholder="Address"
          value={streetAndNumber}
          onChange={handleChange}
        />
        <ul className="addressSuggestions">
          {suggestions?.map((suggestion, index) => (
            <li key={index} onClick={() => handleSuggestionClick(suggestion)}>
              {suggestion.place_name}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

We have an input which implements our handleManualInputChange function, but also calls our getPlaces function which we will use to fetch the address suggestions, which we will then store with useState. We will map out every suggestion in a list below the input and assign to each of them an onClick event which will handle getting all of the address properties from that suggestion and storing our newly selected address in state.

To get the streetAndNumber we need to split suggestion.place_name property over a comma, because only the first part before the comma is the actual street name and the address number.

Latitude and longitude are stored in suggestion.center property which is an array with just those two values.

Rest of the properties we need to extract from suggestion.context property, which is an array of objects which have two properties inside - id and text. The id has values which correspond to our address property names, but they also have a dot followed buy a three digit number. For example, an id might have values such as place.346, or country.834, or region.772. That's why we are splitting this value over the . and taking the first value, which is our property name. Then we are setting that property name in our state to the text value, which is our actual country, city etc.

Once all of the existing properties are set we update our address state, and clear our suggestions state.

In order for this to work we must now implement our getPlaces function which will fetch our addresses.

// getPlaces.js

import axios from "axios";

export default async function getPlaces(query) {
  try {
    const response = await axios.get(
      `https://api.mapbox.com/geocoding/v5/mapbox.places/${query}.json`,
      {
        params: {
          access_token: import.meta.env.VITE_TOKEN,
        },
      }
    );

    return response.data.features;
  } catch (error) {
    console.error("There was an error while fetching places:", error);
  }
}

We are using the value from the input as our query value that will be searched through the API call. We also need to pass in our access_token as a parameter, and return response.data.features property, which is a list of our matching addresses. If there is an error we handle it in the catch block.

If you go back and start typing into the AutoCompleteInput you should get back suggestions from the API, and if you click on one of them it should get stored in our state. But, we still have one more step, and that is generating a map that points to our selected address, so let's implement our Map component.

// Map.jsx

import "../styles/Map.scss";
import PointerIcon from "../assets/pointer.svg";
import ReactMapGl, { Marker } from "react-map-gl";
import { useState, useEffect } from "react";

const TOKEN = import.meta.env.VITE_TOKEN;

function Map({ longitude, latitude, updateCoordinates }) {
  const [viewport, setViewport] = useState({
    latitude,
    longitude,
    zoom: 16,
  });

  const [marker, setMarker] = useState({
    latitude,
    longitude,
  });

  useEffect(() => {
    setViewport((oldViewport) => ({
      ...oldViewport,
      latitude,
      longitude,
    }));
  }, [latitude, longitude]);

  const handleMarkerDrag = (event) => {
    const latitude = event.lngLat.lat;
    const longitude = event.lngLat.lng;

    setMarker({ latitude, longitude });

    updateCoordinates(latitude, longitude);
  };

  return (
    <div className="map">
      <ReactMapGl
        {...viewport}
        mapboxAccessToken={TOKEN}
        mapStyle="mapbox://styles/mapbox/streets-v12"
        onMove={(event) => {
          setViewport(event.viewState);
        }}
      >
        <Marker
          latitude={marker.latitude}
          longitude={marker.longitude}
          draggable={true}
          onDragEnd={handleMarkerDrag}
        >
          <img className="marker" src={PointerIcon} />
        </Marker>
      </ReactMapGl>
    </div>
  );
}

export default Map;

Viewport is a configuration object for the ReactMapGl component. At it's most basic setting it should contain at least your latitude and longitude so it knows where to center the map view. If you remember, we are rendering our Map component conditionally only if there are existing coordinates in our state, so the default state values for viewport should be properly handled through our props. The zoom property handles the zoom level of the map, which you might adjust based on your preferences and use-case.

We are also handling marker coordinates in a separate state. You don't necessarily need to do this, but depending on if you want to handle your viewport and marker separately you might want to.

In order to generate the map we must use the mapboxAccessToken prop in ReactMapGl and set its value to our Mapbox token. The mapStyle prop determines the look and style of the map, and if you want to use a different map type you can find other values in Mapbox's documentation on their website.

The onMove prop handles the panning or dragging of the map. The event that gets automatically passed to us has a viewState property which we can use to set our viewport to our new value which will re-center the map to that point.

Inside of ReactMapGl component we are adding the Marker component. Both of these are a part of the react-map-gl package. Marker has props for longitude and latitude which determine its position. We are also setting its draggable prop to true, so it can be dragged, and onDragEnd is the prop which handles what happens when we are done dragging the marker, so we are passing our handleMarkerDrag function to it. This function updates our marker's coordinates, and also our address coordinates, which will update the viewport and re-center our map to marker's new location. If you don't want for your map to move with the marker you would implement that part a bit differently.

Inside of the Marker we are adding an img element which uses our PointerIcon as its src. The Marker handles the marker's behaviour, and the img handles the marker's look.

That's it as far as our functionalities go. If you want to style the app the same way I did you can use the following code. Make sure to put all of these files in your styles folder, except for the App.scss. I won't go through them in detail as we are mainly just setting up some colors, centering things, and adding some additional space in the form of margins and paddings. If you are using vanila CSS for this just change your file extensions to .css and adjust the selectors accordingly.

// App.scss

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

body {
  margin: 0;
  background: linear-gradient(30deg, rgb(0, 39, 65), rgb(0, 91, 151));
  color: white;
  font-family: "Poppins", sans-serif;
}

#root {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.App {
  display: flex;
  width: 1000px;
  justify-content: center;
}

@media only screen and (max-width: 700px) {
  .App {
    flex-direction: column;
    align-items: center;
  }

  #root {
    justify-content: start;
  }
}

// AddressForm.scss

.form {
  display: flex;
  flex-direction: column;
  padding: 2em;
  margin-right: 3em;

  label {
    margin-bottom: 4px;
    width: 100%;
    text-align: left;
  }

  input {
    width: 250px;
    padding: 0.75em;
    margin-bottom: 0.5em;
    border: 1px solid white;
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
  }

  .buttons {
    display: flex;
    margin-top: 1em;

    button {
      padding: 1em 2em;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-family: "Poppins", sans-serif;
      background-color: rgb(0, 194, 120);

      &.confirm-button {
        margin-right: 1em;
      }

      &.reset-button {
        background-color: rgb(255, 65, 43);
      }
    }
  }
}

// AutoCompleteInput.scss

.autoCompleteInputContainer {
  position: relative;

  .addressSuggestions {
    position: absolute;
    top: 1.75em;
    background-color: white;
    border: 1px solid black;
    overflow: hidden;
    border-radius: 4px;
    color: black;
    z-index: 999;
    padding: 0;

    li {
      list-style: none;
      border-bottom: 1px solid black;
      padding: 0.5em 1em;

      &:hover {
        background-color: rgb(22, 66, 128);
        color: white;
        cursor: pointer;
      }
    }
  }
}

// Map.scss

.map {
  width: 400px;
  height: 400px;
  margin: auto 0;

  .marker {
    width: 50px;
    height: 50px;
  }
}

@media only screen and (max-width: 700px) {
  .map {
    margin-bottom: 2em;
  }
}

With that our Address Search app with autocomplete and map generation is finished. You can of course expand it with other interesting functionalities. You may want to add debounce or throttling to the AutoCompleteInput to prevent fetching the suggestions with each keyboard click. As discussed previously, you should handle the API key and calls in a more secure way if you decide to use this in production. You may also decide to handle the form submit in a better way that suits more to your use-case, instead of just logging the final address.

If you do end up improving this app send me a message. I would love to see your creations!

If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that's your cup of tea feel free to support me by subscribing.

Comic Book App With Marvel API and React

Aleks Popovic — Thu, 02 Nov 2023 23:10:44 +0000

I grew up on both DC and Marvel comic books, cartoons and TV shows. From the 1966 Batman series, to 1967 Spider man cartoons, and 1940s Superman cartoons, which were super old even in the 90s, but I guess that's what our TV companies could afford at the time.

Nowadays if I want to read a comic book I have no idea where to even begin. There are so many different characters, storylines and multiverses which may or may not be connected. Which got me thinking - what if I had a searchable comic book library where I could enter a character’s name and I would get all of their comic books from which I can pick and choose what to read?

The original idea was to make it searchable by both Marvel and DC characters but DC doesn't seem to have an official public API while Marvel does, so that will have to do for this project. For more general superhero information you can also use superheroAPI, but to get the comic book data we will use Marvel's official API. Before starting you should make sure you have set up your Marvel developer account and you have access to your private and public API keys, as we will need those later.

If you prefer a video version of this tutorial you can watch me build the comic book library app in React on Youtube:

I started a new React app through Vite by running:

yarn create vite

If you don't use yarn you can find detailed scaffolding instructions on Vite's Getting Started page.

For this project we are going to use two additional packages - sass for writing Sass, and md5 for hashing one of the parameters for our API request. To install them run:

yarn add sass md5

We are also going to use a couple of images in our styling which you can grab from my GitHub repo. Make sure to put them in your /src/images folder.

Final peace of setup that you need to do before continuing is configuring your environment variables. If you are working with Vite like me you need to create a new file called .env.local in your project's root and add these two properties to it.

VITE_PUBLIC_KEY = "YOUR_PUBLIC_KEY"
VITE_PRIVATE_KEY = "YOUR_PRIVATE_KEY"

Make sure to replace the strings with your actual public and private keys from the Marvel's developer portal. Your variables need to be prefixed with VITE_, so make sure to not remove that part. After that you can proceed with creating components.

To start off I made a new folder called components and in there I added a new component called Search.jsx and imported it into App.jsx. Here is what the App.jsx looks like.

// App.js

import "./App.css"
import Search from "./components/Search"

function App() {
  return (
    <div className="App">
      <Search />
    </div>
  )
}

export default App

The main purpose of the app is to be able to search comic book characters by their name. Once we select a character we should get a list of their comic books and clicking on a comic book should show us more details about that specific comic book.

Most of our app's logic is going to happen in the Search component, so here is what it should look like.

// Search.jsx

import "../styles/Search.scss"
import { useState } from "react"
import md5 from "md5"
import Characters from "./Characters"
import Comics from "./Comics"

export default function Search() {
  const [characterName, setCharacterName] = useState("")
  const [characterData, setCharacterData] = useState(null)
  const [comicData, setComicData] = useState(null)

  const publicKey = import.meta.env.VITE_PUBLIC_KEY
  const privateKey = import.meta.env.VITE_PRIVATE_KEY

  const handleSubmit = (event) => {
    event.preventDefault()
    getCharacterData()
  }

  const getCharacterData = () => {
    setCharacterData(null)
    setComicData(null)

    const timeStamp = new Date().getTime()
    const hash = generateHash(timeStamp)

    const url = `https://gateway.marvel.com:443/v1/public/characters?apikey=${publicKey}&hash=${hash}&ts=${timeStamp}&nameStartsWith=${characterName}&limit=100`

    fetch(url)
      .then(response => response.json())
      .then(result => {
        setCharacterData(result.data)
        console.log(result.data)
      })
      .catch(error => {
        console.log("There was an error:", error)
      })
  }

  const getComicData = (characterId) => {
    window.scrollTo({ top: 0, left: 0 })

    const timeStamp = new Date().getTime()
    const hash = generateHash(timeStamp)

    const url = `https://gateway.marvel.com:443/v1/public/characters/${characterId}/comics?apikey=${publicKey}&hash=${hash}&ts=${timeStamp}`

    fetch(url)
      .then(response => response.json())
      .then(results => {
        setComicData(results.data)
        console.log(results)
      })
      .catch(error => {
        console.log("Error while fetching comic data", error)
      })
  }

  const generateHash = (timeStamp) => {
    return md5(timeStamp + privateKey + publicKey)
  }

  const handleChange = (event) => {
    setCharacterName(event.target.value)
  }

  const handleReset = () => {
    setCharacterData(null)
    setComicData(null)
    setCharacterName("")
  }

  return (
    <>
      <form className="search" onSubmit={handleSubmit}>
        <input
          placeholder="ENTER CHARACTER NAME"
          type="text"
          onChange={handleChange}
        />
        <div className="buttons">
          <button type="submit">Get character data</button>
          <button type="reset" className="reset" onClick={handleReset}>
            Reset
          </button>
        </div>
      </form>

      {!comicData && characterData && characterData.results[0] && (
        <Characters data={characterData.results} onClick={getComicData} />
      )}

      {comicData && comicData.results[0] && <Comics data={comicData.results} />}
    </>
  )
}

The Search component might look a bit daunting but in essence it's not too complicated. We have a submittable form with an input text field and a few buttons. The input has an onChange event that is calling the handleChange function which is a very simple function in which we set the character's name through useState.

Submitting the form or clicking the submit button will call the handleSubmit function which calls the getCharacterData function. In getCharacterData we do several things. We reset our state and make a hashed timestamp which we need as one of the API parameters. We are doing this by combining the timestamp with our private and public API keys that we got from the Marvel's developer portal and passing them into md5 function which we are importing from the md5 package.

If you followed my .env file setup from the beginning you can use your environment variables with import.meta.env.VITE_PUBLIC_KEY and import.meta.env.VITE_PRIVATE_KEY.

We are conditionally showing Characters and Comics component at the bottom. The idea here is that we want to show Characters if we have character data. If we have the comic book data then we want to hide Characters and show only Comics.

We are passing in getComicData function into Characters component which is going to be used as an onClick event in there. The function is very similar to getCharacterData, but we are calling a different endpoint and this time we need the characterId as an additional parameter, because we are fetching only that character's comic books.

Finally, handleReset is used to reset all component state, as its name implies.

Here is what the Characters component looks like.

// Characters.jsx

import "../styles/Characters.scss"

export default function Characters({ data, onClick }) {
  return (
    <div className="characters">
      {data.map(character => {
        return (
          <div
            key={character.id}
            className="characterCard"
            style={{
              background: `url(${character.thumbnail.path}.${character.thumbnail.extension}) no-repeat center`,
              backgroundSize: "cover",
            }}
            onClick={() => onClick(character.id)}
          >
            <div className="caption">{character.name}</div>
            <div className="caption bottom">View Comics</div>
          </div>
        )
      })}
    </div>
  )
}

We are passing our character data and our onClick event in there and we are simply mapping everything into character card elements. We are dynamically setting the card background by using an image URL we get from character data.

We are using two different captions at the bottom. The first one will be visible by default and it displays the character's name. The second one will be hidden and on mouse hover the character's name will dissapear and the View Comics caption will pop out. We are using this as a way to indicate the cards are clickable. So far both captions are being shown, but we will fix this later in CSS.

Here is what the Comics component looks like.

// Comics.jsx

import "../styles/Comics.scss"

export default function Comics({ data }) {
  return (
    <div className="comics">
      {data.map(comic => {
        const detailsUrl = comic.urls.find(
          element => element["type"] === "detail"
        ).url

        return (
          <a
            key={comic.id}
            className="comicCard"
            style={{
              background: `url(${comic.thumbnail.path}.${comic.thumbnail.extension}) no-repeat center`,
              backgroundSize: "cover",
            }}
            href={detailsUrl}
            target="_blank"
            rel="noreferrer"
          >
            <div className="caption">{comic.title}</div>
            <div className="caption bottom">View Comic Details</div>
          </a>
        )
      })}
    </div>
  )
}

This one is similar to Characters component with a few key differences. Before mapping out the comic book cards we need to find the URL for each comic on Marvel's official website. Each comic has a property called urls which contains different objects which have two properties - type and url. The object which has its type equal to detail contains our URL in its url property, so we need to find it and extract it.

We are then free to map out all comic book elements into comic card links. We are setting their background the same way we did for the Comics component and we are also adding two captions, but this time the default one shows the comic book title.

That is everything as far as our functionalities go. If you want to set up your CSS the same way as I did you can use the following code. Also, make sure to put your .scss files into a separate styles folder.

// Search.scss

.search {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  margin: 1em auto;
}

input {
  width: 300px;
  font-size: 1.4em;
  text-align: center;
  margin: 1em 0;
  font-family: "Bangers", cursive;
  padding: 0.5em 0;
}

button {
  font-size: 1.2em;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  cursor: pointer;
  font-family: "Bangers", cursive;
  background: rgb(255, 240, 33);
  transition: linear 0.2s;
  border: 1px solid black;
  box-shadow: 2px 2px black;

  &:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px black;
  }

  &.reset {
    margin-left: 0.25em;
    background-color: white;
  }
}

// Characters.scss

.characters {
  max-width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 1em;
  background-color: white;
  background-image: url(../images/paper.jpg);
}

.characterCard {
  padding: 1em;
  display: flex;
  flex-direction: column;
  height: 300px;
  border: 2px solid black;
  box-shadow: 4px 4px black;
  filter: grayscale(100);

  transition: 0.2s linear;

  .caption {
    font-family: "Bangers", cursive;
    font-size: 1.6em;
    text-align: center;
    margin: auto auto 0 auto;
    padding: 0.5em 1em;

    background-color: white;
    background-image: url(../images/paper.jpg);

    border: 1px solid black;
    box-shadow: 2px 2px black;

    &.bottom {
      position: absolute;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
    }
  }

  &:hover {
    cursor: pointer;
    filter: grayscale(0);
    box-shadow: 6px 6px black;
    transform: translate(-2px, -2px);

    .caption {
      opacity: 0;
    }

    .bottom {
      opacity: 1;
    }
  }
}

@media only screen and (max-width: 800px) {
  .characters {
    grid-template-columns: repeat(1, 1fr);
  }
}

// Comics.scss

.comics {
  max-width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  padding: 1em;
  background-color: white;
  background-image: url(../images/paper.jpg);
}

.comicCard {
  padding: 1em;
  display: flex;
  flex-direction: column;
  height: 400px;
  border: 2px solid black;
  box-shadow: 4px 4px black;
  filter: grayscale(100);

  transition: 0.2s linear;
  text-decoration-color: black;

  .caption {
    font-family: "Bangers", cursive;
    font-size: 1.6em;
    text-align: center;
    margin: auto auto 0 auto;
    padding: 0.5em 1em;

    background-color: white;
    background-image: url(../images/paper.jpg);

    color: black;
    border: 1px solid black;
    box-shadow: 2px 2px black;

    &.bottom {
      position: absolute;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      color: black;
      text-decoration: underline;
      width: 60%;
    }
  }

  &:hover {
    cursor: pointer;
    filter: grayscale(0);
    box-shadow: 6px 6px black;
    transform: translate(-2px, -2px);

    .caption {
      opacity: 0;
    }

    .bottom {
      opacity: 1;
    }
  }
}

@media only screen and (max-width: 1200px) {
  .comics {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 800px) {
  .comics {
    grid-template-columns: repeat(1, 1fr);
  }
}

You will also need to add a small chunk of CSS in your index.css file at the root of your project, to make sure your background and fonts are being properly displayed. Here is what my index.css looks like.

@import url("https://fonts.googleapis.com/css2?family=Bangers&display=swap");
body {
  margin: 0;
  background: linear-gradient(
        45deg,
        rgba(0, 110, 193, 0.3),
        rgba(0, 115, 138, 0.1)
      ) no-repeat fixed center, url("./images/spiderman.jpg") no-repeat fixed
      center;
  background-size: cover;
}

And with that our Marvel Comic Book app is finished. You can of course expand it with other interesting functionalities, such as bookmarking your favorite characters and comics that you want to read, or making a database of comics you already finished reading. You can also expand the search functionality to also include and directly search comic book names, or events that are connected to the Marvel universe (you can find these properties and endpoints in the API documentation). If you do end up improving this app send me a message. I would love to see your creations!

If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that's your cup of tea feel free to support me by subscribing.

Radio Player App in React

Aleks Popovic — Tue, 09 Mar 2021 22:22:19 +0000

Sometimes you gotta do what you gotta do. For quite a while I've had this idea of making a radio player or an app which you could use to search up or browse different radio stations, but something else always came first. The holidays, job, working on other projects, but I finally got around to doing it. If you want to see how I did it keep on reading and if you prefer a video version you can watch me build a radio player app in React on Youtube:

I started a new React app by running the create-react-app command in my working folder.

create-react-app radio

I made a new component called Radio.js and imported it into App.js. I also added a couple of headings in there.

// App.js

import "./App.scss"
import Radio from "./Radio"

function App() {
  return (
    <div className="App">
      <h1>Super-Duper Radio Player</h1>
      <h2>Pick a genre, choose a station, start listening</h2>
      <Radio />
    </div>
  )
}

export default App

I imagined this as a simple app which you could use to get a bunch of different radio stations and either search through them or filter them in some way, preferably through music genres or radio station types. After looking through several different radio APIs I decided on using an React existing module to get the stations as it turned out that I would otherwise need to set up a server to fetch them which would have been a bit of an overkill.

I installed radio-browser-api which has the music genre as one of the entry parameters for searching through the data, which was perfect for me. I also installed react-h5-audio-player which I will use later to play the radio streams and I proceeded with making a filter section.

import React, { useEffect, useState } from "react"
import { RadioBrowserApi } from "radio-browser-api"
import AudioPlayer from "react-h5-audio-player"
import "react-h5-audio-player/lib/styles.css"

export default function Radio() {
  const [stations, setStations] = useState()
  const [stationFilter, setStationFilter] = useState("all")

  const filters = [
    "all",
    "classical",
    "country",
    "dance",
    "disco",
    "house",
    "jazz",
    "pop",
    "rap",
    "retro",
    "rock",
  ]

  return (
    <div className="radio">
      <div className="filters">
        {filters.map((filter, index) => (
          <span
            key={index}
            className={stationFilter === filter ? "selected" : ""}
            onClick={() => setStationFilter(filter)}
          >
            {filter}
          </span>
        ))}
      </div>
      <div className="stations"></div>
    </div>
  )
}

I made an array which contains a bunch of different genres which I found were working properly with the RadioBrowserApi component. Then I mapped them out into a container and made them clickable. After clicking on a station filter we set the active music type with useState and we also "mark" it with the "selected" CSS class, which we'll use later to distinguish the selected filter from the rest.

Now we need to get the radio stations data and we'll do that inside of a useEffect hook.

useEffect(() => {
  setupApi(stationFilter).then(data => {
    setStations(data)
  })
}, [stationFilter])

const setupApi = async stationFilter => {
  const api = new RadioBrowserApi(fetch.bind(window), "My Radio App")

  const stations = await api
    .searchStations({
      language: "english",
      tag: stationFilter,
      limit: 30,
    })
    .then(data => {
      return data
    })

  return stations
}

Our useEffect will trigger every time our stationFilter changes and it will call the searchStations() function through the RadioBrowserApi. We can pass several different parameters into it, but I settled on setting the language to english, filtering the stations by the station filter that we previously set up and limiting the results to 30 stations. After we get the data we update our state with it and we will proceed with mapping it into the page, right below the filters.

const setDefaultSrc = event => {
  event.target.src = defaultImage
}

return (
  <div className="radio">
    <div className="filters">
      {filters.map((filter, index) => (
        <span
          key={index}
          className={stationFilter === filter ? "selected" : ""}
          onClick={() => setStationFilter(filter)}
        >
          {filter}
        </span>
      ))}
    </div>
    <div className="stations">
      {stations &&
        stations.map((station, index) => {
          return (
            <div className="station" key={index}>
              <div className="stationName">
                <img
                  className="logo"
                  src={station.favicon}
                  alt="station logo"
                  onError={setDefaultSrc}
                />
                <div className="name">{station.name}</div>
              </div>
            </div>
          )
        })}
    </div>
  </div>
)

We get some interesting things from the API, such as the station name, logo and the resolved url of the audio stream. Sometimes the API won't return a proper image Url, or the image will for some reason be inaccessible. We resolve this issue by setting up the onError event on our img tag. If the image errors out we call out little setDefaultSrc function which switches the image source with a default image we provide it with. Don't forget to import your image into the component first.

The next thing we need to do is setting up the AudioPlayer component we installed previously.

<AudioPlayer
  className="player"
  src={station.urlResolved}
  showJumpControls={false}
  layout="stacked"
  customProgressBarSection={[]}
  customControlsSection={["MAIN_CONTROLS", "VOLUME_CONTROLS"]}
  autoPlayAfterSrcChange={false}
/>

The AudioPlayer component accepts several different props. You can set up a className per usual, but the main thing is the src prop which we need to set with the urlResolved value we get from the API. The rest is just some visual settings which you can play around with, or check out their documentation for more options. You will probably want to set autoPlayAfterSrcChange to false as that will prevent all AudioPlayer instances from auto playing when you switch between your filters. All of the other settings I've used are just for hiding the controls I don't need.

Here is the final look of the Radio.js component:

import React, { useEffect, useState } from "react"
import { RadioBrowserApi } from "radio-browser-api"
import AudioPlayer from "react-h5-audio-player"
import "react-h5-audio-player/lib/styles.css"
import defaultImage from "./radio.jpg"

export default function Radio() {
  const [stations, setStations] = useState()
  const [stationFilter, setStationFilter] = useState("all")

  useEffect(() => {
    setupApi(stationFilter).then(data => {
      console.log(data)
      setStations(data)
    })
  }, [stationFilter])

  const setupApi = async stationFilter => {
    const api = new RadioBrowserApi(fetch.bind(window), "My Radio App")

    const stations = await api
      .searchStations({
        language: "english",
        tag: stationFilter,
        limit: 30,
      })
      .then(data => {
        return data
      })

    return stations
  }

  const filters = [
    "all",
    "classical",
    "country",
    "dance",
    "disco",
    "house",
    "jazz",
    "pop",
    "rap",
    "retro",
    "rock",
  ]

  const setDefaultSrc = event => {
    event.target.src = defaultImage
  }

  return (
    <div className="radio">
      <div className="filters">
        {filters.map((filter, index) => (
          <span
            key={index}
            className={stationFilter === filter ? "selected" : ""}
            onClick={() => setStationFilter(filter)}
          >
            {filter}
          </span>
        ))}
      </div>
      <div className="stations">
        {stations &&
          stations.map((station, index) => {
            return (
              <div className="station" key={index}>
                <div className="stationName">
                  <img
                    className="logo"
                    src={station.favicon}
                    alt="station logo"
                    onError={setDefaultSrc}
                  />
                  <div className="name">{station.name}</div>
                </div>

                <AudioPlayer
                  className="player"
                  src={station.urlResolved}
                  showJumpControls={false}
                  layout="stacked"
                  customProgressBarSection={[]}
                  customControlsSection={["MAIN_CONTROLS", "VOLUME_CONTROLS"]}
                  autoPlayAfterSrcChange={false}
                />
              </div>
            )
          })}
      </div>
    </div>
  )
}

The only thing left to do is make all of this a bit more presentable by adding some (S)CSS to it. Here is what I've used:

@import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap");

.App {
  display: flex;
  align-items: center;
  flex-direction: column;
}

body {
  background: rgb(40, 31, 53);
  background: linear-gradient(to right, rgb(40, 31, 53), rgb(61, 46, 83));
  color: rgb(235, 235, 235);
  font-family: "Architects Daughter", cursive;
}

h1 {
  margin: 1em 0 0 0;
  font-size: 3rem;
}

h2 {
  margin-bottom: 2em;
}

.radio {
  max-width: 60em;
  width: 100%;
}

.filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2em;
  font-size: 1.2rem;
  width: 100%;

  span {
    margin: 0.25em;
    border: 1px solid #e36bae;
    border-radius: 10px;
    padding: 0.25em 0.75em;

    &:hover {
      cursor: pointer;
      background: linear-gradient(to bottom right, #e36bae, #fb743e);
    }
  }

  .selected {
    background: linear-gradient(to bottom right, #e36bae, #fb743e);
  }
}

.stations {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  width: 100%;
}

.station {
  font-size: 1.2em;
  border: 1px solid rgb(76, 62, 95);
  margin: 0.25em;
  border-radius: 10px;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &:hover {
    border-color: #e36bae;
  }
}

.stationName {
  display: flex;
  flex-direction: row;
  margin-bottom: 1em;
  width: 100%;
  align-items: center;
  justify-content: start;
}

.name {
  width: 100%;
  text-align: center;
}

img {
  display: block;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  border: 2px solid rgb(76, 62, 95);
  margin: 0 0.25em;
}

audio {
  width: 100%;
}

.rhap_container.player {
  background-color: rgb(76, 62, 95);
  display: flex;
  justify-items: center;
  padding: 0.25em 0.75em;
  border-radius: 10px;
}

.rhap_stacked .rhap_controls-section {
  margin-top: 0 !important;
}

.rhap_controls-section .rhap_volume-controls {
  justify-content: center;
}

.rhap_controls-section .rhap_main-controls button[aria-label="Play"] svg path {
  fill: rgb(235, 235, 235) !important;
}

.rhap_controls-section .rhap_main-controls button[aria-label="Pause"] svg path {
  fill: #e36bae !important;
}

@media only screen and (max-width: 600px) {
  .stations {
    grid-template-columns: repeat(2, 50%);
  }

  img {
    display: none;
  }
}

Nothing major to explain here. I've used the grid to set up the stations into a 3-column layout for desktop and a 2-column layout on mobile. I used flexbox to align and center everything else. The weird selectors in the end are for overriding the AudioPlayer'c CSS. There were some instructions on how to do it with setting up SCSS properties, but I couldn't make it work that way.

With that our radio app prototype is finished, or is it? There are all sorts of things you could add to this to make it both more functional and easier to use. A couple of things that spring to mind are making the stations searchable by name and adding an option to bookmark stations or mark them as favorite. If you do end up improving this app idea send me a message, I would love to see your creations!

If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that's your cup of tea feel free to support me by subscribing.

If you want to see the live app in action check out this CodeSandbox:

Infinite Pomodoro App in React

Aleks Popovic — Sun, 21 Feb 2021 14:55:48 +0000

Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g. 5 minutes) and then you repeat this cycle. In classic Pomodoro you would work for 4 cycles total and then take a longer break, but in this simplified version we are going to build a time tracker that repeats infinitely. Or, until you decide to stop working and close the browser for the day.

If you prefer a video version you can watch me build this on Youtube:

I started a new React app by running the create-react-app command in my working folder.

create-react-app pomodoro

We proceed by making a new component called Pomodoro.js and importing it into our App.js.

// App.js

import "./App.css"
import Pomodoro from "./Pomodoro"

function App() {
  return (
    <div className="App">
      <Pomodoro />
    </div>
  )
}

export default App

Inside of our Pomodoro component we are going to add a bit of JSX for our timer and a simple message.

import React, { useState, useEffect } from "react"

export default function Pomodoro() {
  const [minutes, setMinutes] = useState(25)
  const [seconds, setSeconds] = useState(0)
  const [displayMessage, setDisplayMessage] = useState(false)

  const timerMinutes = minutes < 10 ? `0${minutes}` : minutes
  const timerSeconds = seconds < 10 ? `0${seconds}` : seconds

  return (
    <div className="pomodoro">
      <div className="message">
        {displayMessage && <div>Break time! New session starts in:</div>}
      </div>
      <div className="timer">
        {timerMinutes}:{timerSeconds}
      </div>
    </div>
  )
}

There's a lot of things happening in there, so let's break it down a little bit. First, we import useState and useEffect hooks and we implement a couple of properties that utilize useState. These will be our minutes and seconds "trackers" and a boolean telling us if we should display the message during the break.

We are setting starting minutes to 25 since classic pomodoro is done this way, but feel free to set a different value, or even implement some input fields for choosing the starting time.

Digital clocks and timers usually show single digit numbers with a zero in front, so we are going to do that as well. Before displaying minutes and seconds we do a simple check to determine if we need to add a zero before a number.

Now is a good time to set up our CSS. I chucked it all into App.css, but feel free to make a separate file and import it into our component.

body {
  background-color: #1e212d;
  color: #eabf9f;
  height: 100vh;
  font-family: "Roboto Mono", monospace;
}

#root {
  height: 100%;
}

.App {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.pomodoro {
  font-size: 6em;
}

.message {
  font-size: 0.5em;
  min-height: 1.3em;
  margin-bottom: 0.5em;
}

Most of the CSS is used just for centering and adding some nice colors and a font. We are also changing the font size for both the timer and the message so they cover a good part of the screen.

Let's get back to the Pomodoro component and finish implementing our timer. We have a couple of use-cases that we need to cover in our useEffect hook, so let's outline them first.

useEffect(() => {
  let interval = setInterval(() => {
    clearInterval(interval)

    if (seconds === 0) {
      if (minutes !== 0) {
        // seconds are 0 but minutes are not 0
        // -> decrease minutes by 1 and reset seconds from 0 to 59
      } else {
        // both minutes and seconds are 0
        // -> we start a new break timer, or reset the timer if the break finished
      }
    } else {
      // seconds are not 0
      // -> just decrease seconds by 1
    }
  }, 1000)
}, [seconds])

We've set up a useEffect hook which is tracking our seconds in the callback. When we update our seconds property, useEffect gets triggered and we immediately set a one second interval which checks what we need to do. We also need to clear the interval or we will get some nasty side-effects. React hooks are asynchronous, so our changes won't happen exactly at the 1000th millisecond, but it's close enough that we don't mind.

As for our use-cases, we have the simplest one where there are still seconds left on the clock in which case we just decrease seconds count by 1. If seconds are down to zero then two things can happen. We reached the end of our timer (minutes are 0) or there are still some minutes left.

Here is what our implemented use-cases look like:

useEffect(() => {
  let interval = setInterval(() => {
    clearInterval(interval)

    if (seconds === 0) {
      if (minutes !== 0) {
        setSeconds(59)
        setMinutes(minutes - 1)
      } else {
        let minutes = displayMessage ? 24 : 4
        let seconds = 59

        setSeconds(seconds)
        setMinutes(minutes)
        setDisplayMessage(!displayMessage)
      }
    } else {
      setSeconds(seconds - 1)
    }
  }, 1000)
}, [seconds])

Both cases where there is still some time left are pretty self-explanatory - we either decrease the seconds, or we decrease the minutes and reset seconds to 59. For the "timer has run out" use-case we need to check if we are resetting the original timer, or are we starting a shorter break timer. We do this with our displayMessage property, because the message is only being displayed during a break.

We are always setting our seconds to 59 because we don't want to have an additional second delay between the timers, but the minutes are more interesting. If the message is currently being shown that means we were taking a break and we should reset minutes to 24. If the message is not being shown that means the original counter has ended and we need to take a break, which means starting a timer with 4 minutes.

We set our minutes and seconds and switch the displayMessage boolean to its opposite value, and we are done!

Here is the final Pomodoro component's look:

import React, { useState, useEffect } from "react"

export default function Pomodoro() {
  const [minutes, setMinutes] = useState(25)
  const [seconds, setSeconds] = useState(0)
  const [displayMessage, setDisplayMessage] = useState(false)

  useEffect(() => {
    let interval = setInterval(() => {
      clearInterval(interval)

      if (seconds === 0) {
        if (minutes !== 0) {
          setSeconds(59)
          setMinutes(minutes - 1)
        } else {
          let minutes = displayMessage ? 24 : 4
          let seconds = 59

          setSeconds(seconds)
          setMinutes(minutes)
          setDisplayMessage(!displayMessage)
        }
      } else {
        setSeconds(seconds - 1)
      }
    }, 1000)
  }, [seconds])

  const timerMinutes = minutes < 10 ? `0${minutes}` : minutes
  const timerSeconds = seconds < 10 ? `0${seconds}` : seconds

  return (
    <div className="pomodoro">
      <div className="message">
        {displayMessage && <div>Break time! New session starts in:</div>}
      </div>
      <div className="timer">
        {timerMinutes}:{timerSeconds}
      </div>
    </div>
  )
}

If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs. I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that's your cup of tea feel free to support me by subscribing.

Full project is available on CodeSandbox:

How to get a job with no experience

Aleks Popovic — Sun, 24 Jan 2021 13:01:28 +0000

Getting a job in tech can be really hard, especially if it's your first one. Every company prefers some experience, and how can you get experience if no one will take you? It's the tech version of the 'Chicken or Egg' question.

There are some things you can do to make your life easier and to speed up the process. Literally everyone started their first job with no experience, so it can definitely be done.

I've been working as a software developer for a bit over 5 years now. I've gone through hundreds of job applications and dozens of interviews (both as an applicant and as an interviewer) and I picked up several pieces of advice that I constantly share with other people looking to get into the tech industry (or just find a different job).

Decide on one language and go for it

If this is your first job, make your life easier by choosing one language (and tools associated with it) and stick with it. You will have less to study and you will retain your knowledge better.

Start looking right now

I mean literally right now. Most people are waiting to 'get ready' or 'prepare better'. It's not going to happen for one simple reason, and that is - it's physically impossible to be ready for anything and everything you will get asked in an interview. Just start applying right away and you will fill out your 'knowledge gaps' along the way.

If you don't have a LinkedIn account already - set one up. I know some people love to hate LinkedIn, but it is a great place to look for jobs and to connect with both recruiters and other developers.

Be prepared to fail and to get embarrassed

When you come to an interview you will have very little real knowledge of how software is built in a production environment. As a result you will probably fail most of your interviews. The good thing is - it happens to everyone. Now that I've written it I'm not sure if that's good or depressing, but the point still stands. It will happen throughout your life - might as well get used to it.

Even if you are super well prepared for the interview you are still going to get asked questions that you don't know an answer to. Your interviewers will try to gauge your knowledge level, and to do that they will also ask you questions that are above the expected knowledge level for the position you applied for. Sometimes they might even figure out you are not a good candidate for the position you applied to, but you might be a perfect candidate for a different one.

Have something to talk about

If you are applying to a software developer position you will be asked about your past projects. You might not have previous work experience, but you absolutely must have something that you've worked on. Pick out two of your best projects and be prepared to talk about them.

Why did you make them? What problems did you have to solve? With the knowledge that you have now - what would you have done differently?

Document everything

This stands for both your code and your experiences. If you don't already - you should have a GitHub account and you should upload to it everything you are working on. All your side projects should be in there and when you get asked - Do you have that code somewhere online? - you can send them your GitHub page, which you should also have set up. If you don't know how I have another article that covers this, and a YouTube video on the same topic.

If you don't have an online portfolio page - build one in the form of a website, or use your GitHub page instead. Either way - have something to show. If you don't have previous work experience, and even if you do, you will probably be judged by this, because having (or lacking) a portfolio shows several different things about you.

You are willing to always develop your skills which is very important in tech. You are ready to develop things on your own, without getting paid. You are not afraid to let others see and judge your code.

Read about body language and negotiation tactics

You might be awkward and you might be nerdy but if you want to work with people you need to have some 'people skills'.

Reading books about body language and literal tutorials on how to behave in social situations really helped me out. There are a lot of books covering this topic, but I can recommend two that I've read and learned a lot from.

What Every Body Is Saying: An Ex-FBI Agent's Guide to Speed-Reading People by Joe Navaro and Marvin Karlins, Ph.D. covers involuntary movements that our bodies make when we are under pressure or stress. I'd say a job interview is a pretty stressful situation, wouldn't you agree? Reading about body language and our natural instincts may help you discover what it is that you do when under stress and how to use that knowledge to be more calm in general.

How to Win Friends & Influence People, by Dale Carnegie, sounds a lot more sinister than it really is. The book is really a giant text tutorial on how to have good, productive and enjoyable conversations with people. While reading it you might discover those 'natural born speakers' are really just following a few different conversation formulas. This approach works because humans are 'wired' to expect to hear certain things in a conversation, and when we do - we communicate more easily with each other, and our dialogs feel much more rewarding.

Don't lie

Whatever you do, just don't lie. Yeah, yeah, everybody buffs up their resume, it's almost expected. No they don't, and no it's not.

In many interviews your potential future colleague will go through your entire CV and will want to know who they are dealing with. You don't want to say or write something that is disingenuous and get caught in a web trying to explain it off during an interview. It's not worth it.

If you don't know something - just say it openly, but express interest and willingness to learn. No one expects you to know everything anyway, especially on your first job.

If you haven't worked with a language or a tool in a while or you aren't proficient with it - leave it out of your CV, or mark it differently from other more recent stuff.

Lower your standards

Getting a foot in the door can be really hard, but choosing a half-open door could make things easier. Don't be picky with your first company. You have to start somewhere, but nowhere does it say it must be a FAANG company.

Pick smaller to medium sized companies. This one may be a bit controversial, but try asking for a lower than average salary for that position or, if you absolutely can't land a job, ask to volunteer. There is nothing wrong with selling yourself for less, or for free, if it means you will benefit from it later by having an actual work experience. If you can't get a job anyway ask for less or no money.

Stay strong

Interviews are hard, but they do get easier with practice. Connect with other people in a similar position and don't lose hope. There are pretty big dev communities on Reddit and Twitter which you should definitely check out. I recommend r/learnprogramming and #DEVCommunity, but there are many more in other places, too.

Also, as I already mentioned, make a LinkedIn account and connect with other devs and recruiters there. Feel free to connect with me if you need more advice on how to set up your profile. You can also reach out to me on Twitter and let me know if there are other topics you would like me to cover.

Building Meal Planning App with React and Spoonacular API

Aleks Popovic — Sun, 17 Jan 2021 18:50:24 +0000

I've been playing around with a few different free APIs and I decided to make a simple meal planning app with Spoonacular API. It's very easy to set up and you can add a lot of things to it if you want to make a full blown food/recipe app.

If you prefer a video version of this tutorial you can watch it here:

Project setup

We are going to start off by making a new React app.

create-react-app meal-planner

Our App component is going to be very simple, so I'm going to show you what it looks like straight away and explain how everything works.

//App.js
import React, { useState } from "react"
import MealList from "./MealList"

function App() {
  const [mealData, setMealData] = useState(null)
  const [calories, setCalories] = useState(2000)

  function getMealData() {
    fetch(
      `https://api.spoonacular.com/mealplanner/generate?apiKey=cb1c464d94f142c08b156c5beddade8b&timeFrame=day&targetCalories=${calories}`
    )
      .then(response => response.json())
      .then(data => {
        setMealData(data)
      })
      .catch(() => {
        console.log("error")
      })
  }

  function handleChange(e) {
    setCalories(e.target.value)
  }

  return (
    <div className="App">
      <section className="controls">
        <input
          type="number"
          placeholder="Calories (e.g. 2000)"
          onChange={handleChange}
        />
        <button onClick={getMealData}>Get Daily Meal Plan</button>
      </section>
      {mealData && <MealList mealData={mealData} />}
    </div>
  )
}

export default App

We are using useState to handle our meal data that we will get from the API and to keep track of the calorie count which we need for our API call.

Our jsx is really simple. We have an input for our calorie count and a button which will trigger the API call on click, through the getMealData() function.

After we click the button we will try to fetch our meal plan data from Spoonacular. They have extensive documentation and I highly recommend checking it out. There are many different things you can do to play around with their API. In our case we will use the mealplanner/generate API call for which you need to pass in your API key, time frame and target calories.

You can get your own API key simply by registering on their website and you will also get a nice dashboard which you can use to check out your daily API usage. Their free plan is not overly restrictive, but you should still use your own key for this project.

Timeframe accepts two values - 'day' and 'week', for daily and weekly meal plan, respectively. For this app we are going to make a daily one, but keep in mind that weekly's API response has a different object structure if you go for making that one as well.

Calories are an integer and the API is going to try to fit in 3 meals in that number.

After we get a response, we turn it into a json object and we update our mealData state object with it. We also pass it as a prop into our MealList component which we will use to display daily macro data and also our separate meal data.

Meal list component

// MealList.js
import React from "react"
import Meal from "./Meal"

export default function MealList({ mealData }) {
  const nutrients = mealData.nutrients

  return (
    <main>
      <section className="nutrients">
        <h1>Macros</h1>
        <ul>
          <li>Calories: {nutrients.calories.toFixed(0)}</li>
          <li>Carbohydrates: {nutrients.carbohydrates.toFixed(0)}</li>
          <li>Fat: {nutrients.fat.toFixed(0)}</li>
          <li>Protein: {nutrients.protein.toFixed(0)}</li>
        </ul>
      </section>

      <section className="meals">
        {mealData.meals.map(meal => {
          return <Meal key={meal.id} meal={meal} />
        })}
      </section>
    </main>
  )
}

From our mealData object (which we just got from the API response) we can extract two important things which we can use.

First is the general nutrient data in terms of total calories, carbohydrates, fat and protein. We can just access them one by one and display them inside of an unordered list. To get nice rounded numbers we can use toFixed() function.

Next important thing are the meals themselves. We will put them into a separate section and map them to our Meal component.

Meal component

// Meal.js
import React, { useState, useEffect } from "react"

export default function Meal({ meal }) {
  const [imageUrl, setImageUrl] = useState("")

  useEffect(() => {
    fetch(
      `https://api.spoonacular.com/recipes/${meal.id}/information?apiKey=cb1c464d94f142c08b156c5beddade8b&includeNutrition=false`
    )
      .then(response => response.json())
      .then(data => {
        setImageUrl(data.image)
      })
      .catch(() => {
        console.log("error")
      })
  }, [meal.id])

  return (
    <article>
      <h1>{meal.title}</h1>
      <img src={imageUrl} alt="recipe" />
      <ul className="instructions">
        <li>Preparation time: {meal.readyInMinutes} minutes</li>
        <li>Number of servings: {meal.servings}</li>
      </ul>

      <a href={meal.sourceUrl}>Go to Recipe</a>
    </article>
  )
}

Our first API call doesn't return an image and what is a food item card going to look like without a nice image which shows our meal? It would be just a boring chunk of text, but we can fix that.

In our Meal component we pick up the meal ID and pass it into another API call which is used for getting specific recipe data - recipes/your-meal-id/information. For this one we need just two pieces of data which we already have - the meal's ID and our API key (which you got by registering on Spoonacular's website, right?).

This function returns a response loaded with all sorts of data. We don't need 99% of it, but you can certainly use some of it to expand this app if you want to. For this use case I am just plucking the image out of there and passing it into an image tag.

We are making this API call inside of useEffect because we want it to trigger just once, when we create the component. To make sure that happens you need to pass in the [meal.id] as a second parameter, right after our function.

We are also displaying the meal title, preparation time, number of servings and a link to the original recipe. But, like I said, you can add a bunch of different things here. You are free to, for example, not use a recipe Url, but show the complete recipe right there on our page.

Adding styles

The whole app is pretty much done at this point if you don't want to add any more functionalities to it. It looks pretty ugly, though, but we can fix that by adding some CSS. I wanted to keep it simple, so I've added a bit of color to it and some element separation with margins and padding. I also aligned and centered everything with flexbox and made it fit more nicely into smaller screens. Here is what my index.css file looks like:

/* index.css */

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #f3f3f3;
}

.App {
  display: flex;
  align-items: center;
  flex-direction: column;
}

section {
  margin: 2rem 0 1rem 0;
}

.controls {
  display: flex;
  align-items: center;
  flex-direction: column;
}

input {
  text-align: center;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

button {
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: #7f21eb;
  color: #f3f3f3;
  border: none;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
}

button:hover {
  background-color: #6c13d1;
  cursor: pointer;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

.nutrients ul {
  display: flex;
  width: 35rem;
  justify-content: space-evenly;
}

.meals {
  display: flex;
}

img {
  width: 100%;
  margin-bottom: 1rem;
}

article {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 0 1rem;
  max-width: 300px;
  box-shadow: 0 4px 8px 2px rgba(77, 77, 77, 0.15);
}

ul {
  list-style: none;
}

.instructions {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
  background-color: #7f21eb;
  color: #f3f3f3;
  width: fit-content;
  padding: 0.5rem 1rem;
}

a:hover {
  background-color: #6c13d1;
  cursor: pointer;
}

@media only screen and (max-width: 1024px) {
  .meals {
    flex-direction: column;
    align-items: center;
  }

  .nutrients ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
}

There's a lot more things that can be done with this API, but this is it for this tutorial. If you end up building this do send me your creations. Especially if you add more stuff to it, like recipe details, ingredient list, meal preparation instructions or something similar.

You can check out a demo version of this app on CodeSandbox.

You can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that's your cup of tea feel free to support me by subscribing.

How to choose your next side project

Aleks Popovic — Sun, 03 Jan 2021 18:13:18 +0000

Building projects is one of the best ways to learn a new technology or to get better with a stack you are already familiar with. Wanting to build a side project is one thing, though, and finding an idea for it is a completely different animal.

In general I don't like random lists of "best ideas for your side project" because most of them are either generic or they feature projects I don't find that interesting, so here is a system that I devised for myself that might also be useful to you.

Teach a dev how to fish

This approach will not give you specific project ideas you must build.

It will teach you how to figure out project ideas on your own. The ideas will be yours, you will be passionate about finishing your projects based on them, and you will build out your portfolio with projects that actually mean something to you.

Figure out what you like

You could have a hobby that you are passionate about. Maybe you like watching TV shows or playing video games. Maybe you've recently found out about your love for baking bread, as a lot of other people have. I hear knitting and crocheting are "secret" hobbies many developers have because it helps them with handling stress. Whatever it is - you can turn your topic or object of interest into a project.

Find a problem that exists in your hobby and build a solution for it.

Do not give up on your idea if the solution already exists! Build your own thing or give your spin on an existing one. When I open a website that has an interesting functionality I often think - If I were to make this, how would I do it? I do the same thing when playing video games and using mobile apps.

Expose yourself to new ideas

Your imagination might falter, but you will never be alone in your efforts. There are billions of other people on this planet and a lot of them have built their own projects. Some of them write articles or record videos and podcasts in which they talk about those projects. A lot of them keep inventing new stuff to create as that is their nature.

Steal their ideas.

Don't copy-paste anything you get your hands on, but do use existing work others have made to inspire you.

Improve yourself

You don't need to consume tech-related content to get a tech project idea, but it does help. Read books about a programming language or a tech stack you are learning. Books cover a variety of language functionalities and you will naturally start to think about interesting ways to implement them.

It's the same thing with blogs and articles. Follow news that are related to what you are trying to learn and the progress that's been made in your tech stack might inspire you to build something that uses those new functionalities.

Talk to people

I am aware that a stereotypical programmer is an introvert, but there are many ways to communicate with people that don't involve eye contact and actually speaking. Join communities of people that share your interests. Be it Twitter, Reddit, Discord or something else entirely, there are other people who are in the same boat as you.

Talk to them, ask them what they are working on and you might get an idea for your next side project. Or, you could join them in building their own.

Write down literally everything

I mean it. Get yourself a pen and a notebook or a notes app for your phone and computer and write down every single idea that you get, no matter how big, small or innovative it is. Even if it's just a glimpse of an idea - write it down.

I have one of these lists that I open up from time to time and rearrange my ideas based on priority and level of interest I have in them. When I finish one side project I just open it up and pick up the first item from it.

Sometimes these ideas overlap or can be combined into a single project. That's why I write down all of them.

Take it easy

Just because building projects is one of the best ways to learn programming it doesn't mean you need to build new stuff all the time. Take care of your mental and physical health before everything else.

Give boring ideas a chance

There are quite a few web functionalities most people don't find interesting or inspiring - forms, register and login workflows, database connections etc. But, as it turns out, those are the things that many web apps have and most jobs will have you working on similar boring but very important things.

You don't have to, but it would be in your best interest to get to know these things and implement them in your side projects. Or make them as separate mini projects.

Give them an interesting spin to keep yourself engaged and learn how to build them because it will be useful in the long run.

I need more

Maybe you already have ideas, but you are struggling to finish your side projects? I have an article on that topic, too, where I cover some of the things that help me tackle and finish all of my projects.

Finished a side project - now what?

Hug it, pet it and call it George.

In all seriousness - after you've built it, let other people see it. Having your side projects in a structured portfolio will help you a lot when looking for a new job. That means either on GitHub or your portfolio website.

If you need some advice on how to structure your GitHub profile and make it presentable - I have an article on that topic, too.

Post about your side project on your favorite social media platform. Let people know how you did it and why. Talk about interesting problems you encountered on your way and who knows - maybe you'll be an inspiration to somebody else.

How to Integrate dev.to with Gatsby

Aleks Popovic — Sun, 27 Dec 2020 15:39:01 +0000

My website is built on top of Gatsby, which is a "React-based open source framework with performance, scalability and security built-in". It's a fast growing platform with a very active comunity and it has a plethora of plugins which you can use to customize your website. It's also a static website generator, which introduces certain limitations.

Static site means no dynamic content. No dynamic content means no comments, likes, bookmarks or similar blog post functionalities that would require a back-end with a database. Not by default at least.

There are ways to implement all those things on a static website, but I am currently way too lazy to do that. Instead, I went for a partial, but still cool looking solution.

I cross-post most of my blog posts on dev.to and dev.to blog posts certainly have an implementation for comments and likes (which they call reactions, because there are 3 different kinds). So, I just steal those.

When I say "steal", I actually mean: "There is a Gatsby plugin which allows me to use dev.to API without setting up any API interaction on my end except for passing in my dev.to username". It is a bit limited, mind you. For example, you can get the number of comments, but not the actual comments. You can get the total number of reactions, but not individual Hearts, Unicorns and Saved/Bookmarked counts.

Which is fine in my book, for now. It gets the job done and it looks nice. If you have a Gatsby blog and want to do something similar here is how you can do it.

The plugin in question is gatsby-source-dev which you can install by running one of these commands:

yarn add gatsby-source-dev
npm install gatsby-source-dev

We also need to add this in the plugins section of the gatsby-config.js file:

{
  resolve: "gatsby-source-dev",
  options: {
    username: "alekswritescode",
  },
},

Of course, instead of "alekswritescode" you would add your own dev.to username.

For the next part of the setup I followed an article written by Justin Juno, where he excellently explains how to add an entire dev.to feed to your Gatsby website in just 5 minutes. But, I don't want an entire feed. I just need the comment and reaction count, and I'm out.

In his article Justin explains how to add your own custom hook which will pull the data from dev.to API. I modified it a bit, so my hook's code ended up looking like this:

// usePosts.js

import { graphql, useStaticQuery } from "gatsby"

const usePosts = () => {
  const data = useStaticQuery(graphql`
    query {
      allDevArticles {
        edges {
          node {
            article {
              title
              positive_reactions_count
              comments_count
            }
          }
        }
      }
    }
  `)

  return data.allDevArticles.edges.map(post => ({
    id: post.node.article.id,
    title: post.node.article.title,
    likes: post.node.article.positive_reactions_count,
    comments: post.node.article.comments_count,
  }))
}

export default usePosts

Like I said, I only need reactions and comments, and the id is being fetched by default. I am also pulling the post title so I can compare it against my post titles and determine where my "stolen" comments and reactions need to go.

Now we need to call that hook inside of your blog and/or blog post template. I am not going to post my full code here, since your blog implementation is almost certainly different from mine, but here is the general idea of what you can do.

// blog.js

import usePosts from "../hooks/usePosts"
import Impressions from "../components/impressions"

function Blog(props) {
  const posts = props.data.allMarkdownRemark.edges
  const devToPosts = usePosts()

  return (
    <div id="content">
      {posts.map(({ node }) => {
        let devToArticle = devToPosts.filter(
          article =>
            article.title.toLowerCase() === node.frontmatter.title.toLowerCase()
        )[0]

        let likes = 0
        let comments = 0

        if (devToArticle) {
          likes = devToArticle.likes
          comments = devToArticle.comments
        }

        return (
          <article key={node.fields.slug}>
            // all of your blog post code goes here
            <Impressions likes={likes} comments={comments} />
          </article>
        )
      })}
    </div>
  )
}

export default Blog

So, what's going on in there? We are importing our hook and a component which will show the number of likes and comments. I will show you how to implement that component as well in a minute. We are then picking up all of our blog post data that's in my case being sent from the gatsby-node.js. Your implementation may be different, so I won't go over setting that up in this article.

We are then mapping our posts into article elements which contain our blog post data. But, before that, we are checking if one of our articles has a title that matches an article from dev.to feed. I name all of my cross-posted articles the same way, so there should always be one match which we can pick up. We pick up likes and comments and pass them into the Impressions component.

Speaking of the Impressions component, here is what that looks like:

import React from "react"
import impressionsStyles from "../styles/impressions.module.css"

export default function Impressions(props) {
  const { likes, comments } = props

  return (
    <div className={impressionsStyles.impressions}>
      {likes > 0 && (
        <div className={impressionsStyles.impression}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            className={impressionsStyles.impressionIcon}
          >
            <title>DEV.to impressions</title>
            <path d="M20.243 4.757c2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236C5.515 3 8.093 2.56 10.261 3.44L6.343 7.358l1.414 1.415L12 4.53l-.013-.014.014.013c2.349-2.109 5.979-2.039 8.242.228z" />
          </svg>
          {likes}
        </div>
      )}
      {comments > 0 && (
        <div className={impressionsStyles.impression}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            className={impressionsStyles.impressionIcon}
          >
            <title>DEV.to comments</title>
            <path d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10H2l2.929-2.929A9.969 9.969 0 0 1 2 12zm4.828 8H12a8 8 0 1 0-8-8c0 2.152.851 4.165 2.343 5.657l1.414 1.414-.929.929zM8 13h8a4 4 0 1 1-8 0z" />
          </svg>
          {comments}
        </div>
      )}
    </div>
  )
}

In here we are just picking up the number of likes and comments and displaying them alongside an SVG icon if they are greater than zero. The SVG icons are the same ones used on dev.to for comments and "Heart" reactions. If you are wondering where I got those from - you can find these and many more on the RemixIcon website. Those are the icons dev.to uses and I wanted to set up the same on my end since I am pulling their data, after all. I wanted a bit of consistency there. Plus, they look super cool, so why not. Don't sue me, please.

I added some simple CSS to make everything nice and centered:

.impressions {
  display: flex;
  justify-content: center;
}

.impression {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  font-size: 1rem;
}

.impressionIcon {
  margin-right: 0.4rem;
  fill: #fd9047;
}

Of course, you would have your own custom CSS to match this component with the rest of your blog post content and you would position the component acordingly. I placed mine right below the post title and date.

After that I did the same thing for my template for individual blog posts. The code is pretty much the same, except you you are working with individual blog posts so you don't need to map through all of them. Just pick up your post's title, compare it with your dev.to articles and you are set.

One caveat with this approach is that your blog post data won't be updated in real time. Since you need to build out your Gatsby website before deploying the static content you will just get a snapshot of that data during the build. This might be important for you, but I don't mind it that much. I am regularly pushing updates to my website since it's a constant work in progress. When I push a new build my website catches up to whatever is happening with the dev.to version of the blog post.

If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that's your cup of tea feel free to support me by subscribing.

Build Voice Navigation with React and Speech Recognition

Aleks Popovic — Sat, 19 Dec 2020 11:21:20 +0000

Until a few days ago I had no idea voice control and speech recognition were such a big deal. I lost the link to it, but according to an article I read, a big percentage of population likes to talk into their phones and home assistants. Maybe I am getting old, since it looked like the age group that uses it the most is 16-24? I think that's great (using the tech, not me getting old). Not only does it promote even more accessibility on the web, but it also gives us a glimpse into a future where we are no longer slaves to our clumsy fingers. I personally make too many typing mistakes, both on PC and smartphone keyboards.

I don't see that many voice controlled websites and it got me thinking. Can I make one? Something where you could just utter a command and some speech recognition algorithm would translate it into an operation like clicking a link, or straight up redirecting you to a page you asked.

It turns out it's not that hard at all, so I made a concept app with a voice controlled navigation menu in React. Here is how you can build it too, or just use the knowledge gained here to make your own voice controlled apps.

If you prefer a video version of this tutorial you can watch it here:

We start off by creating a new React app by running create-react-app command.

create-react-app voice-navigation

There are two npm modules that we need to install for this to work. The first one is react-router-dom, which we need for setting up multi-page navigation. We are not going to make a deep dive into React routing, but I will show you how to make a basic navigation with it.

You can install it by running

npm i react-router-dom

The second one is react-speech-recognition which we will use to convert our voice into JavaScript commands.

You can install it by running

npm i react-speech-recognition

I went ahead and set up a components folder and I started adding files to it. We are going to make several page components that we are going to pass into our router. They will pretty much act as our website pages which will be loaded when we click a menu item, or say a voice command. I made some simple function components that just return a heading.

// Home.js

import React from "react";

export default function Home() {
  return <h1>Welcome to HOME page</h1>;
}

// Contact.js

import React from "react";

export default function Contact() {
  return <h1>Welcome to CONTACT page</h1>;
}

// Blog.js

import React from "react";

export default function Blog() {
  return <h1>Welcome to BLOG page</h1>;
}

// NewBlogPost.js

import React from "react";

export default function NewBlogPost() {
  return <h1>Start adding your NEW BLOG POST here</h1>;
}

We just want something in there to give us a visual cue when we switch between pages.

All of our logic will go into the App.js component. To set it up I removed most of the create-react-app's stuff until I was left with a simple function component and I started importing my pages and plugins.

// App.js

import React, { useState } from "react";
import HomePage from "./Home";
import BlogPage from "./Blog";
import NewBlogPostPage from "./NewBlogPost";
import ContactPage from "./Contact";
import { 
  BrowserRouter, Route, Link, Redirect 
} from "react-router-dom";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";

function App() {
  return (
    <div className="App"></div>
  );
}

export default App;

Now we need to set up our navigation by using the BrowserRouter which we imported above. First we need to add our links, and React Router has a very neat component that is literally called Link. It's used for setting up internal urls for use-cases just like this. Instead of href we pass in a "to" prop.

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div id="links">
          <Link to="/">Home</Link>
          <Link to="/blog">Blog</Link>
          <Link to="/blog/new">Add Blog Post</Link>
          <Link to="/contact">Contact</Link>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

Next we need to set up our page routing. Here is what our component should look like after that:

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div id="links">
          <Link to="/">Home</Link>
          <Link to="/blog">Blog</Link>
          <Link to="/blog/new">Add Blog Post</Link>
          <Link to="/contact">Contact</Link>
        </div>

        <Route path="/" exact component={HomePage} />
        <Route path="/home" component={HomePage} />
        <Route path="/blog" exact component={BlogPage} />
        <Route path="/blog/new" component={NewBlogPostPage} />
        <Route path="/contact" component={ContactPage} />
      </BrowserRouter>
    </div>
  );
}

Route component is used to "tell" our app what should it do when we hit a certain route. We pass in two props, a path and the component which we want to load for it.

For example, if we hit the website root ("/") we want to display the HomePage component (which we imported from Home.js). If we hit "/contact" we want to show the ContactPage component etc.

When we add "exact" to a Route it means the route must be, well, exact, and not a part of a different route. If we didn't have that set up for our root the home component would show up on each page. For example, if you would go to /contact we would technically hit both the root and contact, since contact is part of the root.

Our basic navigation is now complete, so we can proceed with adding the voice recognition. First, we need to set up a simple useState hook for keeping track of the page that we want to redirect to.

const [redirectUrl, setRedirectUrl] = useState("");

Now we can set up our commands object which will have a simple command and its callback which will call the setRedirectUrl function. Here is what that looks like.

const commands = [
  {
    command: ["Open *"],
    callback: (redirectPage) => setRedirectUrl(redirectPage),
  },
];

The star / asterisk is a wildcard symbol which will "pick up" whatever we say and pass it into the callback function as a parameter. For instance, if we say "Open blog", it will pick up the word "blog" and use it as a parameter to set up our state.

Now we can take our commands object and pass it into the speech recognition hook.

const { transcript } = useSpeechRecognition({ commands });

Setting up this hook like this makes it so when we order our speech recognition to start listening - whatever we say will be stored in the transcript property. Also, if what we have said matches with one or our commands - its callback will be executed. We can also use this property to display whatever we've said on the page.

<p id="transcript">Transcript: {transcript}</p>

We can now add a button to activate the speech recognition listener.

<button onClick={SpeechRecognition.startListening}>Start</button>

Since not all browsers support speech recognition we should also add a check for support.

if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
  return null;
}

Your component should now look something like this:

function App() {
  const commands = [
    {
      command: ["Open *"],
      callback: (redirectPage) => setRedirectUrl(redirectPage),
    },
  ];

  const { transcript } = useSpeechRecognition({ commands });
  const [redirectUrl, setRedirectUrl] = useState("");

  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    return null;
  }

  return (
    <div className="App">
      <BrowserRouter>
        <div id="links">
          <Link to="/">Home</Link>
          <Link to="/blog">Blog</Link>
          <Link to="/blog/new">Add Blog Post</Link>
          <Link to="/contact">Contact</Link>
        </div>

        <Route path="/" exact component={HomePage} />
        <Route path="/home" component={HomePage} />
        <Route path="/blog" exact component={BlogPage} />
        <Route path="/blog/new" component={NewBlogPostPage} />
        <Route path="/contact" component={ContactPage} />
      </BrowserRouter>

      <p id="transcript">Transcript: {transcript}</p>

      <button onClick={SpeechRecognition.startListening}>Start</button>
    </div>
  );
}

export default App;

We are almost done. Now we need to check if our state property (redirectUrl) was changed by speech recognition and do something about it if it was.

To do that we will set up two helper properties.

  const pages = ["home", "blog", "new blog post", "contact"];
  const urls = {
    home: "/",
    blog: "/blog",
    "new blog post": "/blog/new",
    contact: "/contact",
  };

Pages array is essentially a list of our pages, and urls is an object in which we map our pages to their respective urls. You can absolutely do the url lookup without using the array, but the code will be a bit more readable this way, in my opinion.

Now we need to check if redirectUrl has a value and set up our redirect if it does.

  let redirect = "";

  if (redirectUrl) {
    if (pages.includes(redirectUrl)) {
      redirect = <Redirect to={urls[redirectUrl]} />;
    } else {
      redirect = <p>Could not find page: {redirectUrl}</p>;
    }
  }

Redirect is another React Router's component which is, as its name implies, used for redirecting. If speech recognition picks up a page from our command it will set it up as our redirectUrl state property. We can then check if our pages array contains that page. If it does - we find its url from our urls object and pass it into the Redirect component. If it doesn't we instead set up a message saying the page wasn't found. We also need to make sure to set up the Redirect component inside of our BrowserRouter, since it won't work outside of it.

Here is the final look of our App component:

import React, { useState } from "react";
import HomePage from "./Home";
import BlogPage from "./Blog";
import NewBlogPostPage from "./NewBlogPost";
import ContactPage from "./Contact";
import { BrowserRouter, Route, Link, Redirect } from "react-router-dom";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";

function App() {
  const commands = [
    {
      command: ["Open *"],
      callback: (redirectPage) => setRedirectUrl(redirectPage),
    },
  ];

  const { transcript } = useSpeechRecognition({ commands });
  const [redirectUrl, setRedirectUrl] = useState("");
  const pages = ["home", "blog", "new blog post", "contact"];
  const urls = {
    home: "/",
    blog: "/blog",
    "new blog post": "/blog/new",
    contact: "/contact",
  };

  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    return null;
  }

  let redirect = "";

  if (redirectUrl) {
    if (pages.includes(redirectUrl)) {
      redirect = <Redirect to={urls[redirectUrl]} />;
    } else {
      redirect = <p>Could not find page: {redirectUrl}</p>;
    }
  }

  return (
    <div className="App">
      <BrowserRouter>
        <div id="links">
          <Link to="/">Home</Link>
          <Link to="/blog">Blog</Link>
          <Link to="/blog/new">Add Blog Post</Link>
          <Link to="/contact">Contact</Link>
        </div>

        <Route path="/" exact component={HomePage} />
        <Route path="/home" component={HomePage} />
        <Route path="/blog" exact component={BlogPage} />
        <Route path="/blog/new" component={NewBlogPostPage} />
        <Route path="/contact" component={ContactPage} />

        {redirect}
      </BrowserRouter>

      <p id="transcript">Transcript: {transcript}</p>

      <button onClick={SpeechRecognition.startListening}>Start</button>
    </div>
  );
}

export default App;

If you want to add some CSS to this, here is what I've used inside of the index.css file. I've just set up some simple colors, centered everything, and added some spacing between all page elements.

@import url("https://fonts.googleapis.com/css2?family=Acme&display=swap");

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #eeeeee;
  color: #242225;
  font-family: "Acme", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#links {
  margin-bottom: 2rem;
}

a {
  margin: 0 1rem;
  text-decoration: none;
  color: rgb(25, 122, 202);
}

a:hover {
  text-decoration: underline;
}

h1 {
  margin-bottom: 1rem;
}

#transcript {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

button {
  background-color: rgb(25, 122, 202);
  color: #eeeeee;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
}

button:hover {
  background-color: rgb(22, 101, 167);
  cursor: pointer;
}

If you followed everything you should now have a functioning speech recognition which you can activate by clicking a button and it will load up the pages you ask it to. There is of course a lot of things that can be improved here, but as a starting concept I think it's a really interesting functionality.

In a real world situation there wouldn't be much point in clicking a button every time you want to say a command. You could instead have another state property which tracks if the voice recognition was turned on and it could keep it on while you are using the website.

You would also set up the routing outside of your main component, and everything in general could be made to be more modular. You could add more versatile commands to cover sentence variations and implement other voice controlled functionalities.

If you are interested into seeing the full working version you can check out the project on CodeSandbox.

If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs. Feel free to send me your own implementations of the project, especially if you decide to expand on it.

I also regularly upload React and web dev tutorials to YouTube, so if that's your cup of tea feel free to support me by subscribing to my channel.

Building a Task Management App in React

Aleks Popovic — Sat, 12 Dec 2020 15:28:07 +0000

Can you become more productive by making a productivity app? Not sure about that, but you can definitely become more productive by building new projects and a task management app has been on my mind for a long time now. I decided to build it in React without using any additional plugins except node-sass which allows you to use .scss files in your project.

If you prefer a video version of this tutorial you can watch me build a task management app on Youtube:

I started a new React app by running create-react-app command in my working folder.

create-react-app task-management

For this project I will focus more on the React part of the code, but there will be a SandBox link to a full code example that includes the CSS files as well. I mainly used flexbox to center elements, and that's pretty much 80% of the CSS used. The rest is adding custom colors and margins for separation between elements.

To start off - I removed all unnecessary code from App.js and I imported the StatusLine component, which we will use to sort out our tasks based on their status. I added it three times alongise an h1 heading, and I also added function skeletons that we will be implementing later.

import { useState, useEffect } from "react"
import "../styles/App.scss"
import StatusLine from "./StatusLine"

function App() {
  const [tasks, setTasks] = useState([])

  function addEmptyTask(status) {
    // do stuff
  }

  function addTask(taskToAdd) {
    // do stuff
  }

  function deleteTask(taskId) {
    // do stuff
  }

  function moveTask(id, newStatus) {
    // do stuff
  }

  function saveTasksToLocalStorage(tasks) {
    // do stuff
  }

  function loadTasksFromLocalStorage() {
    // do stuff
  }

  return (
    <div className="App">
      <h1>Task Management</h1>
      <main>
        <section>
          <StatusLine
            tasks={tasks}
            addEmptyTask={addEmptyTask}
            addTask={addTask}
            deleteTask={deleteTask}
            moveTask={moveTask}
            status="Backlog"
          />
          <StatusLine
            tasks={tasks}
            addEmptyTask={addEmptyTask}
            addTask={addTask}
            deleteTask={deleteTask}
            moveTask={moveTask}
            status="In Progress"
          />
          <StatusLine
            tasks={tasks}
            addEmptyTask={addEmptyTask}
            addTask={addTask}
            deleteTask={deleteTask}
            moveTask={moveTask}
            status="Done"
          />
        </section>
      </main>
    </div>
  )
}

export default App

We are passing in all of our task manipulation functions into the StatusLine components because we need to pass them into each individual Task component. We are also adding a status property which will be used to determine task's initial status and to also set up some headings.

Our tasks are going to be stored in an array of objects by using the useState hook. We also imported the useEffect hook because we will use it later to save and load our task data from the browser's localStorage.

Let's start implementing those functions.

function addEmptyTask(status) {
  const lastTask = tasks[tasks.length - 1]

  let newTaskId = 1

  if (lastTask !== undefined) {
    newTaskId = lastTask.id + 1
  }

  setTasks(tasks => [
    ...tasks,
    {
      id: newTaskId,
      title: "",
      description: "",
      urgency: "",
      status: status,
    },
  ])
}

We are going to use addEmptyTask() when we start adding a new task, so we just want to set it to the first available ID and leave all other properties empty, except for the status which we will pass into the function from the Task component. If we have no tasks we set the ID to 1 by default. After that we are free to set our state by merging the new empty task object with the existing array of tasks from our state.

function addTask(taskToAdd) {
  let filteredTasks = tasks.filter(task => {
    return task.id !== taskToAdd.id
  })

  let newTaskList = [...filteredTasks, taskToAdd]

  setTasks(newTaskList)

  saveTasksToLocalStorage(newTaskList)
}

When we enter all of our task properties we want to save it to our state. But, before that, we want to remove the empty task with the same ID, so we filter our tasks array. After that we merge the new task with the rest of the list and we save everything to local storage (we implement this function later).

function deleteTask(taskId) {
  let filteredTasks = tasks.filter(task => {
    return task.id !== taskId
  })

  setTasks(filteredTasks)

  saveTasksToLocalStorage(filteredTasks)
}

Deleting a task is as simple as filtering our tasks array just the way we did it for adding a new task. After that we once again set our state again and save everything in the local storage.

function moveTask(id, newStatus) {
  let task = tasks.filter(task => {
    return task.id === id
  })[0]

  let filteredTasks = tasks.filter(task => {
    return task.id !== id
  })

  task.status = newStatus

  let newTaskList = [...filteredTasks, task]

  setTasks(newTaskList)

  saveTasksToLocalStorage(newTaskList)
}

Our moveTask function is going to be used to move a task from one status to the next, or previous one. We filter our tasks list to search for the task that needs to be moved and to remove it from the state so we can change its status. After changing the tasks status we once again merge it back into the state and save everything to local storage.

function saveTasksToLocalStorage(tasks) {
  localStorage.setItem("tasks", JSON.stringify(tasks))
}

Local storage supports only storing string values, but our tasks are stored as an array of objects. To get around this restriction we need to use JSON.stringify to transform our data into a string. After that we call the setItem function which will store our tasks.

function loadTasksFromLocalStorage() {
  let loadedTasks = localStorage.getItem("tasks")

  let tasks = JSON.parse(loadedTasks)

  if (tasks) {
    setTasks(tasks)
  }
}

To retrieve our data from the local storage we need to revert our data from a string to an array of objects. For that we use JSON.parse function and then we are free to set our state. In order to call this function only once we need to implement the useEffect hook.

useEffect(() => {
  loadTasksFromLocalStorage()
}, [])

We call our function and as a second parameter inside useEffect we pass in an empty array. The second parameter is used to prevent useEffect from triggering on every render. By giving it an array of properties to watch we will activate useEffect only when those properties change. But, if we pass in an empty array the useEffect will trigger only once, on the first page load, and that is exactly what we want.

With all functions implemented we are ready to move on to the StatusLine component.

import "../styles/statusLine.scss"
import Task from "./Task"

export default function StatusLine(props) {
  const { status, tasks, addTask, deleteTask, addEmptyTask, moveTask } = props

  let taskList, tasksForStatus

  function handleAddEmpty() {
    addEmptyTask(status)
  }

  if (tasks) {
    tasksForStatus = tasks.filter(task => {
      return task.status === status
    })
  }

  if (tasksForStatus) {
    taskList = tasksForStatus.map(task => {
      return (
        <Task
          addTask={task => addTask(task)}
          deleteTask={id => deleteTask(id)}
          moveTask={(id, status) => moveTask(id, status)}
          key={task.id}
          task={task}
        />
      )
    })
  }

  return (
    <div className="statusLine">
      <h3>{status}</h3>
      {taskList}
      <button onClick={handleAddEmpty} className="button addTask">
        +
      </button>
    </div>
  )
}

It may look like there is a lot happening here, but there really isn't. We are picking up all of the props that we passed in from the App component. We use the status prop to filter the task array and display only tasks with that status. If we have tasks in our state we map them into Task components into which we pass in our functions for adding, deleting and moving a task, and also the task data itself. We handle adding an empty task with a simple button with an onClick event.

Now we need to set up our Task component and we are done!

import "../styles/task.scss"
import { useState } from "react"

export default function Task(props) {
  const { addTask, deleteTask, moveTask, task } = props

  const [urgencyLevel, setUrgencyLevel] = useState(task.urgency)
  const [collapsed, setCollapsed] = useState(task.isCollapsed)
  const [formAction, setFormAction] = useState("")

  function setUrgency(event) {
    setUrgencyLevel(event.target.attributes.urgency.value)
  }

  function handleSubmit(event) {
    // do stuff
  }

  function handleMoveLeft() {
    // do stuff
  }

  function handleMoveRight() {
    // do stuff
  }

  return (
    <div className={`task ${collapsed ? "collapsedTask" : ""}`}>
      <button onClick={handleMoveLeft} className="button moveTask">
        &#171;
      </button>
      <form onSubmit={handleSubmit} className={collapsed ? "collapsed" : ""}>
        <input
          type="text"
          className="title input"
          name="title"
          placeholder="Enter Title"
          disabled={collapsed}
          defaultValue={task.title}
        />
        <textarea
          rows="2"
          className="description input"
          name="description"
          placeholder="Enter Description"
          defaultValue={task.description}
        />
        <div className="urgencyLabels">
          <label className={`low ${urgencyLevel === "low" ? "selected" : ""}`}>
            <input
              urgency="low"
              onChange={setUrgency}
              type="radio"
              name="urgency"
            />
            low
          </label>
          <label
            className={`medium ${urgencyLevel === "medium" ? "selected" : ""}`}
          >
            <input
              urgency="medium"
              onChange={setUrgency}
              type="radio"
              name="urgency"
            />
            medium
          </label>
          <label
            className={`high ${urgencyLevel === "high" ? "selected" : ""}`}
          >
            <input
              urgency="high"
              onChange={setUrgency}
              type="radio"
              name="urgency"
            />
            high
          </label>
        </div>
        <button
          onClick={() => {
            setFormAction("save")
          }}
          className="button"
        >
          {collapsed ? "Edit" : "Save"}
        </button>
        {collapsed && (
          <button
            onClick={() => {
              setFormAction("delete")
            }}
            className="button delete"
          >
            X
          </button>
        )}
      </form>
      <button onClick={handleMoveRight} className="button moveTask">
        &#187;
      </button>
    </div>
  )
}

We have a couple of interesting things happening here. We have two buttons which we will use to call the moveTask function and switch the task's status.

We also have a form with input fields for task's title and description. There is also the urgencyLabels container which is a group of radio buttons for switching the task's status. Getting the checked radio button's value is a bit tricky in react, so we will handle the urgency through state, but everything else we can submit as a form field.

I have set up some helper classes - "collapsed", "collapsedTask" and "selected". I wanted to collapse tasks when they get saved and loaded from storage, so the screen doesn't get too cluttered. This is handled with the isCollapsed property that each new task will have, and everything else is done through CSS. If a task has isCollapsed = true, my CSS takes care of collapsing everything except for the title, urgency and control buttons. We also reveal a delete button which you can use to get rid of a task completely.

We are also reusing the Save button to edit an already created task. Since we have two buttons in a form we need to handle our form's onSubmit event.

function handleSubmit(event) {
  event.preventDefault()

  if (formAction === "save") {
    if (collapsed) {
      setCollapsed(false)
    } else {
      let newTask = {
        id: task.id,
        title: event.target.elements.title.value,
        description: event.target.elements.description.value,
        urgency: urgencyLevel,
        status: task.status,
        isCollapsed: true,
      }

      addTask(newTask)
      setCollapsed(true)
    }
  }

  if (formAction === "delete") {
    deleteTask(task.id)
  }
}

If our form action is set to save that means we are trying to either save a task or edit it. If we are trying to edit it we don't want to actually submit a form - we just want to "uncollapse" it. If we are saving a task then we create a new object with the properties from the form and from the state. If we are trying to delete the task we just call our deleteTask function while passing in the task's ID.

To be able to move a task between status lanes I made two functions which are very similar in what they do, but this makes the code more readable.

function handleMoveLeft() {
  let newStatus = ""

  if (task.status === "In Progress") {
    newStatus = "Backlog"
  } else if (task.status === "Done") {
    newStatus = "In Progress"
  }

  if (newStatus !== "") {
    moveTask(task.id, newStatus)
  }
}

function handleMoveRight() {
  let newStatus = ""

  if (task.status === "Backlog") {
    newStatus = "In Progress"
  } else if (task.status === "In Progress") {
    newStatus = "Done"
  }

  if (newStatus !== "") {
    moveTask(task.id, newStatus)
  }
}

Both functions look at the task's current status and set the new status based on what we are trying to do. Backlog is our left-most status so clicking the moveLeft button while the task is in the Backlog won't do anything. Similar is true for the Done status and clicking the moveRight button.

And that is all of the code I've used for this project, except for the CSS. If you are interested into seeing the full working version you can check out the project on CodeSandbox.

If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.

I also regularly upload React and web dev tutorials to YouTube, so if that's your cup of tea feel free to support me by subscribing to my channel.

How to build a Pixel Art Drawing App in React

Aleks Popovic — Sat, 05 Dec 2020 15:55:53 +0000

Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel art is really great. Some game developers are adjusting their workflows to transform their end product into a pixel art game even though they might start with 3d modeling at first. Others go the usual way of drawing sprites in a Pixel Art Editor and that is exactly what we are going to build today. We will go over how to generate a dynamic pixel grid, how to set up a color picker, how to actually draw pixels and in the end how to export your finished pixel art into a png image.

If you prefer a video version you can watch me build this on Youtube:

I started a new React app by running create-react-app command in my working folder.

create-react-app pixels

For this project I will focuse more on the React part of the code, but there will be a SandBox link to a full code example that includes the CSS files as well. I mainly used flexbox to center elements, and that's pretty much 80% of the CSS used. The rest is adding custom colors and margins for separation between elements.

To start off - I removed all unnecessary code from App.js and I imported the Editor component, which is going to be the heart of this app.

import "../styles/App.scss"
import Editor from "./Editor"

function App() {
  return (
    <div className="App">
      <Editor />
    </div>
  )
}

export default App

Next we need to set up the Editor.

import React, { useState } from "react"
import "../styles/editor.scss"

export default function Editor() {
  return (
    <div id="editor">
      <h1>Pixel Editor</h1>
      <h2>Enter Panel Dimensions</h2>

      <div id="options">
        <div className="option">
          <input type="number" className="panelInput" />
          <span>Width</span>
        </div>
        <div className="option">
          <input type="number" className="panelInput" />
          <span>Height</span>
        </div>
      </div>

      <button className="button">Start Drawing</button>
    </div>
  )
}

We have a coupled of heading elements and some input fields which we will use to dynamically set the drawing panel's width and height. There is also a button which we will use to hide the options and initialize the drawing panel, but also to reset the pixel grid if the user wants to start over. To do that we need to set up some useState hooks.

import React, { useState } from "react"
import "../styles/editor.scss"

export default function Editor() {
  const [panelWidth, setPanelWidth] = useState(16)
  const [panelHeight, setPanelHeight] = useState(16)
  const [hideOptions, setHideOptions] = useState(false)
  const [hideDrawingPanel, setHideDrawingPanel] = useState(true)
  const [buttonText, setButtonText] = useState("start drawing")
  const [selectedColor, setColor] = useState("#f44336")

  function initializeDrawingPanel() {
    setHideOptions(!hideOptions)
    setHideDrawingPanel(!hideDrawingPanel)

    buttonText === "start drawing"
      ? setButtonText("reset")
      : setButtonText("start drawing")
  }

  return (
    <div id="editor">
      <h1>Pixel Editor</h1>
      {hideDrawingPanel && <h2>Enter Panel Dimensions</h2>}
      {hideDrawingPanel && (
        <div id="options">
          <div className="option">
            <input
              type="number"
              className="panelInput"
              defaultValue={panelWidth}
              onChange={e => {
                setPanelWidth(e.target.value)
              }}
            />
            <span>Width</span>
          </div>
          <div className="option">
            <input
              type="number"
              className="panelInput"
              defaultValue={panelHeight}
              onChange={e => {
                setPanelHeight(e.target.value)
              }}
            />
            <span>Height</span>
          </div>
        </div>
      )}
      <button onClick={initializeDrawingPanel} className="button">
        {buttonText}
      </button>
    </div>
  )
}

With useState we are controlling the width and height of the drawing panel. I've also added some properties to control the element visibility. After you set up the dimensions and click the button to start drawing - all of the options will be hidden until we click our repurposed Reset button.

A drawing app wouldn't be very useful without any colorin options. For this project I decided to use a plugin react-color which has a lot of different color picker options. I've chosen their CirclePicker component, but you can find the full list of possibilities on their website, and they all work in a similar way.

You can install it by running

npm install react-color

Now we need to set it up.

import React, { useState } from "react"
import "../styles/editor.scss"
import { CirclePicker } from "react-color"

export default function Editor() {
  const [panelWidth, setPanelWidth] = useState(16)
  const [panelHeight, setPanelHeight] = useState(16)
  const [hideOptions, setHideOptions] = useState(false)
  const [hideDrawingPanel, setHideDrawingPanel] = useState(true)
  const [buttonText, setButtonText] = useState("start drawing")
  const [selectedColor, setColor] = useState("#f44336")

  function initializeDrawingPanel() {
    setHideOptions(!hideOptions)
    setHideDrawingPanel(!hideDrawingPanel)

    buttonText === "start drawing"
      ? setButtonText("reset")
      : setButtonText("start drawing")
  }

  function changeColor(color) {
    setColor(color.hex)
  }

  return (
    <div id="editor">
      <h1>Pixel Editor</h1>
      {hideDrawingPanel && <h2>Enter Panel Dimensions</h2>}
      {hideDrawingPanel && (
        <div id="options">
          <div className="option">
            <input
              type="number"
              className="panelInput"
              defaultValue={panelWidth}
              onChange={e => {
                setPanelWidth(e.target.value)
              }}
            />
            <span>Width</span>
          </div>
          <div className="option">
            <input
              type="number"
              className="panelInput"
              defaultValue={panelHeight}
              onChange={e => {
                setPanelHeight(e.target.value)
              }}
            />
            <span>Height</span>
          </div>
        </div>
      )}
      <button onClick={initializeDrawingPanel} className="button">
        {buttonText}
      </button>
      {hideOptions && (
        <CirclePicker color={selectedColor} onChangeComplete={changeColor} />
      )}
    </div>
  )
}

The color propc in the CirclePicker is used to mark which color is currently selected, useChangeComplete is the component's event which you can use to trigger an action. In our case, after selecting a different color from the picker we want to switch our selected color state.

The only thing left to do in the Editor is to add the DrawingPanel component which we yet need need to build out.

We import the component the usual way:

import DrawingPanel from "./DrawingPanel"

We can add it into our code right below the button:

{
  hideOptions && (
    <DrawingPanel
      width={panelWidth}
      height={panelHeight}
      selectedColor={selectedColor}
    />
  )
}

Here is what the DrawingPanel component looks like:

import React, { useRef } from "react"
import "../styles/drawingPanel.scss"
import Row from "./Row"

export default function DrawingPanel(props) {
  const { width, height, selectedColor } = props

  let rows = []

  for (let i = 0; i < height; i++) {
    rows.push(<Row key={i} width={width} selectedColor={selectedColor} />)
  }

  return (
    <div id="drawingPanel">
      <div id="pixels">{rows}</div>
    </div>
  )
}

Based on the entered height we generate the same number of rows and we push them to a div container, but we also need to pass in our width to each Row component so we know how many "pixels" per row we need to generate. Next we need to set up the Row component, but we will come back to the DrawingPanel to set up our exporting to PNG.

import React from "react"
import "../styles/row.scss"
import Pixel from "./Pixel"

export default function Row(props) {
  const { width, selectedColor } = props

  let pixels = []

  for (let i = 0; i < width; i++) {
    pixels.push(<Pixel key={i} selectedColor={selectedColor} />)
  }

  return <div className="row">{pixels}</div>
}

As you can see - we are generating pixels per row in the same way we are setting up rows in the drawing panel. Now we need to set up the Pixel component and we are almost done!

import React, { useState } from "react"
import "../styles/pixel.scss"

export default function Pixel(props) {
  const { selectedColor } = props

  const [pixelColor, setPixelColor] = useState("#fff")
  const [oldColor, setOldColor] = useState(pixelColor)
  const [canChangeColor, setCanChangeColor] = useState(true)

  function applyColor() {
    setPixelColor(selectedColor)
    setCanChangeColor(false)
  }

  function changeColorOnHover() {
    setOldColor(pixelColor)
    setPixelColor(selectedColor)
  }

  function resetColor() {
    if (canChangeColor) {
      setPixelColor(oldColor)
    }

    setCanChangeColor(true)
  }

  return (
    <div
      className="pixel"
      onClick={applyColor}
      onMouseEnter={changeColorOnHover}
      onMouseLeave={resetColor}
      style={{ backgroundColor: pixelColor }}
    ></div>
  )
}

I wanted to have a visual indicator for being able to draw instead of just having a cursor change to pointer through CSS. So, I've set up some more useState hooks to help with that. The idea here is that we want to temporarily change the pixel's color when we hover it. If we hover out, we want to return it to its old color, which we store as a separate state. However, if we click on it before hovering out, we want to permanently set that color, and for that reason we have a helper state property canChangeColor to prevent onMouseLeave messing up our color change.

We are done with setting up the drawing functions, which means the only thing left is to set up our exporting. Back to the DrawingPanel component!

First we need to install the exporting plugin:

npm install react-component-export-image

After that we need to set it up with a useRef hook. The plugin needs a reference to a component or element that is being exported to an image.

import React, { useRef } from "react"
import "../styles/drawingPanel.scss"
import Row from "./Row"

import { exportComponentAsPNG } from "react-component-export-image"

export default function DrawingPanel(props) {
  const { width, height, selectedColor } = props

  const panelRef = useRef()

  let rows = []

  for (let i = 0; i < height; i++) {
    rows.push(<Row key={i} width={width} selectedColor={selectedColor} />)
  }

  return (
    <div id="drawingPanel">
      <div id="pixels" ref={panelRef}>
        {rows}
      </div>
      <button onClick={() => exportComponentAsPNG(panelRef)} className="button">
        Export as PNG
      </button>
    </div>
  )
}

Now if you draw something in the panel and click our new export button you should get a new PNG image with your exported component. You can also use this plugin to export components to JPEG and PDF formats.

And that is all of the code I've used for this project, except for the CSS. If you are interested into seeing the full working version you can check out the project on CodeSandbox.

If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.

I also regularly upload React and web dev tutorials to Youtube, so if that's your cup of tea feel free to support me by subscribing to my channel.