Memorize

Sumário

1. Sobre o projeto
2. Painel de Controle
3. Próximas Funcionalidades
4. Desafios
5. Tecnologias
6. Padronização de código
7. Exemplo de código
8. Testes
9. Instalação e Inicialização
10. Estrutura de Pastas

Sobre o Projeto

Este projeto está sendo desenvolvido para fornecer uma plataforma de acompanhamento e análise para escritores e leitores de livros. Com uma variedade de ferramentas e recursos, meu objetivo é ajudar escritores a monitorar seu progresso, entender melhor seus leitores e aprimorar suas obras.

Painel de Controle

Busca Avançada

• Encontre recursos específicos rapidamente através da busca avançada.

Perfil do Escritor

• Acompanhe sua produtividade diária e mantenha-se motivado.

Avaliação de Satisfação

• Defina metas diárias e visualize seu progresso com gráficos em tempo real.

Análise de Desempenho

• Acompanhe o progresso das metas, visualize a quantidade de palavras escritas e obtenha insights valiosos através de gráficos intuitivos.

Perfil do Leitor

• Explore a localização dos seus leitores, entenda melhor seu público-alvo e personalize suas obras de acordo com seus interesses.

Análise por Gênero e Tema

• Visualize a distribuição dos seus livros por gênero e tema, identifique tendências e otimize suas estratégias de escrita.

Próximas Funcionalidades

Seus Livros

• Gestão de Livros: Uma funcionalidade abrangente para gerenciar e organizar sua biblioteca pessoal.

Para mais detalhes sobre o que está por vir, confira o Roadmap.

---

Detalhes técnicos

Desafios

• Manter uma interface dinâmica com performance
• Usabilidade atendendo ao público alvo

Tecnologias

Principais tecnologias utilizadas

• Frontend:

  • Nextjs
  • Typescript
  • Jest
  • Testing Library
  • Tailwindcss
  • axios
  • Eslint e Prettier

• Backend:

  • NodeJs
  • Fastify
  • Jest
  • Testing Library
  • Typescript

• Banco de Dados:

  • Primsa
  • local - sqlite
  • quandor fizer deploy: PostgreSql

Padronização de código

• Geral
  • Componentes estão sendo criados com extensão com .tsx
  • Estrutura da features estão corretas (views, services, utils, controllers, tests, estilo)
  • Componentes que podem ser reutilizados estão no @shared
  • Funções estão sendo externalizadas para arquivo de utils
  • Arquivos de estilo estão sendo criados com terminação TV
  • Está sendo mantido Composition Pattern
  • Sempre que possível, componentes estão sendo utilizados da lib NextUi
  • HTTP State é usado sempre que possível para evitar tráfego
  • Hooks, funções específicas e etc estão sendo documentados com js docs

Exemplo de código

/**
 * @type T should contain the type of object to be returned and should be apllyied on the getDataFn as exemple
 * @param getDataFn async function to get data from database, local or anywhere. Should receive type of object returned and can receive a parameter
 * @param cacheName name of the cache to be created
 * @param cacheTime time of the cache
 * @param enabled optional param to define if this request should be enabled
 * @param initialData optional param to define a default value to this data
 * @returns data and all methods from useQuery
 * @example const getDataFn = (): TWordCount => ({}) as TWordCount
 * @example const { data } = useQueryData(getDataFn, 'wordCounters', '12-hours')
 */

export function useQueryData<T>(
  getDataFn: (params?: QueryFunction['arguments']) => Promise<T | undefined>,
  cacheName: TCacheName,
  cacheTime: TTimeToRefetchCache,
  enabled?: boolean,
  initialData?: T | InitialDataFunction<T>,
) {
  const staleTime = timeToRefetchCache[cacheTime]

  const { data, ...rest } = useQuery(cacheName, getDataFn, {
    refetchOnWindowFocus: false,
    staleTime,
    enabled,
    initialData,
  })

  return {
    data,
    ...rest,
  }
}

Manter o uso do js docs facilita o uso do entendimento da funcionalidade

Testes

• Testes unitários com Jest e testing library
• Backend está testando toda regra de negócio
• Frontend está testando integridade das features

Instalação e Inicialização

1. Instale as dependências com Yarn

   yarn

2. Execute os testes

   yarn test:server; yarn test:web

3. Inicie o servidor

   cd packages; cd server; yarn dev

4. Inicie o client em dev

   cd packages; cd web; yarn dev

5. Inicie o client em prod

   cd packages; cd web; yarn build

6. Após o build

   yarn start
   

Estrutura de Pastas

Web

Server