Teste Dev Junior da Legaplan - Lista de tarefas

📌 Sobre o projeto:

O teste consiste em desenvolver uma lista de tarefas que respeite os requisitos especificados previamente.

Requisitos

Este projeto é um desafio proposto pela equipe da LegaPlan para uma vaga de dev Junior, os pontos levantados são:

• O projeto deve ser criado utilizando NextJS utilizando o App Router e SCSS.

• Além das boas práticas de programação, esperamos ver fidelidade MÁXIMA ao design. Preste atenção aos detalhes como sombras, gradientes, entre outros

Funcionalidades

• Adcionar/Remover tarefas;
• Ativar/Desativar modal ao clickar nos botões
• Responsividade da aplicação

Aprendizados

• Usar SCSS para estilizar
• Estilizar checkbox de forma customizada

✨ Como ficou o projeto?

Deploy da aplicação

https://legaplan-teste-tecnico.vercel.app

Figma do projeto

https://www.figma.com/design/4iESWnasLZSHyghg1ipj1P/Teste-Dev-Junior---Legaplan?node-id=0-1&node-type=canvas&t=GxQUSS4KxQUWBUBN-0

Confira a versão mobile

Como está o localStorage?

🖥 Quais tecnologias foram utilizadas?

Frameworks e bibliotecas (versões utilizadas)

  - Next: 14.2.12
  - React: 18
  - Typescript: 5
  - Sass/Scss: 1.79.1

🔎 Como me localizar no projeto?

Todos os arquivos de código fonte do projeto estão em: ./src

Como o projeto está estruturado?

• ./src/app: Este projeto com o App Router, entretanto não temos nenhuma outra rota. Então esta pasta você pode localizar a página principal, scss global, o layout com as configurações e o favicon do site.

• ./src/assets: Onde está todas as imagens e os ícones que vão ser usadas no projeto.

• ./src/components: Onde está os componentes que serão reutilizados em diversas partes do código. Nesta primeira versão do site temos os components:

  • addTaskBtn: Botão para adicionar novas tarefas;
  • header: Cabeçalho padrão do app;
  • modals: Contém os modais que serão chamados para tela;
  • taskCard: Componente da lista de tarefas com checkbox, nome da tarefa e botão de deletar;
  • taskList: Responsável por agrupar todas as tarefas e ser renderizado na página principal.

• ./src/contexts: Os contexts são onde separamos os dados que serão compartilhados com toda a aplicação, neste projeto possue dois contextos:

  • 'modal-provider.tsx' é o responsável por fazer a ativação/desativação dos modais.
  • 'task-provider.tsx' é o responsável por fazer a adição/remoção das tarefas e salvar/remover as tarefas do localStorage.

Como rodar o projeto na minha máquina?

• Vale ressaltar que já está o link do site no topo desta documentação. Mas caso queira analisar o código fonte fique a vontade para instalar este case na sua máquina! Tutorial a baixo:

• Antes de tudo, você precisa ter o Git instalado no seu computador. O Git é uma ferramenta que permite clonar e gerenciar repositórios de código.

  • Windows: Baixe o Git aqui e siga as instruções de instalação.
  • macOS: Você pode instalar o Git aqui ou usando o Homebrew com o comando brew install git:

    brew install git

  • Linux: Use o gerenciador de pacotes da sua distribuição, por exemplo para Debian/Ubuntu:

    sudo apt install git

• Abra o terminal (no Windows, você pode usar o Git Bash, que é instalado junto com o Git).

• Navegue até o diretório onde deseja armazenar o projeto.

• Execute o comando para clonar o repositório:

  [email protected]:DevPBDias/legaplan-teste-tecnico.git

• Após clonar o repositório, navegue até a pasta do projeto

  cd legaplan-teste-tecnico

• Agora você pode abrir os arquivos do projeto com seu editor de texto ou IDE preferido. Exemplo do vsCode:

  code .

• 🚨 Não esqueça que para não ocorrer erros no código ao clonar ele, você deve fazer o comando abaixo 🚨

  npm i   

• Pronto! Todo o site estará funcionado na sua máquina. Porém, caso precise de alguma ajuda em algo entre em contato comigo pelo meu Linkedin.

🤝🏼 Vamos nos conectar?

🎉 É isso! Este é o projeto finalizado, caso tenha ficado com alguma dúvida ou deseje complementar algo diretamente comigo você pode estar entrando em contato através do meu Linkedin.

🚀 Se gostou desse projeto, confira mais projetos como este no meu Portfolio.

👋🏻 Obrigado pela atenção e espero que tenha gostado do que tenha visto aqui, que tal agora dar uma olhada nos meus outros repositórios?

❤️ Créditos

Créditos do figma total a equipe LegaPlan

https://www.figma.com/design/4iESWnasLZSHyghg1ipj1P/Teste-Dev-Junior---Legaplan?node-id=0-1&node-type=canvas&t=GxQUSS4KxQUWBUBN-0

Créditos dos emojis

https://emojipedia.org

Créditos dos ícones

https://marwin1991.github.io/profile-technology-icons/