Skip to content

Aplicação desenvolvida com React.js, Styled Components e Lottie, para organização de tarefas de maneira fácil e rápida.

Notifications You must be signed in to change notification settings

miguelretroz/teskiando-front-end

Repository files navigation

téskiando logo 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.

repo card teskiando back-end

🛠️ Construído com

🔹 JavaScript - JavaScript

🔹 React js - React

🔹 - CSS

🔹 Lottie - Styled Components

🔹 Lottie - Lottie

layout icon Layout

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

layout 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.

Login page layout

Responsividade página de login

Register page layout

Responsividade página da registro

Tasks page layout

Responsividade página de tarefas

🖱️Uso

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

🔹vercel logo Vercel - Deploy da aplicação

téskiando logo 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.

Add new task

Adicionando uma nova tarefa

Change task status

Alterando o status da tarefa

Editing task title

Editando título da tarefa

Editing task description

Editando descrição da tarefa

Removing task

Removendo tarefa

Tasks filter

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 Aside Animation
Téskiando Aside Animation - Téskiando Logo Animation
Téskiando Aside Animation - Loading Message Animation

🪛 Desenvolvimento

Para executar o projeto localmente é necessário:

🔹 Node.js - Node.js

🔹 NPM - 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 - contato.miguelretroz@gmail.com

🔹 Linkedin - Miguel Retroz

🔹 Instagram - @miguel_retroz

About

Aplicação desenvolvida com React.js, Styled Components e Lottie, para organização de tarefas de maneira fácil e rápida.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages