🚀 Coding Challenge: To-Do Application

Welcome to our coding challenge! We’re excited to see your skills in action. This challenge focuses on your ability to create a clean, reusable, and responsive application with an emphasis on readability, object-oriented design, and mobile-first development. Below are the instructions and requirements for building a To-Do application using Next.js and TailwindCSS.

📌 Project Overview

Build a To-Do Application that allows users to manage their tasks efficiently. You will be provided with a Next.js and TailwindCSS skeleton to get started. Your task is to implement the required features, ensuring a clean and maintainable codebase. Focus on creating readable and reusable components, following object-oriented principles, and ensuring the application is mobile-first and responsive across all devices.

🎯 Objectives

• Demonstrate proficiency in TypeScript, React/Next.js, and TailwindCSS.
• Showcase problem-solving skills and attention to detail.
• Implement responsive and accessible UI components.
• Write modular, reusable, and object-oriented code.
• Ensure the application is mobile-first and looks good on all devices.

🛠️ Features to Implement

1. Task Management

• Add Tasks: Users can add new to-do items with a title and description.
• Edit Tasks: Users can edit existing tasks.
• Delete Tasks: Users can remove tasks.
• Mark as Completed: Users can mark tasks as completed or incomplete.

2. Accordion Component

• View Description: Implement an accordion that opens on clicking a task to reveal its description.
• Expand/Collapse: Each task's description can be shown or hidden by toggling the accordion.
• Reusability: The accordion component should be reusable for different sections if needed.
• Accessibility: Ensure the accordion follows accessibility best practices, including keyboard navigation and ARIA attributes.

3. State Management and Persistent Storage

• State Management: Choose a state management solution such as React Context API, Zustand, or any other suitable library to manage the global state of the application.
• Persistent Storage: Utilize the browser's local storage to save and retrieve tasks, ensuring data persists across page reloads.
• Integration: Ensure that the state management seamlessly integrates with local storage for data persistence.

4. UI Enhancements

• Task Forms: Implement user-friendly forms for adding and editing tasks. Each form should include the following fields:

  • Title: Required field. Users must provide a title for each task.
  • Description: Optional field. Users can add additional details about the task.

  Form Validation:

  • Ensure that the Title field is not empty. If a user attempts to submit a form without a title, display a clear validation error message.
  • Provide real-time validation feedback as users fill out the form fields.
  • Disable the submit button until the required fields are properly filled out.

• Animations: Add subtle animations for interactions like adding or deleting tasks to enhance the UI.

• Responsive Design: TailwindCSS is mobile-first. Ensure the application is responsive and looks good on all devices. Use browser development tools to test and verify the design across different screen sizes.

🔧 Technical Requirements

• Framework: Next.js (latest version)
• Language: TypeScript
• Styling: TailwindCSS
• State Management: Choose a suitable solution (e.g., React Context API, Zustand)
• UI Libraries: You may use external UI libraries compatible with TailwindCSS to expedite styling.
• Code Quality: Write clean, readable, and well-documented code. Ensure components are modular and reusable.
• Version Control: Use Git with meaningful commit messages.

📤 Submission Guidelines

1. Fork the Repository:

   • Fork the provided repository to your GitHub account.

2. Implement the Features:

   • Develop the application by implementing the required features.

3. Commit Your Code:

   • Make regular commits with clear and descriptive messages.

4. Push to GitHub:

   • Ensure all your changes are pushed to your forked repository.

5. Provide Access:

   • Share the link to your GitHub repository with us.

6. Optional: Include a live demo link if deployed (e.g., Vercel, Netlify).

📚 Resources

• Next.js Documentation
• TailwindCSS Documentation
• TypeScript Handbook
• React Hooks
• Accessibility Guidelines

🤝 Need Help?

If you have any questions or need clarifications, feel free to reach out to us at [viktor@anue.eu].

🎉 Good Luck!

We’re excited to see your implementation and creativity. Happy coding!

---