Projeto de organização pessoal para gerenciamento de atividades. O To Do Timer mescla os aplicativos consagrados de organização pessoal, o to do list e o timer, para quem gosta de cronometrar as tarefas.
Cabe destacar que o layout da aplicação, cores, imagens e tipografia foi baseada em um dos desafios do Front-end Mentors.
O To Do Timer foi criado com React e TypeScript, sendo a base do projeto criada com o Vite. A navegação entre as páginas foi possível através do uso da biblioteca React Router Dom, os formulários foram tratados com as bibliotecas React Hook Form e Zod integradas.
Optou-se por utilizar a funcionalidade de context e useReducer do React para tratamento e manipulação das variáveis.
Os dados referentes as atividades criadas foram armazenadas no localStorage, dessa maneira o usuário pode atualizar a página e não irá perder as atividades que foram adicionadas. Por fim, a aplicação é compatível com os tamanhos de dispositivos mais comuns, ou seja, possui responsividade a partir da aplicação do conceito de mobile first.
- Construído com Vite;
- Estilização com Styled-components;
- React Router para criação das rotas da aplicação;
- React Hook Form para lidar com formulários;
- Zod para validação de formulários;
- Date fns para lidar com datas;
- Immer para lidar com estados.
To Do Timer
Caso prefira abrir a aplicação no localhost basta digitar o comando npm run dev
https://loom.com/share/0f3d5603678347999859bc935f994126
- Autor: Yasmin