Téskiando Front-end

Aplicativo para organização de tarefas, com foco em ajudar usuários a gerenciar suas tarefas de maneira fácil e rápida.

As tasks (tarefas) são organizadas baseadas em status (estado), que permitem ao usuário gerenciar a prioridade e identificar quais estão em "A fazer", "Em progresso" ou "Concluído".

Este é o repositório do código de front-end do projeto, que contém a toda interface do aplicativo.

Através do card abaixo é possível acessar o repositório do código de back-end do projeto.

🛠️ Construído com

🔹 - JavaScript

🔹 - React

🔹 - CSS

🔹 - Styled Components

🔹 - Lottie

Layout

O layout da aplicação foi desenvolvindo utilizando Figma:

O figma do projeto pode ser acessado pelo link abaixo

🔹 - Figma do projeto

Com foco na responsividade o layout foi todo construído baseado no conceito do Mobile First, ou seja, foi inicialmente desenvolvido para dispositivos com tela menores e depois para telas maiores.

Responsividade página de login

Responsividade página da registro

Responsividade página de tarefas

🖱️Uso

A aplicação pode ser acessada através do deploy realizado na plataforma gratuita do Vercel:

🔹 Vercel - Deploy da aplicação

Página de tarefas

A página principal da aplicação é a página de tarefas, onde o usuário pode adicionar, editar, excluir, visualizar e filtrar tarefas.

Adicionando uma nova tarefa

Alterando o status da tarefa

Editando título da tarefa

Editando descrição da tarefa

Removendo tarefa

Filtrando tarefas

🎞️ Animações

A maior parte das animações foram implementadas utilizando o Lottie, um framework de animações desenvolvido pela Airbnb. E foram feitas utilzando Adobe After Effects.

É possível acessar algumas das animações disponibilizadas no lottie files, através dos links abaixo:

- Téskiando Aside Animation
- Téskiando Logo Animation
- Loading Message Animation

🪛 Desenvolvimento

Para executar o projeto localmente é necessário:

🔹 - Node.js

🔹 - NPM

Após realizar o clone do projeto deve-se instalar das dependências:

npm install

E rodar:

npm start

para executar a aplicação.

⚙️Scripts

O projeto possui três scripts principais. Para executá-los é necessário realizar a instalação das dependências com npm install

Para executar a aplicação:

npm start

Para executar o ESLint e realizar a análise estática do código JavaScript:

npm run lint

Para executar o StyleLint e realizar a análise estática do código CSS:

npm run lint:styles

🚀 Pontos de melhoria

🔹Realização de testes unitários e de integração.
🔹Implementação de refresh token e seu fluxo.

👤Contatos

🔹 Gmail - [email protected]

🔹 Linkedin - Miguel Retroz

🔹 Instagram - @miguel_retroz