Auction Website

Ponto de leilão

O ponto de leilão é um site em que os usuários podem comprar e vender itens. Meu objetivo com este projeto de pilha completa foi o design e o desenvolvimento de uma plataforma de leilão on -line, semelhante ao eBay. A implementação segue uma arquitetura Rest-API e alguns dos principais recursos são:

• Autorização e autenticação segura
• Controle de acesso baseado em função
• Cliente de correio dentro do aplicativo
• Recomendações usando a fatorização da matriz

Tecnologias

Uma pilha JavaScript foi usada para implantação mais fácil e rápida, composta de express e node.js para o back-end, MySQL para o banco de dados e reagem para o front-end. Um banco de dados relacional diferente também pode ser usado, pois a modelagem de dados, associações e consultas são tratadas com mapeamento de objetos-relatórios usando sequelização .

Requisitos e configuração

Back-end

1. Para o back-end MySQL ou um banco de dados relacional semelhante, é necessário, bem como a instalação do Node.js e NPM.

2. No arquivo config.json, adicione suas configurações pessoais do MySQL.

3. Para instalar o Express, CORS e outros módulos necessários, na pasta API Run: npm install

4. Para conectar sequelizar ao banco de dados, execute o comando: sequelize init

5. As transações são criptografadas através do protocolo SSL/TLS. Para criar o certificado localmente, você pode usar mkcert e adicionar o caminho em:

 const sslServer = https . createServer ( {
    key : fs . readFileSync ( '/yourpath/key.pem' ) ,
    cert : fs . readFileSync ( '/yourpath/cert.pem' )
} , app ) ;

• Quando o servidor começa com um banco de dados "limpo", as tabelas são criadas automaticamente com base nos modelos orientados a objetos definidos nos modelos.
• Além disso, um usuário da função de administrador é criado automaticamente com o nome de usuário: admin e senha inicial: 1234, que pode ser alterado.
• O Nodemon também é configurado, para que o servidor reinicie automaticamente sempre que o código do back-end é alterado, enquanto o servidor estiver em execução.

Para iniciar o servidor, basta executar no diretório da API:

 npm start

Front-end

Para o front-end, todas as dependências necessárias são definidas no arquivo package.json . Para instalá -los, basta executar no diretório frontal: npm install

Para iniciar o front-end na execução do diretório frontal:

 npm start

Projeto

Para o design do aplicativo, usei CSS puro e alguns componentes da interface do usuário do material. Algumas animações foram adicionadas para as transições da página, bem como para a página de edição. Para os títulos e elementos principais, usei o Futura, que é um tipo de letra simples e atemporal, enquanto para o corpo e detalhes usei Roboto e outras fontes sem serrifes semelhantes.

Página de boas -vindas

A página de boas -vindas do site é bastante simples, com o objetivo de interessar aos novos visitantes em entrar no site. Existe apenas um botão de login e um breve resumo dos serviços prestados, para que não estejam sobrecarregados com informações.

Leilões

Na página de leilões, o usuário pode navegar nas listagens por categoria, pesquisa ou filtro. As categorias têm uma estrutura hierárquica, que foi alcançada em MySQL usando uma chave estrangeira de referência e referência e construindo a árvore no front-end e no back-end recursivamente quando necessário.

Página de leilão

A página de leilão possui todos os detalhes de um item e, dependendo de um comprador ou o vendedor, eles o visualizam, eles são apresentados com opções diferentes. As fotos são exibidas em um carrossel e, para o upload da foto, usei a API Multer no back-end. Para exibir o local que usei o OpenStreetMap e o folheto . O usuário pode adicionar o local exato soltando um pino ou pesquisando. Eu projetei um recipiente do tipo Polaroid para o mapa, como pode ser visto na captura de tela acima, onde as coordenadas são exibidas no formato DMS.

Login e registro

Para os campos de registro, bem como as outras formas do site, usei o YUP para executar a validação do esquema em combinação com a Biblioteca Formik . A senha do usuário é armazenada na hash de banco de dados usando a função BCRYPT , que é baseada na cifra Blowfish.

Perfil

Na página de perfil, um comprador pode ver todos os itens disponíveis de um vendedor. Uma página de painel semelhante é fornecida para cada usuário, onde os itens também são recomendados a eles. O sistema de recomendação usa o algoritmo de fator de matriz, enquanto os dados são coletados enquanto os usuários estão visitando um leilão ou licitação nele.

Correspondência

Além da caixa de entrada, caixa de saída e capacidade de enviar uma nova mensagem, no cliente de email, também há uma interface de mensagens. Além das mensagens, o comprador pode classificar um vendedor quando um item chegar e o vendedor, respectivamente, pode classificar um comprador quando concluir o pagamento.

Admin

Quando conectado, o administrador pode aprovar aplicativos de usuário, bem como exportar os detalhes do leilão no formato XML, JSON ou CSV seguindo o modelo DTD do eBay. Além disso, para preencher o banco de dados e treinar o algoritmo de recomendação, usei dados reais do site do eBay no formato XML fornecido pela UCLA.

Ferramentas

O site foi construído usando o Express, Node.js, MySQL, Sequelizar e React.