TODO App - Frontend Developer Interview

Introduction

Welcome to the CatzeLabs Frontend Developer interview! In this assignment, you'll be tasked with creating a simple TODO application using Next.js.
This project will help us evaluate your skills in building a modern web application.

Requirements

1. Add Tasks: Users should be able to add new tasks to the TODO list.

• Fetch todo lists from https://playground.dev.be.by-catze.xyz/interview-fe/todos;
• The response scheme like:

type TodoListResponse {
  id: number;
  label: string;
  createdAt: string;
}[]

2. Mark Tasks as Completed: Users should be able to mark tasks as completed and toggle between completed and incomplete states.

• [Tiny tip] You have to manage complete flag with internal react state.

3. Clean Code: Focus on maintainability, readability, and best practices in your code structure.

Requirements

• Time limited: The test will be conducting for 20 mins.
• Internet is allowed: You can use internet searching including LLM services(e.g. chatGPT), but you have to explain how to work.
• Styling(optional): Tailwind CSS is default. but There is no need to style.

Guidelines

1. Screen Sharing: You have to share your laptop screen in course of testing.
2. Question is allowed: You can also ask the question to interviewer.

Evaluation Criteria

• Functionality: Does the app meet the requirements?
• Code Quality: Is the code clean, organized, and maintainable?
• UI/UX: Is the design user-friendly?

Good luck, and we look forward to seeing your work!

---

If you have any questions during the assignment, feel free to reach out.

Best regards,
@Catzelabs FE team