Auction.

Compre e venda o que quiser, pelo preço que quiser!

Imagem da home do projeto Auction App na versão desktop
Imagem da home do projeto Auction App na versão mobile

Apresentação.

Esse projeto é de uma ideia que eu tive antes de começar a programar, e ele era uma das minhas metas como programador.

A proposta é ser um site similar ao OLX e Facebook, onde você pode fazer posts de coisas que você queira vender.

Como funciona?

Criei snippets para explicar a lógica da minha aplicação passo a passo.

  • Cada post possui um prazo para ser encerrado, determinado pelo autor.

    Publicado há 7 dias - encerra em 2 dias

  • Enquanto ativo, seu post será mostrado em um feed similar ao do Facebook.
    Foto de Vitor Markis

    Vitor Markis

    há 20 dias

    Sinuca Charme, estrutura em MDF laqueado, com campo de jogo em Pedra de Ardósia de 20mm revestido com tecido acrílico, o que proporciona estabilidade e alta qualidade no nivelamento

    Foto do post

    Mesa de Sinuca Charme 2,20 X 1,20

    R$ 300
  • As pessoas poderão entrar na página do post, ver detalhes, ver descrição, ver preço, fazer perguntas, e fazer lances.

    Mesa de Sinuca Charme 2,20 X 1,20

    Publicado há 20 dias - encerra em 14 dias

    R$ 300,00

    ou 12x de R$R$ 25

    3 lances no momento

  • Um lance é um valor que a pessoa está disposta a pagar por seu produto, pode ser maior ou menor ao valor original.
    R$
  • Agora que seu post possui vários lances, você pode escolher quem você deseja premiar como vencedor do leilão.
    Foto de perfil de José Vítor

    José Vítor

    R$ 450,00

    Foto de perfil de Trap Nation

    Trap Nation

    R$ 345,00

    Foto de perfil de Marcela Campos

    Marcela Campos

    R$ 320,00

  • Caso ninguém seja escolhido por você, ao final do prazo do post, o lance com maior valor é escolhido como vencedor do leilão.

Implementações

Coisas que adicionei e desafios que passei durante o projeto.

  • Criação de conta
  • Autenticação via JWT
  • Autenticação Social (Google e Github)
  • Criar posts
  • Ver lances em seu post
  • Working
    Salvar posts
  • Working
    Ver posts salvos
  • Working
    Upload de arquivos
  • Fazer lances
  • Working
    Ver posts os quais você fez lance
  • Working
    Notificações persistidas em banco de dados
  • Working
    Fazer perguntas no post
  • Working
    Ver suas aquisições
  • Carrossel de imagens na página do produto

Tecnologias Usadas

As tecnologias que eu usei e o motivo de tê-las escolhidas.

Next, por ser um superset do React, com diversas funcionalidades nativas e essenciais para produção.

Usei as API Routes do Next para criação do meu backend e provisão dos dados necessários.

Prisma, foi usado para fazer a conexão, as escritas e consultas ao banco de dados.

É o primeiro ORM que aprendi a usar, através de muita pesquisa, e amei a integração dele com Typescript, torna o processo de consulta e escrita muito menos custoso e mais prático.

Tailwind, usei para fazer a estilização dos componentes. Escolhi Tailwind porque além de prático, ele provê estilos, cores e presets mais opinados e modernos, o shadow é um ótimo exemplo.

Ele também torna a responsividade algo muito mais fácil e prático, porém ainda existem coisas que precisam ser feitas com CSS puro, porque a mesma configuração pelo Tailwind seria muito verbosa.

MYSQL, usei como banco de dados da aplicação, foi o primeiro banco de dados relacional que aprendi, então era o que eu tinha mais familiaridade.

Ouço falar que bancos de dados como Postgre e MYSQL são os melhores para grandes aplicações, apesar de seus tradeoffs.

O que me faz querer usar MYSQL em todos projetos é porque bons serviços de hospedagem de banco de dados como PlanetScale usam MYSQL.

Vercel, usado para hospedar a aplicação, escolhi a Vercel porque é muito simples fazer deploy lá, eles possuem uma ótima integração nativa com o Next, então seria o habit natural para uma aplicação Next.

A Vercel oferece uma variedade de funcionalidades que integram muito bem com Next.

Uma delas é sem dúvidas servir as páginas de forma estáticas, tornando a navegação quase instantânea entre as páginas da aplicação.

Um tradeoff é que o ambiente da Vercel é serverless, causando um problema chamado cold start, que, pelo fato do servidor rodar apenas quando há uma requisição, ele precisa iniciar o servidor, fazer a conexão com o banco de dados, fazer as consultas/escritas, enviar ao servidor e o servidor retorna a resposta ao client, e todo esse processo demora um bom tempo, fazendo com que a primeira vez que carregada a página demora bastante até carrega-la.