Das "League Ladder"-Projekt ist eine Webanwendung, die für das Praxisprojekt an der TH Köln entwickelt wurde. Es handelt sich um eine Plattform, die es Spielern von "League of Legends" ermöglicht, ihre Ranglistenpositionen zu verfolgen und zu vergleichen.
Die Anwendung nutzt eine Express.js-Backend und ein React-Frontend. Die Daten der Spieler und ihrer Ränge werden in einer MongoDB-Datenbank gespeichert und können über die bereitgestellten APIs abgerufen werden.
Im Rahmen der Bachelorarbeit soll Next.js hinzugefügt werden und die Performance-Vorteile des serverseitigen Renderings (SSR) analysiert werden.
Die Live-Version der Anwendung kann unter diesem Link aufgerufen werden: https://praxisprojekt-cf89137f47c5.herokuapp.com/
- Node.js und Express.js: Verwendet für den Aufbau der serverseitigen Logik, die Handhabung von Routen und HTTP-Anfragen (Controller).
- MVC-Architektur: Das Projekt folgt dem Model-View-Controller (MVC) Designmuster.
- MongoDB und Mongoose: NoSQL-Datenbank, verwendet für die Datenspeicherung und Schemavalidierung. Unterstützt CRUD-Operationen auf Datenbankeinträge.
- Benutzerauthentifizierung: Implementierung von Google OAuth2 und lokaler Authentifizierung mit Passport.js. Bei der lokalen Strategie wird das Passwort-Hashing mit Bcrypt umgesetzt.
- Best Practices: Helmet für Sicherheit, Compression für Leistung, und Rate Limiting gegen DoS-Angriffe.
- React: React wird für das User Interface genutzt.
- Next.js: Wird für serverseitiges Rendern (SSR) und statische Seiten-Generierung (SSG) verwendet.
- Deployment: Die Anwendung wird auf Heroku gehostet. Das Verzeichnis /client/dist, enthält den produktionsbereiten clientseitigen Code.
- Klone dieses Repository auf Ihren lokalen Rechner
- Führe
npm installinnerhalb von /studium aus - Erstelle eine .env-Datei und setze die folgenden Variablen:
MONGODB_CONNECTION_URI= Der Connection String deines MongoDB Clusters (https://cloud.mongodb.com/v2/)RIOT_API_KEY= Generiere einen Key hier: https://developer.riotgames.com/SESSION_SECRET(Optional, für Login/Registrierung) = Zufälliges PasswortGOOGLE_CLIENT_IDundGOOGLE_CLIENT_SECRET(Optional, für Google OAuth2) = Erstelle deinen Zugang hier: https://console.cloud.google.com/apis/credentials > CREATE CREDENTIALS > OAuth client ID
- Wechsel zu /client und installier ebenfalls mit
npm install - Erstelle den Build des Frontends mit
npm run build - Starte den Server mit
npm run serverstart, innerhalb des root-Ordners - Besuche die Website im Browser unter http://localhost:3000/
https://praxisprojekt-cf89137f47c5.herokuapp.com/
Paul Hermann
[email protected]