Auction Website

Auktionspunkt

Auktionspunkt ist eine Website, auf der Benutzer Artikel kaufen und verkaufen können. Mein Ziel mit diesem vollständigen Stack -Projekt war das Design und die Entwicklung einer Online -Auktionsplattform, ähnlich wie bei eBay. Die Implementierung folgt einer Rest-API-Architektur, und einige der wichtigsten Merkmale sind:

• Sichere Autorisierung und Authentifizierung
• Rollenbasierte Zugriffskontrolle
• Mail Client innerhalb der Bewerbung
• Empfehlungen unter Verwendung der Matrixfaktorisierung

Technologien

Ein JavaScript-Stack wurde für die einfachere und schnellere Bereitstellung verwendet, die aus Express und Node.js für das Back-End, MySQL für die Datenbank und Reaging für das Front-End besteht. Eine andere relationale Datenbank kann auch verwendet werden, da die Datenmodellierung, Assoziationen und Abfragen mit der Objektrelationszuordnung unter Verwendung von Sequelize behandelt werden.

Anforderungen & Setup

Back-End

1. Für die Back-End-MySQL oder eine ähnliche relationale Datenbank ist sowie die Installation von Node.js und NPM erforderlich.

2. Fügen Sie in der Datei config.json Ihre persönlichen MySQL -Einstellungen hinzu.

3. So installieren Sie Express, CORs und andere erforderliche Module im API -Ordner: npm install

4. So führen Sie den Befehl: sequelize init durch, um die Folge mit der Datenbank mit der Datenbank zu verbinden.

5. Die Transaktionen werden durch das SSL/TLS -Protokoll verschlüsselt. Um das Zertifikat lokal zu erstellen, können Sie mkcert verwenden und dann den Pfad hinzufügen:

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

• Wenn der Server mit einer "sauberen" Datenbank startet, werden die Tabellen automatisch basierend auf den in Modellen definierten objektorientierten Modellen erstellt.
• Außerdem wird ein Benutzer mit der Administratorrolle automatisch mit dem Benutzernamen erstellt: admin und anfängliches Passwort: 1234, was geändert werden kann.
• Nodemon ist ebenfalls eingerichtet, so dass der Server jedes Mal, wenn der Code des Back-Ends geändert wird, automatisch neu gestartet wird, während der Server ausgeführt wird.

So starten Sie den Server einfach im API -Verzeichnis aus:

 npm start

Frontend

Für das Front-End sind alle notwendigen Abhängigkeiten in der Datei package.json definiert. So installieren Sie sie einfach im vorderen Verzeichnis: npm install

So starten Sie das Front-End im Front-Verzeichnis:

 npm start

Design

Für das Design der Anwendung habe ich reine CSS und einige materielle UI -Komponenten verwendet. Für die Seitenübergänge sowie die Bearbeitungsseite wurden einige Animationen hinzugefügt. Für die Titel und Hauptelemente habe ich Futura verwendet, eine einfache und zeitlose Schrift, während ich für den Körper und die Details Roboto und andere ähnliche serifische Schriftarten verwendet habe.

Willkommensseite

Die Begrüßungsseite der Website ist ziemlich einfach und zielt darauf ab, die neuen Besucher für den Eintritt in die Website zu interessieren. Es gibt nur eine Login -Taste und eine kurze Zusammenfassung der erbrachten Dienste, damit sie nicht mit Informationen überfordert sind.

Auktionen

Auf der Seite der Auktionen kann der Benutzer die Listings nach Kategorie, Suche oder Filter durchsuchen. Die Kategorien haben eine hierarchische Struktur, die in MySQL erreicht wurde, indem ein selbstverweisender Fremdkasten verwendet und den Baum sowohl auf dem Front-End als auch auf dem Back-End rekursiv gebaut wurde.

Auktionsseite

Die Auktionsseite enthält alle Details eines Artikels. Abhängig davon, ob ein Käufer oder der Verkäufer ihn anzeigt, erhalten sie unterschiedliche Optionen. Die Fotos werden in einem Karussell angezeigt und für das Foto-Upload habe ich die Multer- API im Back-End verwendet. Um den Ort anzuzeigen, den ich OpenStreetmap und Broschüre verwendet habe. Der Benutzer kann den genauen Speicherort hinzufügen, indem Sie eine PIN fallen lassen oder durch Suche. Ich habe einen polaroidähnlichen Behälter für die Karte entworfen, wie im obigen Screenshot zu sehen ist, wo die Koordinaten im DMS-Format angezeigt werden.

Login & Registrierung

Für die Registrierungsfelder sowie für die anderen Formulare der Website habe ich YUP verwendet, um die Schema -Validierung in Kombination mit der Formik -Bibliothek durchzuführen. Das Kennwort des Benutzers wird in der Datenbank mit der BCrypt -Funktion, die auf der Blowfish -Chiffre basiert, gespeichert.

Profil

Auf der Profilseite kann ein Käufer alle verfügbaren Artikel eines Verkäufers sehen. Für jeden Benutzer wird eine ähnliche Dashboard -Seite bereitgestellt, bei der auch Elemente ihm empfohlen werden. Das Empfehlungssystem verwendet den Matrix -Faktorisierungsalgorithmus, während die Daten dafür gesammelt werden, während die Benutzer eine Auktion besuchen oder darauf ausgebot.

Post

Neben dem Posteingang, dem Operationsbox und der Möglichkeit, eine neue Nachricht zu senden, gibt es im Mail -Client auch eine Messaging -Oberfläche. Abgesehen von den Nachrichten kann der Käufer einen Verkäufer bewerten, wenn ein Artikel angekommen ist, und der Verkäufer kann einen Käufer bewerten, wenn er die Zahlung abgeschlossen hat.

Administrator

Wenn Sie sich im Administrator angemeldet haben, können Benutzeranwendungen genehmigen und die Auktionsdetails in XML-, JSON- oder CSV -Format nach der eBay -DTD -Vorlage exportieren. Um die Datenbank zu bevölkern und den Empfehlungsalgorithmus zu trainieren, habe ich reale Daten von der Ebay -Website im von UCLA bereitgestellten XML -Format verwendet.

Werkzeuge

Die Website wurde mit Express, Node.js, MySQL, Folgen und Reagieren erstellt.