Aleks Popovic - personal website and blog

Easy Customizable Star Rating Component in React

Tue, 14 Nov 2023 00:00:00 GMT

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.

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.

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

Thu, 09 Nov 2023 00:00:00 GMT

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!

Comic Book App With Marvel API and React

Thu, 02 Nov 2023 00:00:00 GMT

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!

Radio Player App in React

Tue, 09 Mar 2021 00:00:00 GMT

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 want to see the live app in action check out this CodeSandbox:

Infinite Pomodoro App in React

Sun, 21 Feb 2021 00:00:00 GMT

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>
  )
}

How to get a job with no experience

Sun, 24 Jan 2021 00:00:00 GMT

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

Sun, 17 Jan 2021 00:00:00 GMT

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

Sun, 03 Jan 2021 00:00:00 GMT

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

Sun, 27 Dec 2020 00:00:00 GMT

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

Sat, 19 Dec 2020 00:00:00 GMT

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.

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.

Building a Task Management App in React

Sat, 12 Dec 2020 00:00:00 GMT

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 alongside 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 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 build a Pixel Art Drawing App in React

Sat, 05 Dec 2020 00:00:00 GMT

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

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 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.

Easiest way to set up your GitHub profile page

Fri, 27 Nov 2020 00:00:00 GMT

If you are a developer you probably have a GitHub account, and if you’re like me your profile page is probably empty. I would even say barren. Utterly uninteresting? If that’s true then you are at the right place, because in this tutorial I am going to show you some quick and easy tips to make your GitHub profile at least somewhat presentable.

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

Setting up the repo

To start off - you need to have a GitHub account, which I assume you do. You will also need to create a super-secret type of repo, which is just a repo with the exact same name as your GitHub account name. You need to initialize it as a public repo with a ReadMe file, because that is where all the magic happens.

We need to edit the readme file with some markdown and it will all show up on our profile page once we commit the changes. You can do all of these edits straight from the GitHub’s file editor, or you can do it from your preferred text editor and upload the changes to your repo after you are finished. If you are unfamiliar with markup or need a quick refresher you can always reference this Markdown CheatSheet on GitHub.

Using images

You can use images in your ReadMe file, just as you would in regular markdown/HTML. For ease of access you can opt to upload your images into the same repo as your profile ReadMe, and then you can access them like this:

![logo](BannerTransparent.png "banner")

// Logo is the image alt text
// BannerTransparent.png is the image we are showing (it needs to be on the same level as the ReadMe file)
// banner is the popup text you get on hover. Feel free to change these to fit your image.

or like this:

<img src="/BannerTransparent.png" alt="banner" />

// Regular HTML works in markdown

You can also align your images, as well as your other page elements, to left, right, or center, by using the “align” property (works only with HTML syntax):

<img src="/BannerTransparent.png" alt="banner" align="center" />

// Instead of "center" you can use "left" or "right"

Headings and text in markdown

To create headings you need to use the hashtag symbol - #. The number of symbols determines the heading level.

# Hi there and welcome to my GitHub page 👋 - level 1

## Hi there and welcome to my GitHub page 👋 - level 2

### Hi there and welcome to my GitHub page 👋 - level 3

#### Hi there and welcome to my GitHub page 👋 - level 4

##### Hi there and welcome to my GitHub page 👋 - level 5

###### Hi there and welcome to my GitHub page 👋 - level 6

For the main part of your profile you can write any sort of text without specific markdown syntax and GitHub will even give you some prompts, like “I am currently working on…”, “My interests are…” and similar. You can customize that however you like, but I want to focus on some very useful tools that you can use to showcase your skills, tools, programming languages and other GitHub stats.

Set up custom tech badges

Most of us will want to display the technologies we use in our day to day work and there are two awesome tools you can use to create very nice and shiny badges for pretty much any tech you use. They are Shields.io and SimpleIcons.org and here is an example of what you can create with them.

Style: For the Badge

Style: Flat

Style: Flat Square

Style: Plastic

The syntax is really simple, and like I said, you can create a custom badge for any technology, language or tool you can think of. Here is what it looks like:

<img src="https://img.shields.io/badge/BadgeText-HexColor?logo=SimpleIconName&logoColor=ColorName&style=ShieldStyle" />

Let’s break down all of the properties from that Url.

The BadgeText is your label or badge text. In my examples above those would be React, Angular, Gatsby etc.

HexColor is hex value of the color you want for your badge. If you want to stick with the official logo color for the tech/tool you are putting on the badge - you can find that on SimpleIcons.org. Just enter your tech in the search bar and you will get the logo image, logo name and it’s hex color value. It’s pretty sweet. While you are there make sure to grab the logo name as well, since that is what you need to use instead of the SimpleIconName in my example Url above.

Replace ColorName to a desired logo color. You can find the list of available color names on Shields.io.

Lastly, you need to switch ShieldStyle with one of the four values I mentioned above: plastic, flat, flat-square or for-the-badge. This will change the shape and look of your badge and you can see the examples above.

There are additional properties that you can change which I didn’t use here, and you can find them on the official website.

Once you are done creating you badges you will probably want to put them in a single line in your GitHub ReadMe. To do this you need to wrap all image tags into a paragraph tag and it will work like a charm.

Here is the code example for what I used in my profile ReadMe:

<p>
  <img alt="React" src="https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=white&style=for-the-badge" />
  <img alt="Angular" src="https://img.shields.io/badge/Angular-DD0031?logo=angular&logoColor=white&style=for-the-badge" />
  <img alt="JavaScript" src="https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=white&style=for-the-badge" />
  <img alt="HTML" src="https://img.shields.io/badge/HTML-E34F26?logo=html5&logoColor=white&style=for-the-badge" />
  <img alt="Css" src="https://img.shields.io/badge/CSS-1572B6?logo=css3&logoColor=white&style=for-the-badge" />
  <img alt="Sass" src="https://img.shields.io/badge/Sass-CC6699?logo=sass&logoColor=white&style=for-the-badge" />
  <img alt="Gatsby" src="https://img.shields.io/badge/Gatsby-663399?logo=gatsby&logoColor=white&style=for-the-badge" />
  <img alt="GraphQl" src="https://img.shields.io/badge/GraphQL-E10098?logo=graphql&logoColor=white&style=for-the-badge" />
  <img alt="C Sharp" src="https://img.shields.io/badge/C%23-239120?logo=c-sharp&logoColor=white&style=for-the-badge" />
  <img alt="Unity" src="https://img.shields.io/badge/Unity-000000?logo=unity&logoColor=white&style=for-the-badge" />
</p>

If you want to create contact cards/badges you can make them the same way. Like I said, you are not limited to just programming language logos. If you want them to link to your email or social media you will have to wrap them inside of a url tag, like this:

<a href="https://www.youtube.com/channel/UCu3RVedqyL5o776xyQlbyAw">
  <img
    alt="Youtube"
    src="https://img.shields.io/badge/youtube-FF0000?logo=youtube&logoColor=white&style=for-the-badge"
  />
</a>
<a href="https://twitter.com/alekswritescode">
  <img
    alt="Twitter"
    src="https://img.shields.io/badge/Twitter-1DA1F2?logo=twitter&logoColor=white&style=for-the-badge"
  />
</a>
<a href="https://www.instagram.com/aleks.popovic/">
  <img
    alt="Instagram"
    src="https://img.shields.io/badge/Instagram-E4405F?logo=instagram&logoColor=white&style=for-the-badge"
  />
</a>
<a href="https://www.linkedin.com/in/alekspopovic/">
  <img
    alt="Linkedin"
    src="https://img.shields.io/badge/linkedin-0077B5?logo=linkedin&logoColor=white&style=for-the-badge"
  />
</a>

GitHub Stats

If you are interested into setting up all sorts of different stats on your GitHub profile you should definitely check out this awesome repo. I will show you how to use a couple of cool widgets from there, namely - GitHub Stats Card and Top Languages Card.

Github Stats Card

There is an easy way to display all of your GitHub stats using this simple widget. You just need to take this line of code in markdown or HTML, enter your GitHub username and paste it into your ReadMe file:

![github stats](https://github-readme-stats.vercel.app/api?username=YourUsername)

<img src="https://github-readme-stats.vercel.app/api?username=YourUsername" />

Apart from entering your username, which is mandatory to see the stats, you can also enter other parameters to customize the display card. One of them is theme, which you can use to set up one of existing color themes. You can find the full list of them in the repo, but you can also customize all of the colors on your own, or even submit a new theme.

Here is an example of how you can customize the card to display stats for private repos, use a custom card title, show icons for each stat and use a custom color for text, title and icons:

<img
  src="https://github-readme-stats.vercel.app/api?username=alekspopovic&count_private=true&title_color=FD9047&icon_color=FD9047&text_color=0C2233&custom_title=Aleks+Popovic's+GitHub+Stats&show_icons=true"
/>

You can find the list of all parameters in the repo, as well as their potential values.

Top Languages Card

If you want to show your visitors what programming languages you mostly use in your repos there is an easy way to do that as well. Here is the code you need to enter into your ReadMe and don’t forget to enter your own username:

![Top languages](https://github-readme-stats.vercel.app/api/top-langs/?username=alekspopovic)

<img
  src="https://github-readme-stats.vercel.app/api/top-langs/?username=alekspopovic"
/>

As far as additional parameters go you can use hide to block one or more languages from showing, langs_count to increase or decrease the number of languages shown (default value is 5) and layout=compact to display a one-line graphical spread with a percentage list.

Wakatime Week Stats

This one gets an honorable mention since I don’t use Wakatime myself, but it looks very cool so I couldn’t leave it out. If you never heard about it - Wakatime is an “open source plugin for metrics about your programming”. It measures your daily productivity and tracks all sorts of stats about your programming languages and general coding habits.

To use it you will need to create an account on their official website and follow the setup instructions for your favorite IDE or text editor.

After that you can use it in a similar way to the previous two, but this time you will need to swap in your Wakatime username.

![Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=USERNAME)

<img
  src="https://github-readme-stats.vercel.app/api/wakatime?username=USERNAME"
/>

If you are using Wakatime please let me know what are your impressions and if it’s helped you with your productivity. I’m really curious because I am considering to start using it myself.

Additional inspiration

Like I said in the introduction - my GitHub profile was empty just a couple of days ago. I was inspired to add stuff to it when I saw this Twitter thread by Jack Forge. I was scrolling through the multitude of responses, clicking to all the different profiles and I thought to myself - Damn, these people have really cool looking GitHub profiles. I want to make something like that.

Once I did that I wanted to share what I found and figured out with you. You can find some pretty nice profiles in there, but if you want some more examples of what can be done with just some markdown - you can check out this great repo with a list of awesome GitHub profiles.

If you want to check out my modest GitHub profile which features most of the examples I outlined in this tutorial you can find it here.

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 Simple Timeline in React

Sun, 22 Nov 2020 00:00:00 GMT

A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education history, past projects, your blog posts and everything else that can be structured in a timeline. You can potentially build this on your own, or you can use one of the existing plugins which are very easy to setup and look pretty good out of the box. I will show you one of those plugins and an example of how you can generate all elements with some simulated data and you will have your own timeline in no time.

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 timeline

The plan is to build a Component which can pull all of our job and education history, including titles, dates, descriptions etc. and programmatically create a timeline out of it. I will simulate a database by using a separate JavaScript file which exports an array of objects containg all data, but you can use whatever you have available, or just use mine. Here is what the file timelineElements.js looks like:

let timelineElements = [
  {
    id: 1,
    title: "Frontend Developer",
    location: "Dragontail, Ascana",
    description:
      "Converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.",
    buttonText: "View Frontend Projects",
    date: "August 2016 - present",
    icon: "work",
  },
  {
    id: 2,
    title: "Backend Developer",
    location: "Skystead, Craonia",
    description:
      "Working hand-in-hand with front-end developers by providing the outward facing web application elements server-side logic. Creating the logic to make the web app function properly, and accomplishing this through the use of server-side scripting languages.",
    buttonText: "View Backend Projects",
    date: "June 2013 - August 2016",
    icon: "work",
  },
  {
    id: 3,
    title: "Quality Assurance Engineer",
    location: "South Warren, Geshington",
    description:
      "Assessing the quality of specifications and technical design documents in order to ensure timely, relevant and meaningful feedback.",
    buttonText: "Company Website",
    date: "September 2011 - June 2013",
    icon: "work",
  },
  {
    id: 4,
    title: "Oak Ridge College",
    location: "South Warren, Geshington",
    description:
      "Online Course in Magical Beasts and Wonders of the World - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque sagittis tellus, non ultrices lacus tempus vel.",
    buttonText: "Course Certificate",
    date: "September 2011",
    icon: "school",
  },
  {
    id: 5,
    title: "Hawking College",
    location: "Skystead, Craonia",
    description:
      "College - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque sagittis tellus, non ultrices lacus tempus vel.",
    buttonText: "College Projects",
    date: "2007 - 2011",
    icon: "school",
  },
  {
    id: 6,
    title: "Marble Hills Grammar School",
    location: "Dragontail, Ascana",
    description:
      "Highschool - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque sagittis tellus, non ultrices lacus tempus vel.",
    date: "2003 - 2007",
    icon: "school",
  },
]

export default timelineElements

As our data is going to contain previous jobs and school information we will need two separate icons to display it. I found a couple of svg icons online - pc monitor for jobs, and college hat for education.

We also need to install the timeline plugin by running the npm command:

npm i react-vertical-timeline-component

Since this is a simple project I am going to put everything inside of the App component except for the css which will go into a separate App.css file. To start of we need to import the plugin, data file and our svg icons.

import "./App.css"
import { ReactComponent as WorkIcon } from "./work.svg"
import { ReactComponent as SchoolIcon } from "./school.svg"

import timelineElements from "./timelineElements"

import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component"

import "react-vertical-timeline-component/style.min.css"

function App() {
  return (
    <div>
      <h1 className="title">Timeline</h1>
      <VerticalTimeline></VerticalTimeline>
    </div>
  )
}

export default App

We need to map out our data file into timeline elements.

import "./App.css"
import { ReactComponent as WorkIcon } from "./work.svg"
import { ReactComponent as SchoolIcon } from "./school.svg"

import timelineElements from "./timelineElements"

import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component"

import "react-vertical-timeline-component/style.min.css"

function App() {
  return (
    <div>
      <h1 className="title">Timeline</h1>
      <VerticalTimeline>
        {timelineElements.map(element => {          return (            <VerticalTimelineElement              key={element.key}              date={element.date}              dateClassName="date"            >              <h3 className="vertical-timeline-element-title">                {element.title}              </h3>              <h5 className="vertical-timeline-element-subtitle">                {element.location}              </h5>              <p id="description">{element.description}</p>            </VerticalTimelineElement>          )        })}      </VerticalTimeline>
    </div>
  )
}

export default App

The timeline plugin gives us an option to set up an object for the icon styles, and we can use this to set a different icon with different styles based on the type of icon defined in the file.

import "./App.css"
import { ReactComponent as WorkIcon } from "./work.svg"
import { ReactComponent as SchoolIcon } from "./school.svg"

import timelineElements from "./timelineElements"

import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component"

import "react-vertical-timeline-component/style.min.css"

function App() {
  let workIconStyles = { background: "#06D6A0" }  let schoolIconStyles = { background: "#f9c74f" }
  return (
    <div>
      <h1 className="title">Timeline</h1>
      <VerticalTimeline>
        {timelineElements.map(element => {
          let isWorkIcon = element.icon === "work"

          return (
            <VerticalTimelineElement
              key={element.key}
              date={element.date}
              dateClassName="date"
              iconStyle={isWorkIcon ? workIconStyles : schoolIconStyles}              icon={isWorkIcon ? <WorkIcon /> : <SchoolIcon />}            >
              <h3 className="vertical-timeline-element-title">
                {element.title}
              </h3>
              <h5 className="vertical-timeline-element-subtitle">
                {element.location}
              </h5>
              <p id="description">{element.description}</p>
            </VerticalTimelineElement>
          )
        })}
      </VerticalTimeline>
    </div>
  )
}

export default App

We can also set up a custom button for each of the timeline elements which can also have different styles applied to it depending on the timeline element type.

import "./App.css"
import { ReactComponent as WorkIcon } from "./work.svg"
import { ReactComponent as SchoolIcon } from "./school.svg"

import timelineElements from "./timelineElements"

import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component"

import "react-vertical-timeline-component/style.min.css"

function App() {
  let workIconStyles = { background: "#06D6A0" }
  let schoolIconStyles = { background: "#f9c74f" }

  return (
    <div>
      <h1 className="title">Timeline</h1>
      <VerticalTimeline>
        {timelineElements.map(element => {
          let isWorkIcon = element.icon === "work"
          let showButton =            element.buttonText !== undefined &&            element.buttonText !== null &&            element.buttonText !== ""
          return (
            <VerticalTimelineElement
              key={element.key}
              date={element.date}
              dateClassName="date"
              iconStyle={isWorkIcon ? workIconStyles : schoolIconStyles}
              icon={isWorkIcon ? <WorkIcon /> : <SchoolIcon />}
            >
              <h3 className="vertical-timeline-element-title">
                {element.title}
              </h3>
              <h5 className="vertical-timeline-element-subtitle">
                {element.location}
              </h5>
              <p id="description">{element.description}</p>
              {showButton && (                <a                  className={`button ${                    isWorkIcon ? "workButton" : "schoolButton"                  }`}                  href="/"                >                  {element.buttonText}                </a>              )}            </VerticalTimelineElement>
          )
        })}
      </VerticalTimeline>
    </div>
  )
}

export default App

With that our component is finished and we can move on to the App.css file and apply the rest of our styling.

body {
  background: #3da3d5;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  color: rgb(53, 53, 53);
}

.title {
  font-size: 15em;
  text-align: center;
  font-family: "Bebas Neue", sans-serif;
}

h3 {
  padding-top: 0.25em;
}

.vertical-timeline-element-content {
  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25), 0 0.4em 1.25em 0 rgba(0, 0, 0, 0.15) !important;
  padding: 2em 3em !important;
}

.date {
  color: rgb(201, 251, 255);
}

#description {
  margin: 1.5em 0 2em 0;
}

.button {
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: 5px;
  color: white;
}

.workButton {
  background-color: #06d6a0;
}

.workButton:hover {
  background-color: #0ac593;
}

.schoolButton {
  background-color: #f9c74f;
}

.schoolButton:hover {
  background-color: #f3bc3c;
}

I’ve made the date text a very light blue color which becomes a bit unreadable once we switch to a screen width lower than 1700px. We can fix this along with its awkward positioning by using a simple media rule.

@media only screen and (max-width: 1700px) {
  .vertical-timeline-element-date {
    display: block !important;
    float: none !important;
    color: rgb(44, 44, 44);
    margin-top: 1.5em;
  }
}

If you followed along successfully you should now have a prototype of a simple, yet versatile timeline. The plugin itself allows you to add and switch many different things. For full documentation take a look at its official npm page.

You can find the full code on my GitHub.

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.

How to build Instagram in React

Tue, 17 Nov 2020 00:00:00 GMT

Instagram has such a simple, yet elegant design, and on top of that it’s very modular. It’s almost like a puzzle because it has a lot of parts that can be reused throughout the app which makes it very interesting to build as a practice project. We are going to build Instagram in React and we are going to reuse as much of our code as we possibly can to make profile cards, story icons, posts and pretty much everything else that exists on Instagram’s home page.

Once again, the whole project is a bit too lengthy to fit into a single blog post, but you can check out the video version with full instructions and explanations on Youtube:

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.

How to build Netflix's Coming Soon page in React

Mon, 02 Nov 2020 00:00:00 GMT

A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows that are soon coming to Netflix.

It has a few interesting functionalities. It’s loading data from somewhere and sorting it into cards. You can bookmark a movie to let Netflix know you want to be notified when it comes out. It has a cool, modern looking share menu for which you need to manage state.

What’s interesting is - this page is not available outside of their mobile app - so you can’t find it on your desktop or TV, and that got me thinking, wouldn’t it be cool to recreate it for web?

So, that’s what we are doing today. I am going to show you how you can recreate Netflix’s Coming Soon page in React, and I will show you some interesting concepts that you can adapt and use in your other React projects, like handling and rendering data, using state hooks, and sharing states between your components. The whole project is a bit too lengthy to fit into a single blog post, but you can check out the video version with full instructions and explanations on Youtube:

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.

Easy Dark Mode Switch with React and localStorage

Sat, 12 Sep 2020 00:00:00 GMT

Having a dark mode on your website or application has become very popular. Many big websites and applications are coming up with their own version of it and if you want to make one for your own react app you can easily do so with very little JavaScript code and a bit of custom CSS.

I am going to show you how you can make a simple, yet versatile React component which you can use to change your website’s mode from light to dark. If you want you can later expand it to handle multiple application skins or themes.

If you prefer a video version you can watch me create this Dark Mode component on Youtube:

I started a new create-react-app project and I’ve modified it a bit by adding some HTML to the App component. There is a simple nav bar, some text paragraphs and an image div that we will use to show how to switch image backgrounds between different page modes.

I also created a new component in the components folder and named it DarkMode.js. We will also add a CSS file for styling it which we will call DarkMode.css. We can import both of them in the App component right away.

import React from "react"
import "./styles/App.css"import DarkMode from "./components/DarkMode"
function App() {
  return (
    <div className="App">
      <nav>        <a href="/">Home</a>        <a href="/">Projects</a>        <a href="/">About</a>        <a href="/">Contact</a>        <DarkMode />      </nav>      <h1>Hello World</h1>      <div id="image"></div>      <p>        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget        scelerisque neque, quis scelerisque erat. Quisque venenatis molestie        sapien, dapibus viverra nulla hendrerit eget. Pellentesque egestas        ultrices accumsan. Ut ac magna vel ex maximus ultricies. Nulla facilisi.        Suspendisse gravida sem eu odio mattis ullamcorper. Curabitur feugiat        ipsum vel vulputate ultricies.      </p>      <p>        Praesent pulvinar faucibus risus in iaculis. Sed erat felis, pretium sit        amet ultricies non, porta et lacus. Curabitur a urna mi. Sed eleifend        sed erat eget viverra. Quisque sit amet purus viverra massa posuere        congue. Suspendisse efficitur venenatis enim, id hendrerit enim ultrices        sed. Nam sed dapibus nisi.      </p>    </div>  )
}

export default App

We will start building out the component by making it a constant with no inputs and export it as a default. Its basic functionality is going to be returning a button element which we will use to change the mode or theme. Lets import the CSS file right away and we will change its contents later.

import React from "react"
import "../styles/DarkMode.css"

const DarkMode = () => {
  return <button></button>
}

export default DarkMode

For everything to work we need to set up a few properties.

import React from "react"
import "../styles/DarkMode.css"

const DarkMode = () => {
  let clickedClass = "clicked"  const body = document.body  const lightTheme = "light"  const darkTheme = "dark"  let theme
  return <button></button>
}

export default DarkMode

The body is the document’s body element. We need a reference to it so we can apply different styling to it once we click the dark mode button. Light theme and dark theme are going to be the class names that we will apply to the body. Theme is a local property which we will use to handle the currently selected theme or mode.

The clicked class is going to be applied to the button when we click on it. This way we will signal the change of its state. Since we are mentioning state you may be wondering if we will use react’s state to set up our logic and the answer is no, we will not. We could, but it’s a really simple use case that doesn’t require it. What we will do is use the local storage, which is browser’s internal memory space designed just for stuff like this. It has a limited memory capacity and it’s not considered secure, but it’s perfect for a situation like this where you just need to keep track of a single property value. Local storage is also very handy because its values persist when you switch the page or close the browser altogether, so you can set the values and not worry about them getting deleted or expiring.

In terms of JavaScript - the local storage is an object which is a part of the window object, so we can access it directly and try to find an item that’s stored inside. For this we use the getItem function and pass in the property we are looking for.

import React from "react"
import "../styles/DarkMode.css"

const DarkMode = () => {
  let clickedClass = "clicked"
  const body = document.body
  const lightTheme = "light"
  const darkTheme = "dark"
  let theme

  if (localStorage) {    theme = localStorage.getItem("theme")  }  if (theme === lightTheme || theme === darkTheme) {    body.classList.add(theme)  } else {    body.classList.add(lightTheme)  }
  return <button></button>
}

export default DarkMode

In this case we will be expecting to find one of the two values - light or dark, because these are the values we will be setting in the local storage. If we find such value we will add that CSS class to the document body. If not we will default to not using the dark mode by setting the light class. Of course, if you want dark mode to be the default value you can do that too.

To make our button do something on click we need to set up an on click event for it which we’ll call the switchTheme function. We will also add an id to it so we can style it more easily later, and we will add the clicked class to it if the dark mode is on.

import React from "react"
import "../styles/DarkMode.css"

const DarkMode = () => {
  let clickedClass = "clicked"
  const body = document.body
  const lightTheme = "light"
  const darkTheme = "dark"
  let theme

  if (localStorage) {
    theme = localStorage.getItem("theme")
  }

  if (theme === lightTheme || theme === darkTheme) {
    body.classList.add(theme)
  } else {
    body.classList.add(lightTheme)
  }

  const switchTheme = e => {    if (theme === darkTheme) {      body.classList.replace(darkTheme, lightTheme)      e.target.classList.remove(clickedClass)      localStorage.setItem("theme", "light")      theme = lightTheme    } else {      body.classList.replace(lightTheme, darkTheme)      e.target.classList.add(clickedClass)      localStorage.setItem("theme", "dark")      theme = darkTheme    }  }
  return (
    <button
      className={theme === "dark" ? clickedClass : ""}      id="darkMode"      onClick={e => switchTheme(e)}    ></button>
  )
}

export default DarkMode

The switch theme function is going to check which theme is currently active and do a couple of different things depending on that. If the dark mode is currently on it will replace the dark theme body class with the light one. It will remove the clicked class from the dark mode button and set the local storage theme property to light. Finally, we will set the theme property to light theme, since dark mode will no longer be active.

In case the dark mode was already off we will want to turn it on. To do that we will do almost the same thing as before. We replace the light theme body class with the dark one, mark the button as clicked, set the local storage property to dark and finally set the theme to dark.

With this, our component is finished and we can import it inside of the App component. Now we need to set up its CSS.

#darkMode {
  background: transparent url("../moon.png") no-repeat center;
  background-size: 30px 30px;
  width: 45px;
  height: 45px;
  filter: grayscale(100%);
  border: none;
  border-radius: 50%;
  transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out;
}

#darkMode:hover,
#darkMode:focus {
  filter: none;
  background-color: black;
  cursor: pointer;
}

#darkMode.clicked {
  filter: none !important;
  background-color: black;
}

Our button has the dark mode Id so that’s what we will use to style it. For the background image I am using a moon icon that I found on flaticon.com. I am setting its dimensions and borders so it’s shaped like a circle and I’m adding it a grayscale filter so it looks grayed-out when in default non-clicked state.

For hover and focus states we are going to remove the filter and set the background to black, so the icon looks like a yellow moon and stars with a night sky background. We will do the same for the clicked button class.

Our components CSS is now set up and we need to take care of the two body classes, one for dark mode and one for light mode. To change between two different looks we will use CSS variables. You can declare them anywhere you want if the body element has access to them. As as start we will add two color variables in the root selector.

:root {
  --blue: rgb(26, 57, 87);
  --white: rgb(236, 236, 236);
}

To simplify the example I will use the white color for background and the blue color for text in light mode and we will switch between them when we turn on the dark mode. To do so we will add more CSS variables inside of the light class selector, which will use the variables from the root. We will also modify the font weight when switching themes, as well as the background image below the hello world heading. This is not something I recommend doing, especially for the background image, but it is an option if you want to play around with it.

body.light {
  --background-color: var(--white);
  --text-color: var(--blue);
  --font-weight: 400;
  --image: url("../day.jpg");
}

For the dark mode class we will do something similar. We will switch the colors for background and text, give the font a bit more weight and we’ll use a different night time image.

body.dark {
  --background-color: var(--blue);
  --text-color: var(--white);
  --font-weight: 500;
  --image: url("../night.jpg");
}

Now that we have dark and light mode classes set up we need to make the body selector use them, which is easy enough. Just set your properties to use the correct CSS variables. We can also set our background and color transition so the mode switch isn’t so sudden.

body {
  background: var(--background-color);
  color: var(--text-color);
  font-weight: var(--font-weight);
  transition: background 0.3s ease-in-out, color 0.6s ease-in-out;
}

Of course, we also need to set up the image container to use the image variable.

#image {
  width: 100%;
  height: 300px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 0.7s ease-in-out;
  background-image: var(--image);
}

If we want to take this a bit further, we can also set up the nav bar to change the background and text color in different modes.

nav {
  padding: 1rem 25%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: var(--text-color);
}

nav a {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--background-color);
}

If you followed through everything you should now have your own functioning customizable dark mode switch built in React. If you want to take a closer look at the project code you can grab the source files on GitHub along with all of the images I used for it.

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.

Translating React components

Sun, 16 Aug 2020 00:00:00 GMT

Having different page files for different languages makes all of the page translations pretty contained and easy for access if something needs to be changed or added later on. Separating page components is good because of searching algorithms and SEO. There is also no code duplication, since page components are mostly plain text or markdown. Non-page components are a bit different.

Let’s say you want to translate your main navigation menu, which is a React component. There is no point in duplicating one component per language, especially if you plan to support more than two languages. Adding any changes to the component in question would create huge amount of footwork which would become a maintenance nightmare.

Setting up data

One solution would be to make a separate file which is going to house all of our translated data for a particular component. We can set it up so each language’s data is easily accessible and we can pull and render proper text on each page based on our current page’s language. This will make it easy to write logic that handles the language switch and it will make translating any additional content more manageable.

I created a new folder called data and added a new file to it called menuLabels.js which is going to contain all of my navigation labels. Let’s say the menu has only a few options for simplicity.

const labels = {
  en: {
    home: "home",
    registration: "registration",
    news: "news",
    contact: "contact",
  },
  el: {
    home: "ΑΡΧΙΚΗ",
    registration: "ΕΓΓΡΑΦΗ",
    news: "ΝΕΑ",
    contact: "ΕΠΙΚΟΙΝΩΝΙΑ",
  },
}

export default labels

We export an object called labels, which has language codes as keys, and objects as values, which in turn have key-value pairs such as shown above. The keys need to match between sub-objects because you are going to reference them when deciding which value to show. If you decide to add more menu items, or to support additional languages - no problem, just add new keys and values following this pattern.

Getting data

Let’s say we already have a bare-bones Menu component with hard-coded text values in English:

import React from "react"
import { Link } from "gatsby"

const Menu = () => {
  return (
    <div>
      <Link to="/">home</Link>
      <Link to="registration">registration</Link>
      <Link to="news">news</Link>
      <Link to="contact">contact</Link>
    </div>
  )
}

export default Menu

Now we need to import the data file and figure out how to get the correct label from it.

import React from "react"
import { Link } from "gatsby"
import labels from "../data/menuLabels"
const Menu = props => {  const { language } = props  const translations = labels[language]
  return (
    <div>
      <Link to="/">{translations["home"]}</Link>      <Link to="registration">{translations["registration"]}</Link>      <Link to="news">{translations["news"]}</Link>      <Link to="contact">{translations["contact"]}</Link>    </div>
  )
}

export default Menu

First of all, the component needs to accept a language parameter in order for us to know which labels to show. You need to make sure this parameter is passed in as an appropriate language code, like we did in other components in previous parts of this series (e.g. “en” for English).

After that it’s easy to get the sub-object based on the language code key, and get the labels from it by passing in label names that match those in the data file.

Generating Urls

The last thing we need to do is adding logic for generating a proper Url for each item., since we can’t leave those hard-coded. Here is what the final code would look like:

import React from "react"
import { Link } from "gatsby"
import labels from "../data/menuLabels"

const Menu = props => {
  const { language } = props
  const translations = labels[language]

  const formatMenuUrl = item => {    if (language === "en") {      return item    }    return `/${language}/${item}`  }
  return (
    <div>
      <Link to={formatMenuUrl("")}>{translations["home"]}</Link>      <Link to={formatMenuUrl("registration")}>        {translations["registration"]}      </Link>      <Link to={formatMenuUrl("news")}>{translations["news"]}</Link>      <Link to={formatMenuUrl("contact")}>{translations["contact"]}</Link>    </div>
  )
}

export default Menu

We added a simple function which accepts a menu item as a parameter and checks the language. If the language is English we don’t need to add a prefix to the Url, since we have previously set up English to not use a prefix as our default language in Part #1 of the series. Otherwise we add a prefix to our Urls. This makes adding new languages extremely easy to implement later if necessary.

Other implementations

That’s it, for this component at least, but you can apply a similar principle to other use-cases as well. Most components will just require that you pull an appropriate label from the file without any additional logic.

For example, you can apply this to a contact form component by pulling labels and input placeholders.

If you have a custom button component which you use all over your application you can easily translate your buttons’ text this way.

In case you are making a personal multilingual website you could even translate your whole CV or a portfolio page by combining techniques discussed in all three parts of this series. Possibilities are almost endless - depending on how many languages are you willing to support.

If you’ve followed through the whole series (or at least parts of it that you needed) - you should now have a working multilingual website with a customizable language switch, component and page translations. Regardless of what is your development stack you now have a lot of flexibility with how to further set up your pages and components.

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.

Building a language switch component in React

Fri, 14 Aug 2020 00:00:00 GMT

You have all of your multilingual pages set up, but now you need to give your users a way to access those pages. There are multiple ways this can be done. The most common solution is adding a language selection tool in the form of multiple links or by using a drop-down list.

In my case - I had to implement three different languages, so I went with the buttons approach.

First things first - we need to create a new component called LanguageSwitch (or whatever you find to be more appropriate for your use-case).

import React from "react"

const LanguageSwitch = ({ language, location }) => {
  return <div></div>
}

export default LanguageSwitch

The component takes in two parameters. Language is the language code string that you can pass in on each page. Location is the standard location prop that every page component in Gatsby has access to. Here is how you can grab it and pass it down on a default home page.

import React from "react"
import LanguageSwitch from "../components/languageSwitch"

class Index extends React.Component {
  render() {
    return <LanguageSwitch language="en" location={this.props.location} />
  }
}

export default Index

For showing the language Urls I wanted to make a system that displays only the languages that should be available for clicking, since having three buttons visible all the time would be a bit cluttered. So, if the user was currently on an English page he would see the buttons for other two languages, but not the English one.

For that to work I would need a way to reference available languages by their language code and display appropriate label on the button, so this is what I did.

import React from "react"

const LanguageSwitch = ({ language, location }) => {
  let languageList = { sr: "srpski", en: "English", el: "Ελληνικα" }
  let links = []
  return <div>{links}</div>}

export default LanguageSwitch

I added an object which keys were the language codes, and the values were the button or link labels. I also added an array for storing the links and returning them to the page once we figure out which ones need to be shown. Next thing was figuring out the page Url for each button.

import React from "react"

const LanguageSwitch = ({ language, location }) => {
  let languageList = { sr: "srpski", en: "English", el: "Ελληνικα" }

  let links = []

  let pageName = location.pathname

  if (pageName.includes("/el") || pageName.includes("/sr")) {    pageName = pageName.split("/")[2]  }
  return <div>{links}</div>
}

export default LanguageSwitch

Let’s say we open up the contact page with Greek content. The location.pathname will be /el/contact/. Splitting that string gives us an array with four items.

exampleArray = ["", "el", "contact", ""]

The page name is the value with index of 2, so that’s what we grab. If we were currently on the English contact page (which in my case doesn’t have the language code prefix) then location.pathname would equal to /contact/ and that’s exactly what we want. There is no need to extract the page from that string, so that’s why we add a condition before the split.

The only thing left to do is generating the appropriate Urls.

import React from "react"
import { Link } from "gatsby"

const LanguageSwitch = ({ language, location }) => {
  let languageList = { sr: "srpski", en: "English", el: "Ελληνικα" }

  let links = []

  let pageName = location.pathname

  if (pageName.includes("/el") || pageName.includes("/sr")) {
    pageName = pageName.split("/")[2]
  }

  for (var key in languageList) {    if (key !== language) {      let languagePath = ""
      if (key !== "en") {        languagePath = `/${key}/`      }
      let link = (        <Link key={key} to={`${languagePath}${pageName}`}>          {languageList[key]}        </Link>      )
      links.push(link)    }  }
  return <div>{links}</div>
}

export default LanguageSwitch

We go through the languageList object to check if the Url needs to be generated. For English pages we don’t need to add a prefix, but for other languages we set languagePath to the appropriate language key code.

Then we create a new Link, which is a built-in Gatsby component used for linking internal pages. Link’s “to” property is what we would add as “src” in a regular <a> tag. In this case we combine the language key code and the page name which we found earlier. Between the Link tags we add our link’s text, which is in this case the language label that we get from the languageList object.

In the end we push the link to our return array and that’s it. Of course, the links are going to have your default Url styling since we didn’t add any specific css to them, but you can always set them up however you want by adding some css.

Simpler solution

What if you don’t want a language switch with a huge number of buttons because you are implementing only 2 different languages? Then there’s probably no need to go to the trouble of hiding any buttons, and you can just show both choices at the same time. I ended up doing this in the end since client’s requirements changed and they wanted only English and Greek options.

Here is what that code would look like.

import React from "react"
import { Link } from "gatsby"

const LanguageSwitch = ({ location }) => {
  let pageName = location.pathname

  if (pageName.includes("/el")) {
    pageName = pageName.split("/")[2]
  }

  let greekPagePath = `/el/${pageName}`

  return (
    <div>
      <Link to={pageName}>English</Link>
      <Link to={greekPagePath}>Ελληνικα</Link>
    </div>
  )
}

export default LanguageSwitch

Much simpler. First of all, we don’t need to pass in the language as a parameter any more, because we don’t need to hide any options. We also don’t need an object with all language key codes and labels. We pick up the location.pathname for the English pageName and we split it for the Greek version as before. Then we simply return both Links since we don’t have to go through a loop.

Country flags instead of labels

If you want to use flag images as buttons instead of language labels, you can do that too. Just import your images, replace them with labels and you should end up with something like this:

import React from "react"
import { Link } from "gatsby"
import greekFlag from "../assets/greece.svg"import ukFlag from "../assets/uk.svg"
const LanguageSelector = ({ location }) => {
  let pageName = location.pathname

  if (pageName.includes("/el")) {
    pageName = pageName.split("/")[2]
  }

  let greekPagePath = `/el/${pageName}`

  return (
    <div>
      <Link to={pageName}>
        <img src={ukFlag} alt="english language" />      </Link>
      <Link to={greekPagePath}>
        <img src={greekFlag} alt="greek language" />      </Link>
    </div>
  )
}

export default LanguageSelector

You will probably need to adjust the way your images are rendered with some additional css, but that’s a completely different topic.

What’s next?

So far so good. We have set up our page structure one way or another and we have a component that can handle switching our website’s language. Our page and component translations are still not set up and this is something we will cover in the last part of this series. We will go over a couple of examples explaining what are some easy ways to set up our language data to be accessible throughout all of our pages. We will also cover how to translate regular components, such as a main navigation menu.

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.

Setting up page structure for a multilingual website

Wed, 05 Aug 2020 00:00:00 GMT

Before going ahead and making a multilingual website I would advise you to think about a few things:

Do you even need one?
Are you prepared to make multilingual content on your own?
What is the best way to handle various translations?

The first two points really matter only if you are making a personal project. If you were contracted to make a multilingual site for someone else then they are the ones who need to think about it.

I was recently hired to make a multilingual website with at least three different language options and point #3 was something I had to think about for a bit. Here is how I solved it with Gatsby and React, and maybe it can ispire you to make a similar solution for your own project.

Page setup for Gatsby

There is a very handy Gatsby plugin for setting up different multilingual pages called gatsby-plugin-i18n. It basically works by looking at your page files’ names and assigning a route to them based on a pattern.

Let’s say you have a page called contact.js which has a path that looks like this: src/pages/about.js . To add different language versions of that page you need to change the file name by adding the language code to it.

For example, changing the file path to src/pages/about.en.js will change the final page url from yourwebsite.com/about to yourwebsite.com/en/about . Now to add the same page for a different language, let’s say German, you would make another file with a path like this: src/pages/about.de.js, which would make the final url look like this: yourwebsite.com/de/about .

As you can already tell, this is pretty useful, and easy to setup. Of course - the plugin doesn’t actually translate the page content. It “just” automatically sets up all of your page routing based on your page names, which is really neat.

Installation

To install the plugin you can run

npm install gatsby-plugin-i18n

yarn add gatsby-plugin-i18n

Configuration

For the most basic setup you will need to edit your gatsby-config.js file and add this to it:

plugins: [
  {
    resolve: "gatsby-plugin-i18n",
    options: {
      langKeyDefault: "en",
      useLangKeyLayout: false,
    },
  },
]

You can fine-tune your settings by editing the options object. I went with these settings in the end, but you can find all possible options on the plugin’s repo page and play around with them.

plugins: [
  {
    resolve: `gatsby-plugin-i18n`,
    options: {
      langKeyDefault: "en",
      langKeyForNull: "en", // Sets language key to "en" if it's not provided      prefixDefault: false, // Removes url prefix for your default language      useLangKeyLayout: false,
    },
  },
]

The only thing left is to actually add your pages and fill them with your multilingual content.

Non-Gatsby approach

If you aren’t using Gatsby to build your website there are pure React or even pure JavaScript solutions to your problem. Actually, if you are using pretty much anything else you can head over to i18next and check out their list of supported frameworks with full documentation and examples.

What’s next?

Our pages our now configured, but we don’t heave an easy way of moving between them. In the next article we will go over the process of making a simple React component for selecting your preferred language, so you don’t have to manually enter your page address if you want to switch to a different language.

We will cover a simpler solution for running a bilingual website and also a bit more complex one that supports more than two languages.

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.

How to finish your projects

Mon, 01 Jun 2020 00:00:00 GMT

I started working on this website in January, but things didn’t really work out the way I wanted to. It’s tough to have everything go according to plan when you don’t have a plan in the first place. I knew I wanted to redesign my old website which was was just one static page with a list of my projects. At that time I thought it was enough, and it was, but I wanted to extend it at some point. I wanted to make a place where I can do and show more things, not necessarily related to web development. I guess this is that point.

First priority was finding a blog platform or a framework with a blog implementation. I started learning React last year, so Gatsby seemed like an interesting starting point. Not having to reinvent a whole CMS while being able to customize anything and everything was also a big plus. I decided to work on it for at least a few hours each week, after I was done at the office.

Somewhere along the way I had to switch to a different project which had a shorter time-frame and after that to another one and that pretty much threw me off my course. When I finally got back to it I lost track of what I was doing earlier and I had no idea what my original plan for the website was because, like I said, there was no plan.

I had to make one, and here are a few things I learned while doing it.

1. Write down everything

Having your goals for the project written down somewhere sounds like an obvious first step, right? Except when you just want to start working on the damn thing already so you tell yourself: “I’ll just do it later”. But later never comes.

Write down your project’s concept and outline the essential features. You can use a notebook or any of different desktop or online tools. I used Trello because it’s easy to setup your goals in a form of a checklist without getting bogged down with unnecessary features, but anything else will work for you, as long as you are able to write your stuff down.

Here is my initial list of features I wanted to have, in no particular order:

Dynamically generated Projects page
- data needs to be pulled from an existing file and sent to a React component
Blog listing page
Individual blog post pages
Code highlighting for blog posts
About me page
Contact form
Dark / light mode switch

2. Stick to it

Having a plan is all nice and dandy until you start deviating from it, or worse - ignoring it completely. Work on a feature or on a part of a feature every day for at least a few minutes. Don’t add new features to the list and don’t endlessly extend your existing features (unless you blatantly forgot to write down something essential when planning stuff out).

I didn’t do it, and you probably won’t do it, but you really should strive for it. Any deviation increases your project’s scope and scope creep means your project gets delayed because you weren’t able to stick to a plan (which, by the way, you wrote).

As an example of what not to do - here is my scope creep list:

Pagination for the Blog listing page
Tags
- I need to be able to add tags to individual posts
- User needs to be able to search posts by tags
Custom 404 page
Blog post archive / history

Except for the custom 404 page all of these gave me quite a bit of headache, and all of it could have been avoided if I just stuck to the plan. Don’t fall into a trap of adding a functionality just because other websites of the same type have it. Do it because your project needs it and because you planned for it.

My blog absolutely does not need an archive, yet. But, all blogs have one so I should add it, too, right? Wrong. An archive / history section is a cool feature if you already have a bunch of posts and your site could benefit from having an easy access to their chronological list. I ended up scrapping it in the end, even though I did learn a couple of useful things while making it.

3. Show it early, show it often

Get feedback as soon as possible, before finishing the project. It sucks to work on something only to realize your finalized functionalities aren’t as functional as you think they are. Your light mode is burning through people’s corneas, your social links are broken and your contact form redirects to a missing page. All of it would have been easily avoided if you had let other people look at your work. Also, you could have done more testing altogether, but nobody’s perfect.

Showing your progress to others also makes you somewhat accountable. You commit to making progress because somebody else expects you are making some progress. Don’t even get me started with all of the “When is it gonna be finished?” questions.

4. Use Source Control

Having my project set up on GitHub and regularly pushing my changes made it super easy to get back into it after a period of procrastination and a computer swap. I just had to fire up Visual Studio Code, pull down my branch, and start working on it.

You don’t need a super fancy app to do it, but you do need something. I used to use GitKraken before switching to GitHub Desktop, but for this project I mostly used VSCode’s integrated source control. Use whatever works for you.

5. Don’t reinvent the wheel

Chances are somebody already made something similar to what you are trying to do way before you even started thinking about your project. They also probably documented it in one way or another and made a blog post or YouTube video about it. Some people make really nice wheels and are really good at showing the wheel making process, and that’s a fact.

Don’t make everything from scratch if you don’t have to. There are plenty of free tools and resources you can use to make your life easier (among those I already listed above):

If you need free stock images or videos use something like Pexels.
For free svg or png icons use IconFinder or a similar resource.
If there is a plugin for a functionality you want to add feel free to use it - that’s what plugins are made for
If you are in prototype phase or simply don’t want to spend too much time on design feel free to use a free (or paid) page template from TEMPLATED or a similar source.
If you aren’t sure which colors go well together and you aren’t too keen on learning color theory just yet - there is a bunch of color palette generators and collection tools, such as Color Hunt, Coolors, Flat UI Colors and Color Wheel. I regularly use all of them, because I too suck at choosing the right colors.

6. Finish it

No, really, just do it. Completing stuff is an excellent feeling which will carry over to other things you do. But…

7. Take care of yourself

Don’t let your physical or mental health suffer because you simply have to work on the damn project. It really isn’t worth it for both you and your family members. Being unproductive sometimes and giving yourself time to let go and relax is a good thing. Don’t feel ashamed for it, but also don’t overdo it.

I mentioned above that I worked on two smaller projects before going back to work on this one. While I was working on the second one I got so fixated on making a prototype, and adding all of the features I wanted in the shortest amount of time possible. I wanted to get it out of my system and get back to working on my personal website. I stopped going out for my daily quarantine walks in the backyard and I stopped exercising. Having a bad chair with no back support wasn’t helping either.

Three days later I was in a world of pain. My back were a sore hurting pile of inflammation and I had to stop working altogether. I couldn’t sit down and I couldn’t sleep for days. My extended working hours were completely negated by my lack of care for myself, so that little stunt was completely not worth it.

If you pick up any of these bullet points you definitely shouldn’t skip on the last one because it will affect you on more levels than “just” your ability to work. Others are more of a “good to know that this guy made some mistakes so I don’t have to” variety. Also, finish your projects.

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.