/todo-list-remake

Todo list app to showcase skills in front-end web development, React, Typescript, and user input validation.

Primary LanguageTypeScript

Todo List React App

Screencap of live preview

Portfolio Project by Manski117

Todo list app that allows user to manage projects and tasks in user-friendly GUI and save projects to local storage.

Purpose of Project: This portfolio project is a todo list app that showcases my skills in front-end web development, validation and sanitization of user-inupt data, and user-friendly, accessible design. It also served as a learning exercise in learning React, as I converted an older project to React and Typescript from pure Javascript.

Core Features: This project implements formik and yup libraries to validate and sanizize user data. Using react hooks such as useContext, input data being typed is compared in real-time to other projects saved in state to ensure no chance of naming collisions. Makes use of localStorage to save user data without the need for a back-end or logging in. Users may safely edit or delete any of their projects and tasks.

User Experience:

Page load with no existing data

Screencap of live preview

Page load with existing data prompts user to open projects sidebar

Screencap of live preview

Small screen users experience project sidebar as menu overlay

Screencap of live preview