📅 Delta Code Calendar

react
vite
styled components
javascript
css
html

🇺🇸 English

🇧🇷 Português

📅 Delta Code Calendar

📹 Apresentação em Vídeo do Projeto

Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI

🚀 Tecnologias Utilizadas

Abaixo estão as 6 tecnologias utilizadas no desenvolvimento do projeto, e seus motivos

_ViteJS

Motivo

Após refletir sobre o real objetivo do teste, devido a sua simplicidade em termos de recursos, concluí que a estrutura minimalista do Vite era ideal.

_ReactJS

Motivo

Ele é um requisito para o teste, e é a base do Vite.

_{Styled
Components}

Motivo

O escolhi pois, tendo em vista que teria que desenvolver muitas soluções do 0, precisaria de uma ferramenta para estilização tão poderosa e flexível quanto ele.

_Javascript

Motivo

Fica implícito na sintáxe `JSX` do Vite.

_CSS3

Motivo

Fica implícito no Styled Components.

_HTML5

Motivo

Fica implícito na sintaxe `JSX` do Vite.

🗓️ Etapas

26 das atuais 29 etapas já foram concluídas, mas novas podem ser adicionadas!

🗹	Definição da estrutura base e instalação de dependências
🗹	Definição de estilos globais
🗹	Armazenamento dos ícones necessário do layout
🗹	Padronização das cores utilizando o `ThemeProvider`
🗹	Criação do componente central `components/App`
🗹	Desenvolvimento do `components/Header`
🗹	Desenvolvimento do `components/NavigationPanel`
🗹	Desenvolvimento do `components/MainContent`
🗹	Desenvolvimento do `components/UserCalendar`
🗹	Correção do comportamento `components/Header` durante o scroll
🗹	Criação do `utils/userMockup` e melhoria da lógica geral
🗹	Desenvolvimento do `components/CalendarSelect`
🗹	Criação do `utils/calendarHelpers` e melhoria da lógica geral
🗹	Deixando o fluxo básico do calendário funcional
🗹	Estilo do calendário atualizado para 7x6
🗹	Recebendo os eventos do usuário ao longo do mês/ano selecionado no calendário
🗹	Desenvolvimento do `components/UserCalendarEvents`
🗹	Criação do `context/UserCalendarContext` e melhoria da lógica geral
🗹	Recebendo a lista de eventos do usuário no dia selecionado no calendário
🗹	Filtrando os dias dos eventos baseado em seus tipos (entrada, saída ou ambos)
🗹	Resolvendo bug do dia atrasado e melhoria da lógica geral
🗹	Criação do `utils/getFormattedCurrency`
🗹	Deixando o calendário completamente funcional e melhoria da lógica geral
🗹	Melhoria do `utils/userMockup`
🗹	Desenvolvimento da responsividade
🗹	Melhoria do SEO e da lógica geral
🗹	Melhoria do `UserCalendar`: Chamar mês/ano anterior/posterior ao clicar em seus dias
☐	Melhoria do `UserCalendarEvents`: Mostrar apenas 1 dia quando no estado inicial e tiver mais de um (ex: 5...), e mostrar os outros ao evento de click/hover/focus na lista dos dias
☐	Melhoria do `UserCalendarEvents`: Limitar tamanho da string do título do evento

📝 Sobre

Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!

Em resumo, a aplicação se consiste no meu resultado ao fazer o Teste técnico de calendário da Delta Code, onde deve-se basicamente desenvolver esse layout fornecido com fidelidade, sendo a principal parte do teste, o desenvolvimento do componente de calendário com as interações requisitadas e respeitando a restrição de fazer do 0, sem auxílio de nenhuma lib externa.

Como mencionado nas instruções, fiquei bastante tentado a desenvolver uma API para essa aplicação, mas após refletir percebi que devido ao prazo de 7 dias, tanto a API quanto a Interface ficariam bem medianas por falta de tempo se eu tentasse desenvolver ambas, portanto decidi focar todo o meu tempo e esforço no Front-end (mas ainda irei desenvolver essa API futuramente 🤩), e me aprofundar o máximo que conseguir nele dentro desse prazo, tentando desenvolver um código extremamente escalável, manutenível, e principalmente, indo além do que foi requisitado nas instruções do calendário.

E também, acredito que essa minha abordagem de focar todo meu tempo no Front-end tenha muito mais a ver com a essência do teste, pois afinal eu estou concorrendo a uma vaga de Front-end, e o teste tem como principal objetivo, além de avaliar a fidelidade do design da minha Interface, avaliar também a qualidade do meu código e como eu resolvo um problema em específico como sendo um Dev Front-end, então nada melhor do que me verem sofrendo tentando desenvolver um componente de calendário completamente funcional e ainda por cima do zero 😂

Bem, depois dessa introdução mais descontraída, nas sessões abaixo eu falo mais detalhadamente sobre cada parte da aplicação.
Também recomendo dar uma conferida na sessão de Tecnologias, caso queria saber o motivo que me levou a escolher as tecnologias utilizadas, e na sessão de Etapas caso queria ter uma visão geral de como foi/está sendo a evolução do projeto.

📑 Componentes

A aplicação conta com 10 componentes, sendo eles:

components/App: Esse componente é basicamente onde se encontra toda a aplicação. Ele reflete uma boa prática que faço de centralizar toda a aplicação nele, e renderizá-lo na main, para fins de organização;
components/Header: Esse componente é o cabeçalho da aplicação;
components/NavigationPanel: Esse componente é o painel de navegação à esquerda (desktop) ou em baixo (mobile);
components/MainContent: Esse componente é o que agrupa as principais informações da aplicação, sendo elas basicamente os dados do usuário (nome, foto...) no início e os componentes de calendário;
components/UserCalendar: Esse é o primeiro componente de calendário, relativo ao próprio calendário de fato. A partir dos dados recebidos, ele retorna dinamicamente os botões de salto no tempo acima do calendário, dias da semana, dias do mês selecionado... É por ele também que é possível selecionar os dias, meses e anos do calendário, e também mostra os dias que tem eventos destacados;
components/CalendarSelect: Esse componente é usado dentro do components/UserCalendar, e ele é responsável por agilizar e padronizar o processo de seleção de mês e ano, além de prevenir repetição de código;
components/UserCalendarEvents: Esse é o segundo componente de calendário, sendo responsável por mostrar o resultado da interação do usuário com o componente de components/UserCalendar, ou mesmo mostrar em mais detalhes o que já está sendo mostrado no components/UserCalendar. Isto é, ele é responsável por mostrar por exemplo, a legenda informado o status do mês/ano selecionado (se tem eventos ou não, e se sim, quais), ou os dados dos dias que contém eventos, quando o usuário clica nesses dias;

context/UserCalendarContext: Esse componente é o Context API que envolve os componentes de components/UserCalendar e components/UserCalendarEvents, para que ambos possam trocar informações mais facilmente e organizadamente;
styles/GlobalStyles: Esse é o componente que aplica os estilos globais da aplicação, ele é utilizado no main;
styles/theme/default: Esse componente tem a ver com o recurso de themeProvider do Styled Components, sendo nele que ficam armazenadas todas as informações relacionadas a cor do tema. Essa é outra boa prática que sempre costumo fazer quando uso Styled components, para fins de organização e flexibilidade ao lidar com temas ou apenas com cores em geral.

📄 Utilitários

A aplicação conta com 3 utilitários, sendo eles:

utils/getFormattedCurrency: Responsável por, a partir do número recebido, retorná-lo corretamente em formatado em 'BRL;
utils/calendarHelpers: Responsável por dispor de diversas e variadas funções/informações úteis ao se lidar com os componentes de components/UserCalendar e components/UserCalendarEvents, sendo elas:
- monthNamesList e weekdayNamesList: Essas são respectivamente: uma lista contendo os nomes dos 12 meses do ano, e uma lista contendo os nomes dos 7 dias da semana. Ao lidar com datas no Javascript, ele retorna os meses e dias da semana em forma de números, e uso essas listas para nomear esses números com seus respectivos nomes na posição do array.
- getYearsRangeList: Essa função retorna um array de anos baseado nas informações de year e range que ela recebe. Ela é usada no components/UserCalendar para montar a seleção dos anos.
- getRangeOfDaysInMonth: Essa função retorna um array de dias baseado nas informações de year e month que ela recebe, contendo 42 items para preencher o layout grid do calendário de 7x6, seguindo o padrão dos calendários de sistema, mostrando os últimos dias do mês anterior e os primeiros dias do mês posterior;
- getCorrectRangeOfDaysInMonth: Há momentos em que preciso de um array apenas com os dias do ano e mês informados, e para isso existe essa função. Ela recebe o retorno da função anterior (ou seja, um array com 42 items) e o filtra, deixando apenas o dias do mês e ano informados. Um exemplo de uso dessa função, é no components/UserCalendarEvents, em que dependo exclusivamente dos dias do mês/ano selecionado para estruturar como eles aparecerão na legenda;
- getFormattedDate: Baseado na data recebida, essa função pode retornar essa data formatada em JSON ou em pt-BR. Um exemplo de uso para essa função, é no components/UserCalendarEvents - quando o usuário clica em algum dia no calendário e aparece a data formatada no título;
- getCalendarEventsAlert: A partir da data recebida, essa função retorna o tipo de evento (entrada, saída, ou ambos) de um dia e relaciona isso a suas respectivas possíveis ocorrências (se nesse dia, tem apenas um evento, ou mais, e se tem mais, se são do mesmo tipo ou não). Simplificando, são 5 retornos possíveis: 1. O dia só teve um evento, e foi do tipo 'entrada', 2. O dia só teve um evento, e foi do tipo 'saída', 3. O dia teve mais de um evento, e foram todos do tipo 'entrada', 4. O dia teve mais de um evento, e foram todos do tipo 'saída', 5. O dia teve mais de um evento, e não foram todos do tipo 'entrada' e nem 'saída' (ou seja, foram mistos);
- getUserEventsInSelectedDay: A partir da data recebida (em JSON), essa função verifica se o usuário tem algum evento nessa data e o retorna. Um exemplo de uso dessa função, é quando o usuário clica em algum dia no calendário - se esse dia tenha eventos, eles serão mostrados ao lado, senão uma mensagem informando que esse dia não possui eventos;
utils/userMockup: Esse componente é um dos mais importantes e impactantes de toda a aplicação. Baseei minha lógica no modelo de usuário que esse componente exporta, assim simulando uma API, e nesse mesmo componente, eu deixei uma estrutura de exemplo com eventos espalhados pelo ano apenas para ter uma noção de como seria se você estivesse consumindo uma API com todos esses dados retirados da sua conta, como o Google Calendar API ou algo do tipo;

📖 Clonando o Projeto

Para clonar e executar este projeto em seu computador, você precisará do Git e Node.js v18.14.2 ou superior previamente instalados.
Feito isso, no terminal:

# Clone esse repositório com:
> git clone https://github.com/Luk4x/delta-code-calendar.git

# Entre no repositório com:
> cd delta-code-calendar

# Instale as dependências com:
> npm install

# Execute o projeto com:
> npm run dev

# Feito isso, você já poderá acessar o projeto pelo link que aparecerá no terminal! (algo como http://localhost:3000/ ou http://127.0.0.1:5173/)