Auction Website

Point de vente aux enchères

Le point d'enchères est un site Web où les utilisateurs peuvent acheter et vendre des articles. Mon objectif avec ce projet complet était la conception et le développement d'une plate-forme d'enchères en ligne, similaire à eBay. L'implémentation suit une architecture REST-API et certaines des principales caractéristiques sont:

• Autorisation et authentification sécurisées
• Contrôle d'accès basé sur les rôles
• Client de courrier dans la demande
• Recommandations utilisant la factorisation matricielle

Technologies

Une pile JavaScript a été utilisée pour un déploiement plus facile et plus rapide, composé d' Express et Node.js pour le back-end, MySQL pour la base de données et réagit pour le frontal. Une base de données relationnelle différente peut également être utilisée car la modélisation des données, les associations et les requêtes sont traitées avec un mappage relationnel par objet en utilisant Sequelize .

Exigences et configuration

Back-end

1. Pour le MySQL back-end ou une base de données relationnelle similaire est requise ainsi que l'installation de Node.js et NPM.

2. Dans le fichier config.json, ajoutez vos paramètres MySQL personnels.

3. Pour installer Express, CORS et autres modules nécessaires, dans le dossier API Run: npm install

4. Pour connecter séquelle à la base de données, exécutez la commande: sequelize init

5. Les transactions sont chiffrées via le protocole SSL / TLS. Pour créer le certificat localement, vous pouvez utiliser mkcert , puis ajouter le chemin:

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

• Lorsque le serveur commence par une base de données "propre", les tables sont automatiquement créées en fonction des modèles orientés objet définis dans les modèles.
• En outre, un utilisateur avec le rôle administrateur est automatiquement créé avec le nom d'utilisateur: admin et mot de passe initial: 1234, qui peut être modifié.
• Nodemon est également configuré, de sorte que le serveur redémarre automatiquement chaque fois que le code de back-end est modifié, pendant que le serveur est en cours d'exécution.

Pour démarrer le serveur, exécutez simplement dans le répertoire de l'API:

 npm start

L'extrémité avant

Pour le frontal, toutes les dépendances nécessaires sont définies dans le fichier package.json . Pour les installer, exécutez simplement dans le répertoire avant: npm install

Pour démarrer le front-end dans la course du répertoire avant:

 npm start

Conception

Pour la conception de l'application, j'ai utilisé des CSS purs et quelques composants d'interface utilisateur de matériaux. Quelques animations ont été ajoutées pour les transitions de page, ainsi que pour la page d'édition. Pour les titres et les principaux éléments, j'ai utilisé Futura, qui est une police de caractères simple et intemporelle, tandis que pour le corps et les détails, j'ai utilisé Roboto et d'autres polices Sans-Serif similaires.

Page de bienvenue

La page de bienvenue du site est assez simple, visant à intéresser les nouveaux visiteurs à entrer sur le site. Il n'y a qu'un bouton de connexion et un bref résumé des services fournis, afin qu'ils ne soient pas submergés par des informations.

Ventes aux enchères

À partir de la page des enchères, l'utilisateur peut parcourir les listes par catégorie, recherche ou filtre. Les catégories ont une structure hiérarchique, qui a été réalisée dans MySQL en utilisant une clé étrangère auto-référence et en construisant l'arbre à la fois sur le front-end et dans le back-end récursivement en cas de besoin.

Page de vente aux enchères

La page d'enchères contient tous les détails d'un article et en fonction si un acheteur ou le vendeur le consulte, il est présenté avec différentes options. Les photos sont affichées dans un carrousel et pour le téléchargement de photos, j'ai utilisé l'API Multer dans le back-end. Pour afficher l'emplacement, j'ai utilisé OpenStreetmap et le dépliant . L'utilisateur peut ajouter l'emplacement exact en supprimant une broche ou en recherchant. J'ai conçu un récipient de type Polaroid pour la carte comme on peut le voir dans la capture d'écran ci-dessus, où les coordonnées sont affichées dans le format DMS.

Connexion et inscription

Pour les champs d'enregistrement, ainsi que les autres formes du site Web, j'ai utilisé YUP pour effectuer la validation du schéma en combinaison avec la bibliothèque Formik . Le mot de passe de l'utilisateur est stocké dans la base de données hachée à l'aide de la fonction BCrypt , qui est basée sur le chiffre Blowfish.

Profil

Sur la page de profil, un acheteur peut voir tous les articles disponibles d'un vendeur. Une page de tableau de bord similaire est fournie pour chaque utilisateur, où les éléments leur sont également recommandés. Le système de recommandation utilise l'algorithme de factorisation Matrix, tandis que les données pour elles sont recueillies pendant que les utilisateurs visitent une vente aux enchères ou des enchères.

Mail

Mis à part la boîte de réception, la boîte ou la possibilité d'envoyer un nouveau message, dans le client de messagerie, il existe également une interface de messagerie. Là, en dehors des messages, l'acheteur peut évaluer un vendeur lorsqu'un article est arrivé et le vendeur respectivement peut évaluer un acheteur lorsqu'il a terminé le paiement.

Administrer

Lorsqu'il est connecté à l'administrateur peut approuver les applications utilisateur, ainsi que l'exportation des détails de l'enchère au format XML, JSON ou CSV suivant le modèle EBay DTD. En outre, pour remplir la base de données et former l'algorithme Recchandder, j'ai utilisé de vraies données du site Web eBay au format XML fourni par l'UCLA.

Outils

Le site Web a été construit en utilisant Express, Node.js, MySQL, séqueliste et réagir.