React60 min

Todo List

Prompt

Create a user-friendly web-based to-do list application that enables users to manage their tasks easily. The application should allow users to add new tasks, edit existing ones, delete them, and mark them as complete.

Requirements

Users should be able to add tasks by pressing the "Enter" key.
Users must have the capability to edit the description of a task at any time.
Users should have the option to delete tasks they no longer need.
Users must be able to mark a task as completed once it is finished.
The interface should resemble what is depicted in the gif below.

Example

Playground

Hint 1

Think about creating a form in React for adding new tasks. How can you set it up so that pressing the 'Enter' key submits the form? Remember to manage the input state to clear it after submission.

Hint 2

When adding a new task, think about how to update your tasks array. You'll likely add a new task object to the array. Consider using the spread operator or array concatenation to include the new task.

Hint 3

To edit a task, you need to update its name in the array. Use the map function to iterate over the tasks. For the task that matches the one being edited, return a new object with the updated name. For all other tasks, return them as is.

Hint 4

For deleting a task, the filter method is useful. This method creates a new array excluding the task that matches the deletion criteria. Use filter to return all tasks except the one that needs to be removed.

Hint 5

To mark a task as completed, use map to iterate over your tasks. When you find the task that was completed, return a new object with its 'completed' property toggled. Otherwise, return the task as is.

Hint 6

For each task, consider how you can toggle between a view mode and an edit mode. You might need state management within the task component to keep track of whether it's currently being edited.

Solution

Common Pitfalls

Forgetting to Use a Form

Problem: Without a form, an input box for typing tasks won't respond to the "Enter" key automatically.
Extra Work Without Forms: Developers have to write additional code (event handlers) to react to the "Enter" key, recognize it, and then add the new task. They must create functions to actively "listen" for the "Enter" key, recognize it, and then add the new task.
The Easy Way with Forms: Using a form eliminates the need for manual "Enter" key setup. When the "Enter" key is pressed, forms intuitively trigger an onSubmit event where developers can write logic to add the todo item, simplifying task submission. This approach leads to cleaner and less code. Additionally, forms enhance accessibility for screen readers and assistive technologies.

Not Using event.preventDefault() with Forms

Problem: When using a form, pressing "Enter" or clicking "Submit" naturally tries to send data immediately and reloads the page, which might not be the desired behavior you want.
Without event.preventDefault(): The form automatically tries to submit data and refresh the page.
Solution: event.preventDefault() stops the form from automatically submitting and reloading. It pauses the form's usual action, allowing developers to handle data as they wish without a page reload.

Difficulty Handling Checkboxes

Candidates often struggle with using checkboxes to toggle the completed status of tasks. Use the checked attribute of the checkbox to represent the completed status. When the checkbox is checked or unchecked, utilize the onChange event to update the completed status of the task accordingly.

Another Approach

I have used context and reducer to solve the Todo list. However, if you are able to solve it using useState and passing the handlers and state as props, you should be good provided your solution is clean and your naming of variables and handlers is undestandable.

My Interview Experience

I want to share insights from a recent interview, offering you a real-life lesson. Tasked with creating a TODO list within an hour, I delivered a robust solution enabling adding, editing, deleting, and marking tasks as complete. This solution, mirroring what we've practiced, was comprehensive, leaving no edge cases untouched.

Interestingly, I received vague feedback implying overlooked edge cases. This, I believe, wasn't a reflection of the solution's accuracy, but rather a justification to offer me a Senior Software Engineer 1 position, instead of the Senior Software Engineer 2 role I applied for, despite excelling in all interview rounds.

This experience highlights that, while your technical skills and preparation are paramount, the final outcome often intertwines with the interviewers' perceptions and company's specific needs or internal policies.

But here's the encouraging part: persistent effort and dedication do bear fruit! I secured a Senior Software Engineer 1 role, a testament to our continuous learning and practice leading us toward our aspirations.

Let this inspire you to engage deeply in practice, refining your skills and preparing for various interview scenarios. Every interview and feedback is a valuable learning opportunity, steering you toward professional growth.

Interviewer Criteria

HTML/CSS

Does my layout accurately match the provided image or design specification?
Did I use semantic HTML tags like ul, li, button, form, input, label, etc., appropriately?

JavaScript

Do I understand and correctly use e.preventDefault() to manage form submission?
Have I effectively handled edge cases, such as trimming input to prevent adding empty to-do items?
Do I reset the input field after a to-do item is added?
Do I effectively use JavaScript array methods like filter and map?
Do I demonstrate knowledge and appropriate use of ES6 features, including let, const, arrow functions, and destructuring?
Were conditionals in my code handled in a clean and efficient manner?

React

Am I comfortable using React hooks?
Have I used the key prop appropriately on all iterated elements, ensuring efficient and correct re-rendering?
Am I comfortable and proficient in using function components?
Did I colocate state appropriately, such as maintaining input state within the AddTaskForm component?
Did I consider memoizing the Task component using React.memo for performance optimization?
Were view and edit modes implemented cleanly, with smooth toggling between the two via state management?

Component Architecture

Did I create separate components for Task, TasksList, AddTaskForm, and Checkbox?
Are the names of my classes, functions, handlers, and components clear and understandable?
Is my codebase organized into separate folders for components, context, and reducers, facilitating easier navigation and maintenance?

Time Checkpoints

10:00 AM
Interview starts 👥
10:03 AM
Prompt is given by the interviewer
10:05 AM
Candidate - read the prompt, ask clarifying questions and start coding
10:10 AM
Fetch the data from mock server and store it in state
10:20 AM
Render the chart
10:30 AM
Complete styling
10:35 AM
Implement Sorting logic
10:50 AM
Allow support for data of any shape
10:55 AM
Discussions with interviewer
11:00 AM
Interview ends ✅