To create a simple To Do Application that allows users to add items to a list, check and uncheck those items, and change the color scheme.

React, JavaScript, HTML, CSS, Figma

To start learning React, I decided to go the classic route and make a To Do Application. As this app is meant to be minimal, the main functionality centers around adding new tasks that can be checked and unchecked. However, I decided that being able to color code and change themes would be a nice addition, especially considering similar functionalities are common in organizational apps. When deciding on color schemes, I used my browser's developer tools to make sure that colors (within each theme) were distinct enough for users who might need/prefer more contrast or be colorblind. I also added the lines theme for accessibility in case the contrasting colors were not enough. And finally, I considered error handling by highlighting the textbox in red if a user tries to add an empty task.
The first step, after setting up the React App, was to create the basic functionality i.e. adding items to the list and then checking and unchecking any items. After making sure the styling of the list and pop-up modal was expected, the ability to modify the color schemes was added. I then tested the application, thinking of edge cases and potential ways of breaking the app; this is when I added the feature that alerts users if they try and add an empty task.
I began this project after taking a Human Computer Interaction course during my last undergraduate semester and so, with a budding interest in Product Design, I figured it would be a good idea to create a clickable prototype on Figma before moving on to building the web app. Below is a demo video, however the code as well as instructions on how to download and use the app can be found on Github.