In react. Run by changing into the client directory and typing:
npm start
In node.js. Run by changing into the backend directory and typing:
npm run dev
#1 If accessability is important, I would change the UX to adhere to accessability standards:
https://www.w3.org/WAI/standards-guidelines/
#2 UX TodoList should have been two components, a To-do and Task, but I didn’t want to take the time to install redux for global state management (I do use redux when developing production apps) and react router v6 doesn’t route parameters in class-based components.
I had already written the TodoList.tsx as a class and didn't want to rewrite it to be a functional component and didn't want to have one class component (Todo) and one functional component (task), thererfor I chose one component.
Could also break into resusable components like List, Button, Form, etc to ensure all use the same styling, formatting, etc, but I didn't do that for this demo.
#3 Although the form button is disabled on incomplete input, I checked on back in case some manually manipulates the button to be enabled via the inspection tool / dom manipulation.
#4 If on the tasks page and someone refreshes the browser, it will revert back to the to-do page. In a production app with a DB, global state storage like redux, or pulling the activeListId from node, this wouldn't happen. I chose to not address this for this demo app.
#5 Diverting from the spec, I chose to allow completed lists and tasks to be edited in case the user makes a mistake in marking something complete.
#6 If a prod app, I would add sorting to the form so the user can sort by name or date, desc asc. Probably a search filter at the top as well.
#7 Consideration for deleting lists - Could leave as is and when a list is deleted all items are as well, or change so no list with incomplete items can be deleted.