To-Do List App

Este projeto foi desenvolvido como parte de um desafio para demonstrar minhas habilidades no desenvolvimento web e para concorrer a oportunidades de trabalho freelancer.

Visão Geral

A aplicação consiste em uma lista de tarefas (To-Do List), responsiva, com funcionalidades de cadastro, login, adição, conclusão e remoção de tarefas. Utiliza React, StyledComponents, TypeScript e Axios como principais tecnologias.

Funcionalidades

• Cadastro de Usuários: O usuário pode se cadastrar na aplicação, fornecendo informações e uma senha válida, seguindo critérios específicos:

  • Senha: Deve conter no mínimo 6 caracteres, com pelo menos um caractere maiúsculo, um minúsculo, um número e um caractere especial.

• Login: Após o cadastro, é possível fazer login na plataforma.

  • Restrição de Acesso: Usuários logados não podem acessar rotas de cadastro ou login, sendo redirecionados à página principal.

• Adição de Tarefas: Os usuários podem adicionar novas tarefas à lista.

• Marcação de Tarefas Concluídas: Capacidade de marcar tarefas como concluídas.

• Exclusão de Tarefas: Remoção de tarefas da lista.

• Filtragem de Tarefas: Possibilidade de filtrar tarefas por status (pendentes ou concluídas).

Estrutura do Projeto

O projeto foi desenvolvido utilizando uma estrutura de pastas e componentes para facilitar a manutenção e escalabilidade:

src/ │ ├── components/ │ ├── Login/ │ ├── Registration/ │ ├── TaskList/ │ ├── Filter/ │ └── ... │ ├── pages/ │ ├── Main/ │ ├── Login/ │ ├── Registration/ │ └── ... │ ├── api/ │ └── axiosConfig.js │ ├── hooks/ │ ├── useAuth.js │ └── ... │ └── ...

Tecnologias Utilizadas

• React: Biblioteca principal para desenvolvimento do front-end.
• Context-API: Funcionalidade do React para lidar com a propagação de dados entre components.
• StyledComponents: Para estilização de componentes.
• TypeScript: Utilizado para tipagem estática.
• Axios: Utilizado para realizar requisições HTTP à API fornecida.

Considerações Finais

Para a criação da aplicação utilizei o modelo Mobile-First, pois acredito que esta é a melhor maneira de desenvolver aplicações responsivas e adaptáveis para diferentes tamanhos de tela. Ademais, ressalto que este desafio foi uma excelente oportunidade para aprimorar habilidades em desenvolvimento web e consolidar conhecimentos em tecnologias como React e TypeScript. Agradecimentos à empresa pela oportunidade oferecida.

Login

Cadastro

Home

Filtro