fbrzrvn / frontend-master-todo-app

Frontend Mentor challenge - The classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering.

Frontend Mentor - Todo app solution

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

Table of contents

• Frontend Mentor - Todo app solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • 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
• Add new todos to the list
• Mark todos as complete
• Delete todos from the list
• Filter by all/active/complete todos
• Clear all completed todos
• Toggle light and dark mode
• Bonus: Drag and drop to reorder items on the list

Screenshot

Empty list Light theme Complete todo

Links

• Solution URL: My solution
• Live Site URL: Live site URL here

My process

Built with

• React - JS library
• Redux.js - React framework
• Styled Components - For styles

What I learned

I learned how to create global styles and how to use the theme context to toggle the theme-mode using styled-components. I also improve my redux knowledge.

import styled, { createGlobalStyle } from 'styled-components';

export const GlobalStyles = createGlobalStyle` {
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

const App = ({ children }) => {
  const currentTheme = () => {
    const localTheme = localStorage.getItem('TODO_THEME');
    return localTheme || 'dark';
  };

  const [theme, toggleTheme] = useTheme(currentTheme);
  const themeMode = theme === 'dark' ? darkTheme : lightTheme;

  <ThemeProvider theme={themeMode}>{children}</ThemeProvider>;
};

Useful resources

• react-beautiful-dnd - This helped me for implement the drag and drop functionality and understand how to use it. I'd recommend it to anyone still learning this concept.

Author

• Website - faber
• Twitter - faber
• Frontend Mentor - faber