Feat/frontent test wendell

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,79 +1,77 @@
-# Frontend Code Assessment - To-Do List Application
+# code-assessment-fe (TODO List)
 
-![To Do List Application Preview](./source/app.jpg)
+![TODO List](https://i.ibb.co/cSTcyhgP/todo-list.png)
 
-## Overview
+Este projeto é uma aplicação de lista de tarefas construída com React, Vite, Tailwind e Zustand. A aplicação permite que o usuário cadastre itens na lista de "Para fazer" e os mova facilmente para a lista de "Concluído" com um simples clique no checkbox. Além disso, há a funcionalidade de arrastar e soltar, permitindo que o usuário reorganize os itens em ambas as listas de forma intuitiva.
 
-This repository contains a code challenge for developing a To-Do List web application. The challenge aims to evaluate your frontend development skills, code quality, and attention to design details.
+## **Destaques**
 
-## Design Specifications
+- **Arrastar e Soltar**: A funcionalidade de arrastar e soltar (drag-and-drop) permite que os itens sejam reorganizados dentro de suas listas ou movidos entre as listas de "Para fazer" e "Concluído".
+- **Testes Unitários**: Cobertura completa de todos os componentes, páginas e utils.
+- **Tailwind**: A interface é totalmente responsiva, projetada com Tailwind CSS para garantir uma experiência fluida em dispositivos móveis e desktop.
+- **Zustand**: O Zustand é usado para gerenciar o estado de forma simples e eficiente, sem a complexidade de outros gerenciadores de estado.
 
-- The complete UI design is available in [Figma File](./source/fe-challenge-todo_list.fig).
-- The design includes all components, states, and interactions.
-- Please ensure pixel-perfect implementation and responsive design.
+## **Página:**
 
-## Core Features
+### Home
+Página inicial onde o usuário pode encontrar a aplicação com todos os componentes renderizados.
 
-- Display a list of pending tasks
-- Add new tasks to the list
-- Edit existing tasks
-- Mark tasks as completed
-- View completed tasks in a separate list
+## **Componentes**
 
-## Technical Requirements
+### AddTask
+Componente responsável por adicionar um novo ítem (tarefa) na lista "Para fazer".
 
-Required technologies:
+### CompletedTasks
+Componente responsável por exibir a lista de ítens (tarefas) que já estão em "Concluído".
 
-- [React 19](https://react.dev)
-- [TypeScript (v5+)](https://www.typescriptlang.org/)
-- [Vite (v5+)](https://vite.dev/)
-- [React Router (v7+)](https://reactrouter.com/home)
-- [Tailwind CSS (v3+)](https://tailwindcss.com/)
+### DraggableTask
+Componente responsável por controlar a área e as funcionalidades de arrastar e soltar.
 
-Additional requirements:
+### CheckLogo
+Componente responsável por exibir o ícone de logo.
 
-- State management solution (Context API, Zustand, Redux, etc.)
-- Unit testing framework (Vitest, Jest, etc.)
-- Code formatting (Biomejs or ESLint + Prettier)
+### Navbar
+Componente Header da aplicação, com um ícone simulando a logo e um texto "TODO List"
 
-## API Integration
+### ToDoList
+Componente responsável por exibir a lista de ítens (tarefas) que estão em "Para fazer".
 
-While this challenge doesn't require a backend integration, you should structure your code to demonstrate how you would integrate with a REST API.
+### Checkbox
+Componente responsável por renderizar o checkbox personalizado.
 
-Create service files that would handle these API calls. You can mock these API calls using local state management and localStorage for persistence.
 
-## Submission Guidelines
+## **store**
 
-- Fork this repository.
-- Create a new branch for your implementation.
-- Submit your commits.
-- Include a README.md with:
-  - Setup instructions.
-  - Technologies used.
-  - Architecture decisions.
-  - Any additional features implemented.
-- Send your public repository for evaluation by email.
+### useToDoStore
+Hook responsável por gerenciar todo o contexto da aplicação com o Zustand, adicionar, alterar e remover os estados.
 
-## Bonus Points (Optional)
 
-- Technical
+## **Utils**
 
-  - Implement drag and drop for task reordering
-  - Add E2E tests (Cypress/Playwright)
-  - Add error boundaries
+### storage
+Funções `loadFromStorage` e `saveToStorage` responsáveis por carregar e salvar dados no localStorage do navegador.
 
-- Features
 
-  - Task due dates
-  - Task categories/tags
+## **Inicialização do Projeto**
 
-- UX/UI
-  - Smooth animations
-  - Loading states
-  - Error states
-  - Empty states
+Para inicializar o projeto, siga os passos abaixo:
 
-## Time Expectation
+1. **Clone o repositório:**
+```bash
+git clone https://github.com/wendellchrys/code-assessment-fe.git
+```
 
-- Expected completion time: 5 days
-- Please let us know if you need more time.
+2. **Navegue até o diretório do projeto:**
+```bash
+cd code-assessment-fe
+```
+
+3. **Instale as dependências:**
+```bash
+pnpm install
+```
+
+4. **Inicie o servidor de desenvolvimento:**
+```bash
+pnpm dev
+```

biome.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    extends: ["@biomejs/biome"],
+  };
+