Moxen Live Shopping

A plataforma web para divulgar Lives aonde produtos serão leiloados.

Live Website · Reporte um Bug

Sumário

1. Sobre o projeto
   • Construído com
2. Clonando o Repositório
   • Pré-requisitos
   • Instalação
3. Exemplos de uso e explicações
4. Roadmap
5. Contato

Sobre o projeto

O objetivo deste desafio técnico é avaliar as habilidades de desenvolvimento de aplicativos ou sites, com foco em criar uma plataforma de live shopping.

Uma plataforma web para divulgar as Lives que permitirá que usuários cadastrem e gerenciem suas Lives e produtos que serão leiloados.

(Voltar ao inicío)

Construído com

• Next.JS
• TypeScript
• PlanetScale (MySQL)
• UploadThing
  
  

• Prisma
  
  

• Clerk
  
  

• Svix (Integração do Clerk com o servidor)
  
  

• Shacn/UI (Livraria de componentes)
• TailwindCSS
• Lucide Icons
• Headless ui
• Embla Carousel
  
  

• React-Hook-Form
• Zod
  
  

• Tanstack/tables
  
  

• Day.js
  
  

• Query String
  
  

(Voltar ao inicío)

Clonando o Repositório

Este é um guia dos passos que você precisa fazer para utilizar o projeto na em sua máquina local

Pré-requisitos

Em seu terminal:

• npm

  npm install npm@latest -g

Instalação

Em seu terminal:

1. Clone o repositório

   git clone https://github.com/samuelcolares/moxen-live-shopping.git

2. Abra a pasta do repositório

   cd moxen-live-shopping

3. Instale os pacotes NPM

   npm install

4. Se você usa VSCode como seu editor de código:

   code .

5. Para o projeto funcionar você vai precisar criar um arquivo '.env' na pasta raiz do seu projeto e definir as seguintes variáveis:

   // Autenticação
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='sua key aqui'
   CLERK_SECRET_KEY='sua key aqui'
   CLERK_WEBHOOK_SECRET='sua key aqui'
   
   // Manter essas 4 variáveis desta exata forma
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
   
   // Database de sua escolha (PlanetScale ou alguma MySQL database é extremamente recomendada)
   // Caso saiba como criar e configurar uma database local também funcionaria
   // https://www.prisma.io/dataguide/mysql/setting-up-a-local-mysql-database
   // https://www.prisma.io/dataguide/mysql/connecting-to-mysql-databases
   DATABASE_URL='sua key aqui'
   
   // Upload de imagens feita com Uploadthing
   UPLOADTHING_SECRET='sua secret UploadThing key aqui'
   UPLOADTHING_APP_ID='sua ID UploadThing key aqui'

6. Após a escolha da database de sua preferência, mude o "provider" no arquivo prisma.schema (📂 prisma/prisma.schema) de acordo com sua escolha.

   datasource db {
     provider = "mysql" // <-- Sua escolha, poderia ser cockroachdb, postgre, mongoDB, sqlite...
     url      = env("DATABASE_URL")
    }

7. Gere a relação do Prisma e faça a conexão com a database

    npx prisma generate && npx prisma db push

8. Inicie o projeto localmente com

    npm run dev

Os exemplos acima foram mostrando como iniciar a aplicação localmente com NPM, mas é claro que você pode usar outros gerenciadores de pacotes como: PNPM, YARN, BUN

(Voltar ao inicío)

Exemplos de uso e explicações

Rotas Livres:

1. Início ( Rota: '/' )

2. Pesquisa (Rota: '/buscar')

⚠️ Query-string transforma o texto digitado no input e transforma em um parâmetro de busca (searchParams) e adiciona junto da rota ('/buscar'), exemplo "Teste" => '/buscar?termo=Teste'

3. Live (Rota dinamica: '/live/[liveId]')

Página aonde mostra todos os detalhes fornecidos no formulário de cadastro de lives (pedidos na documentação do teste) (ver formulário na captura de tela #..)

Rotas Protegidas:

Para total acesso do que o website é capaz é necessário realizar login e se cadastrar no sistema, isso inclui:

Canal do usuário

Criar, editar e deletar produtos

Agendar, editar e deletar lives

4. Login

4.1 Tela de Login

Durante o login o usuário pode escolher 3 formas diferentes de fazer log-in, caso ele opte por fazer pelo github o usuário vai pular a captura de tela 4.2 e vai diretamente para a captura de tela #4.3.

⚠️ Webhook Svix faz a integração do Clerk com a database do projeto enviando os dados como username, a url da imagem de perfil e o mais importante o ClerkUserId.

4.2 Tela de Login, dados adicionais

Este processo só acontece uma vez por conta.

4.3 Início Autenticado ( Rota: '/' )

A maior diferença visual inicial é uma sidebar que possui propriedade de colapsar quando arrastada da direita para a esquerda e podendo ser expandida de novo arrastando-a da esquerda para a direita

5. Canal do Usuário (Rota: '/canal')

5.1 Aba de lives selecionada

Abaixo da imagem de perfil possui seletor de abas podendo ser alternadas entre Lives agendadas e Produtos cadastrados

⚠️ Tabela criada com Tanstack/tables possuindo um filtro para pesquisa pelo título da live (ou pelo nome do produto, caso aba de produto esteja selecionada)

❗Na coluna de 'Ações' da tabela podemos ver 4 opções sendo:

1. Link rapido para a página de detalhes da live,
2. Opção de visualizar os detalhes da lives através de um Dialog Modal
3. Link para editar a live
4. Link para deletar a live aonde irá abrir um Alert Modal para re-confirmar se o usuário deseja prosseguir em sua ação.

5.1.1 Modal de detalhes da live

5.2 Aba de produtos selecionado

❗Na coluna de 'Ações' da tabela podemos ver 3 opções sendo:

1. Opção de visualizar as imagens dos produto através de um Dialog Modal
2. Link para editar a produto
3. Link para deletar produto aonde irá abrir um Alert Modal para re-confirmar se o usuário deseja prosseguir em sua ação.

5.2.1 Modal galeria com imagens do produto

⚠️ Galeria com abas de seleção de imagem criadas com Headless ui

6. Formulário de cadastrar/editar produto

6.1 Criar produto (Rota: '/canal/produto/novoProduto')

⚠️ Formulários nesse projeto são adimnistrados pelo React-Hook-Form e validados por Zod.

⚠️ Upload de imagens feito por conta da livraria UploadThing (Por alguma razão as vezes dar upload em imagens PNG está retornando um erro, pelo que pesquisei esse erro também acontece com outros seja com imagens em PNG ou em arquivos PDF, como é uma livraria muito recente creio que em breve vão corrigir isso)

❗Quando o upload terminar as URL das imagens vão preencher até no máximo 5 campos de texto.

❗Para cadastrar um produto você também pode inserir imagens do servidor do imgur, basta copiar a url em um campo de input, mas o uploadthing tem a permissão de sobrescrever os campos de input caso já tenha 5 Urls adicionadas, começando a sobrescrever de baixo pra cima.

ao terminar o cadastro o usuário é retornado a página do seu canal.

6.2 Editar produto (Rota: '/canal/produto/[produtoId]')

Botão de deletar produto agora aparece e todos os dados do produto são preenchidos automaticamente em seus respectivos campos de texto para o usuário editar apenas o que precisa.

7. Formulário de agendar/editar live

⚠️ Este formulário só está disponível caso o usuário tenha no mínimo 1 produto cadastrado.

7.1 Agendar live (Rota: '/canal/live/novaLive')

⚠️ Formulários de agendar live também tem validação adicional por conta das datas, com day.js. Nesse caso não queremos que o usuário agende a live para uma data que seja no passado ou então com a data de início sendo maior que a data de termíno.

⚠️ Upload da thumbnail da live também é feito por conta da livraria UploadThing, neste caso com uam dropzone.

❗Assim como no formulário de produtos a live é possível também colocar um link de imagem do imgur

7.2 Editar live (Rota: '/canal/live/[liveId]')

7.3 Editar live pela página do detalhes da página

⚠️ O botão de editar live só vai aparecer na página da live caso o usuário que acessou também seja o criador dela.

8. Indicadores

⚠️ Indicadores para cada tipo de live, caso "ao vivo", agendada e encerrada

(Voltar ao inicío)

Roadmap

1. Início do processo criativo desenhado

2. Fluxograma inicial do que pretendia utilizar

3. Mãos na massa.

Testes

Eu ainda preciso melhorar nas escritas de testes, escrevi alguns em jest mas nao fiquei satisfeito com a qualidade dos mesmos, então para não entregar algo que seja sem excelência eu optei por não continuar fazendo.

(Voltar ao inicío)

Contato

Samuel Colares - samuelcolaresdequino@gmail.com

(Voltar ao inicío)

(Voltar ao inicío)

-->