// WEB

React To-do List

A simple React.js to-do list application built as my first React project, featuring task creation, reordering, deletion, and a neumorphic interface.

ROLEDeveloper
TEAMSolo project
CONTEXTPersonal learning project
CREATED2020
React.js
Source code

Overview

React To-do List is a small task management application built with React.js.

Users can add tasks, reorder them, and remove tasks from the list. The interface uses a simple neumorphic-inspired design for the input area.

This was my first React project, created as I began learning React and component-based web development. Let’s be real, what better way to start learning React than by building a to-do list? Feels like every React developer has to make one at some point, right? 😏

Technical approach

For this project, I worked with:

  • React.js components and application structure
  • User input and task interactions
  • Task creation, reordering, and deletion
  • Neumorphic UI styling
  • Basic state management in React

Features

  • Add new tasks.
  • Reorder tasks.
  • Delete tasks.
  • Neumorphic-inspired input interface.

Preview

React to-do list application preview

Lessons learned

This project was my starting point with React.js and helped me understand the fundamentals of building interactive interfaces with components. It also gave me hands-on experience with handling user interactions and structuring a small frontend application.

Now that I look at it, the colours are definitely a bit all over the place and the design could use some work. But hey, it works! (2026)