Frontend Mentor - Kanban task management web app solution

This is a solution to the Kanban task management web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Create, read, update, and delete boards and tasks
• Receive form validations when trying to create/edit boards and tasks
• Mark subtasks as complete and move tasks between columns
• Hide/show the board sidebar
• Toggle the theme between light/dark modes
• Bonus: Allow users to drag and drop tasks to change their status and re-order them in a column
• Bonus: Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)
• Bonus: Build this project as a full-stack application

Screenshot

Links

• Solution URL: solution URL
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• CN (utility function)
• React - JS library
• Next.js - React framework
• TailwindCSS - For styles
• React Hook Form - For form validation and state management
• Clerk - For authentication and user management
• ExpressJs - Nodejs framework for creating APIs
• ReactDnD - Build complex drag and drop interfaces
• Typescript - Type inference for great tooling
• useHook - For click outside

What I learned

I honed my Next.js skills, particularly by delving into server components. Used react hook form for improved extensibility, usability, and performance in managing forms The backend API was written with express, authenticated using clerk and hosted separately, facilitating access to board data for both the public and logged-in users. To enable drag-and-drop functionality, React DnD was implemented, although without animations. Additionally, I employed the onClickOutside hook to handle clicks outside specific areas. There is an intermittent bug related to Clerk that occasionally appears, but for the time being, a quick refresh resolves the issue. I'm still working on a permanent solution for this."

const user = await currentUser();

// throws an error

const proudOfThisFunc = (): "light" | "dark" => {
  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
  const initialColorScheme = mediaQuery.matches ? "dark" : "light";
  const [mode, setMode] =
    (React.useState < "light") | ("dark" > initialColorScheme);

  const changeHandler = (event: MediaQueryListEvent) => {
    const colorScheme = event.matches ? "dark" : "light";
    setMode(colorScheme);
  };

  React.useEffect(() => {
    const addEventListener = () => {
      mediaQuery.addEventListener("change", changeHandler);
    };

    const removeEventListener = () => {
      mediaQuery.removeEventListener("change", changeHandler);
    };

    addEventListener();
    setMode(initialColorScheme);

    return removeEventListener;
  }, [initialColorScheme, mediaQuery]);

  return mode;
};

Continued development

Finally looking to go into mobile development so...

Useful resources

• React hook form - This helped me with Performant, flexible and extensible forms with easy-to-use validation.
• https://clerk.com/ - This is an amazing package for integrating complete user management UIs and APIs, purpose-built for React, Next.js, and the Modern Web.

Author

• Website - Portfolio
• Frontend Mentor - @joshysmart
• Twitter - @saniojoshua