Dictionary web app - Frontend Mentor Challenge

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to search for words using the input field, see the Free Dictionary API's response for the searched word, see a form validation message when trying to submit a blank form, play the audio file for a word when it's available, switch between serif, sans serif, and monospace fonts, switch between light and dark themes, view the optimal layout for the interface depending on their device's screen size.

Links

• Solution URL: Dictionary web app using React
• Live Site URL: Dictionary web app

My process

Built with

• CSS custom properties
• Flexbox, CSS Grid
• Vite
• React - JS library
• Free Dictionary API

What I learned

I learned about the watchMedia method among with prefers-color-scheme media query, which allows developers to detect the user's preferred color scheme. This is a very useful feature for developers, as it allows them to provide a better user experience by automatically adapting the color scheme of the website to the user's preferences.

const [theme, setTheme] = useState("light");

useEffect(() => {
  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
  const prefersDarkMode = mediaQuery.matches;

  if (prefersDarkMode) {
    setTheme("dark");
  }
}, []);

The variables fonts was something I had never done before, so I had to do some research on how to do it. I ended up using the font-variation-settings property, which allows me to change the font's weight and width.

:root {
  --font-weight: 400;
  --font-width: 100;
}

body {
  font-variation-settings: "wght" var(--font-weight), "wdth" var(--font-width);
}

I also created a custom hook for localStorage, which allows me to store the user's settings in the browser's local storage. This way, the user's settings are saved even if they close the browser.

import { useState } from "react";

export default function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    const item = window.localStorage.getItem(key);
    return JSON.parse(item) ?? initialValue;
  });

  const saveToLocalStorage = (value) => {
    // Set to state
    setStoredValue(value);

    // Save to actual local storage
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, saveToLocalStorage, setStoredValue];
}

Continued development

I want to continue learning about more PostCSS add-ons, such as postcss-preset-env, which allows me to use the latest CSS features, such as font-variation-settings, without worrying about browser compatibility.

And want to create a project in React with TypeScript to take advantage of the type system and improve the code quality.

Useful resources

• prefers-color-scheme - This article helped me understand how to detect the user's preferred color scheme.

• font-variation-settings - This article helped me understand how to use the font-variation-settings property.

• useLocalStorage - This article helped me understand how to create a custom hook for localStorage.

Author

• Frontend Mentor - @874anthony
• Twitter - @874anthony
• GitHub - @874anthony
• LinkedIn - Anthony Acosta