kebin20 / todo-app-react

A todo app built with React, TypeScript and Firebase with a simple filtering function to show active or completed todo items. Todos are managed in Firebase

Todo App built with React

Table of contents

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

Overview

Main Features

Users are 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
• Reorder the todo items in the list (WIP: Bug needing to be fixed)

Links

• Solution URL: Github Repo
• Live Site URL: Todo App

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• TypeScript - TypeScript - Strongly typed programming language on top of JS
• Firebase - BaaS
• Vite - Build Tool
• React - JS library

Testing:

• Jest - JS Testing Framework
• react-testing-library - Testing library for React

What I learned

Coding this app had taught me a a lot when modifying the states of an array, in this case the Todo items array.

I learnt that in order to update the todoitem state (which holds an array of objects), I have to first need to create a copy of the current todoitem state using the spread operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).

This todolist was also great practice in using a variety of array methods in JavaScript such as .unshift(), .map() and .filter().

  function addTodoHandler(enteredText) {
    setTodoItem((prevTodoItem) => {
      const updatedTodo = [...prevTodoItem];
      updatedTodo.unshift({ text: enteredText, id: Math.random().toString() });
      return updatedTodo;
    });
  }

  function deleteTodoHandler(itemId) {
    setTodoItem((prevTodoItem) => {
      const updatedTodo = prevTodoItem.filter((item) => item.id !== itemId);
      return updatedTodo;
    });
  }

  function checkItem(itemId) {
    setTodoItem((prevTodoItem) => {
      const updatedTodo = prevTodoItem.map((todo) => {
        if (todo.id === itemId) {
          return {
            ...todo,
            isChecked: !todo.isChecked,
          };
        }
        return todo;
      });
      return updatedTodo;
    });
  }

I also learnt how to store the todo items in local storage, thanks to a Freecodecamp article which was very helpful.

  useEffect(() => {
    const storedTodo = JSON.parse(localStorage.getItem('todoItem'));
    if (storedTodo) {
      setTodoItem(storedTodo);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('todoItem', JSON.stringify(todoItem));
  }, [todoItem]);

Continued development

I think I need to learn a more effective way of doing styling for react components so I'm thinking of learning about styled components and possibly using tailwind for React projects. I also may want to get used to using CSS modules more but I was struggling to create conditional logic with it. Of course I will also need to get used to learning on how to use the variety of JavaScript methods used for projects.

I could also refactor this project more by putting more repeated code within my context component and expand it beyond changing the theme.

UPDATE (15/03/23) - Finally implemented Firebase into my code, by enabling users to store, read and write their todos in a realtime database instead of using local storage.

UPDATE (16/03/23) - Implemented the use of Typescript into project.

UPDATE(23/03/23) - Implemented drag and drop feature.

UPDATE(6/04/23) - Found bug with drag and drop feature where tick button is not being correctly clicked.

UPDATE(30/04/23) - Added testing suite with Jest and created a simple test for data fetching.

Useful resources

• Stack Overflow - This helped me for styling the background and adding a tick svg inside the checkbutton

• MDN Docs - The goto for documentation on array methods, this one in particular helped me with the filter() method.

• Bobbyhadz - This is a great article which helped me learn how to set styling on the body element in a React app.

• freeCodeCamp - Joel Olewanle - This is a great article which helped me learn how to use localStorage to store new todoitems and it's state.

• Firebase Docs - Great quick guide on setting up your database in Firebase

• Firebase Docs - Guide on reading and removing data

• Rootstack - This was a great guide on how to implement drag and drop without a library

Author

• Frontend Mentor - @kebin20

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.