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

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

Note: Delete this note and update the table of contents based on what sections you keep.

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

Links

• Repository URL here
• Live Site URL here

My process

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• TypeScript
• React - JS library
• Next.js - React framework
• Css modules - For styles
• MongoDB Atlas - As a cloud database
• React beatiful dnd - For the drag and drop feature
• React hot toast - Simple library to make a toasts faster

What I learned

This project helped me to understand how beneficial the TypeScript is. I saw the benefits while the built-in Next linter was throwing multiple errors (especially in places where i forgot to set the type 😅).

I've also learned that the documentation is your best friend when it comes to typing all the custom variables from various dependencies. For example the result parameter from react beatiful dnd has a specific architecture, but the documentation hasn't a one concrete type, so I'd to type on my own using at least some useful parts.

export type DragEndResult = {
    draggableId: string,
    type: string,
    reason: string,
    source: {
        droppableId: string,
        index: number
    },
    destination: DraggableLocation | null | undefined
}

Moreover, I'm now more used to Static Site Generation mechanism in the Next.js and how API routes work

Continued development

My next step is to work a little more with Next and use more of its potential, and I'm think that the API countries will be a great playground for that.

Useful resources

• Egghead.io react-beatiful-dnd course - Great place to get started with this drag and drop library (even if it is written in class components)

Author

• Frontend Mentor - @SquirrelloDev - more of my projects from this platform