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


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.
- 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.
José Vítor
R$ 450,00
Trap Nation
R$ 345,00
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
- WorkingSalvar posts
- WorkingVer posts salvos
- WorkingUpload de arquivos
- Fazer lances
- WorkingVer posts os quais você fez lance
- WorkingNotificações persistidas em banco de dados
- WorkingFazer perguntas no post
- WorkingVer 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.