DEV Community: Andrew Heinke

React Interview Challenge #2: Create a ToDo Component

Andrew Heinke — Sun, 22 May 2022 18:15:18 +0000

This example challenge is something you could expect if you are applying for frontend engineer positions.

You are tasked with creating a todo component and given a list of functional requirements. Give this a go on your own and if you get stuck reference my example demo and code. Links at bottom of post. To simulate an actual interview situation, set yourself a timer for 45 minutes and practice explaining your thought process out loud as you go.

Instructions

Create a todo component
Component should accept an initial list of todos
Add an input and button to add new todos to the list
When a todo is clicked it should update its status (complete/incomplete)
- Completed todos should have a strike through text style and should display a checkmark icon
- Uncompleted todos should display a hollow circle icon
Todos should have a delete button that allows the user to remove the todo
Extra credit:
- Add tabs to the top of the todo list to allow users to toggle between all todos, completed todos and incomplete todos
- Add a section to display the number of completed todos out of the total number of todos
- When all todos are completed update the section to display a success message
- Support both light and dark mode styles

Here are icons to use for the component:

Checkmark Icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
    <path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z" />
</svg>

Unchecked Icon:

<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z" />
</svg>

Trashcan Icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
    <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z" />
</svg>

Live Demo
Code

React Interview Challenge: Create a Star Rating Component

Andrew Heinke — Wed, 18 May 2022 16:07:38 +0000

This example challenge is something you could expect if you are applying for frontend engineer positions.

You are tasked with creating a star rating component and given a list of functional requirements. Give this a go on your own and if you get stuck reference my example demo and code. Links at bottom of post. To simulate an actual interview situation, set yourself a timer for 45 minutes and practice explaining your thought process out loud as you go.

You are free to use any star icons you want or you can copy and paste these ascii star characters to use in your component:
Filled Star: ★
Unfilled Star: ☆

Instructions:

Create a star rating component.
onClick, stars should fill up to the star clicked.
Stars should change from unfilled to filled onHover and set to unfilled on mouse leave. Star rating should remain as it was when no stars are being hovered.
The star rating should reset if the current star rating is filled and is clicked.
The component should allow a default initial star rating and total number of stars to be set.
Extra Credit:
- Add a section to show the current star rating percentage to two decimal places.
- Add an input to control the total number of stars.
- Add an input to control the star rating.

Live Demo
Code

React Slideshow Component with autoplay, fullscreen mode and expand all

Andrew Heinke — Thu, 05 May 2022 19:34:27 +0000

A React Slideshow component with all the bells and whistles

Live Demo →

Code View →

I loved the slider used in https://www.educative.io/ so I wanted to recreate the design and functionality with React.

Features

Previous/Next Slide
Autoplay slides
Restart slider
Expand/Collapse all slides
Fullscreen slides mode

Simple API

const data = [
  {
    title: "First",
    text: "foo bar baz"
  },
  ...
];

...

// optional prop autoPlayTime to control autoplay time on slide
<Slides slides={data} />

To avoid repeating code I utilized a few custom hooks:

useCount – for controlling active slide index

import { useState } from "react";

export const useCount = (initialValue = 0) => {
  const [activeIndex, setActiveIndex] = useState(initialValue);

  const increment = () => {
    setActiveIndex((prev) => prev + 1);
  };

  const decrement = () => {
    setActiveIndex((prev) => prev - 1);
  };

  const reset = () => {
    setActiveIndex(initialValue);
  };

  return [activeIndex, increment, decrement, reset];
};

useToggle – for controlling expanded/collapsed slides, autoplay mode and full screen mode

import { useCallback, useState } from "react";

export const useToggle = (initialValue = false) => {
  const [state, setState] = useState(initialValue);
  const toggle = useCallback(() => setState((state) => !state), []);
  return [state, toggle];
};

useInterval – for controlling slide increments in autoplay mode

import { useEffect, useRef } from "react";
export const useInterval = (callback, delay) => {
  const intervalId = useRef(null);
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    const tick = () => savedCallback.current();

    if (typeof delay === "number") {
      intervalId.current = window.setInterval(tick, delay);

      return () => window.clearInterval(intervalId.current);
    }
  }, [delay]);

  return intervalId.current;
};

React Hooks Autocomplete Component

Andrew Heinke — Tue, 03 Aug 2021 14:01:31 +0000

Open Demo Link

Mario Kart Tabs UI

Andrew Heinke — Tue, 25 May 2021 01:38:50 +0000

View Fullscreen Demo →

A fun exercise making Mario Kart tabs using Alpine.js

Neumorphism eCommerce Landing Page

Andrew Heinke — Sat, 15 May 2021 21:20:13 +0000

View Fullscreen Demo →

A Lord of The Rings eCommerce landing page using neumorphism design. This project includes a color theme changer and local storage to save theme preference.