This project was created during the UpLeveled.io bootcamp in July 2023 to showcase the knowledge I gathered during the course. The README also serves as documentation for the project, providing an overview of the technologies I used and short descriptions of the core features implemented. The project involves the development of a web application using Next.js framework, Tailwind CSS, PostgreSQL as the database, the integration of a GraphQL API (which handles all selects, inserts, updates and deletes in the database) with Apollo and a third-party REST API from Riot Games for fetching League of Legends account data. The application allows users to sign up and login as either organisations or players, facilitating association requests between them. Additionally, players can showcase their League of Legends accounts displaying their respective strengths.
The idea of this project is to showcase a way of creating a comprehensive platform specifically designed for League of Legends players and esports organisations. This prototype wants to serve as a proof of concept for the Austrian Esports Federation, which is considering the development of such a platform. The primary goals of this platform are to elevate players and organisations within the Austrian esports scene and facilitate its growth.
To support the functionalities of the platform, the following database setup was created. For a complete overview, please follow the provided schema: Database Schema
Since part this project involves fetching data from an external REST API, I opted into using GraphQL for my project. GraphQL efficiently handles all the GET and POST requests within my application, establishing a seamless connection to a PostgreSQL database.
The frontend was created with Tailwind CSS, and DaisyUI, a plugin for Tailwind CSS. While not strictly adhering to Material Design, the UI tries incorporate certain principles inspired by it. This includes clean typography, the use of colors to convey hierarchy and interactivity, and the implementation of subtle animations and transitions to enhance user engagement.
The frontend of this project was created with a mobile-first approach, ensuring that the interface adapts seamlessly to different screen sizes and devices.
You need to add a RIOT_API_KEY in your local .env. You can get one from the RIOT Developer Portal. Caution: Development keys expire after 24 hours so you may apply for a personal key with a proper project description. It usually takes up to 2 weeks for RIOT to approve an application.
First, run install the dependencies:
npm install
# or
pnpm installTo start the application:
npm run dev
# or
pnpm devYou need to setup a Postgres database, once it is setup, please run:
npm migrate up
# or
pnpm migrate upTo revert, run:
npm migrate down
# or
pnpm migrate downOpen http://localhost:3000 with your browser to see the result.
The application provides user registration functionality, allowing individuals to sign up as either organizations or players. During the signup process, users must provide relevant information such as username, email address, and password. User authentication and authorization via session cookie combined with a database entry have been implemented to increase security while accessing the application.
Organizations can send association requests to players for potential collaboration or partnership. This feature allows organizations to connect with players based on shared interests, team requirements, or any other criteria. Association requests include relevant details, and notifications are sent to the targeted players.
Players have the ability to review and respond to incoming association requests. They can accept or deny the requests based on their preferences. Accepted associations result in a formal connection between the player and organization, enabling further collaboration within the application.
Players can link their League of Legends accounts to their profiles within the application. The integration with the Riot Games REST API allows the application to retrieve account data, such as player statistics, ranking information, and match history. This information is used to showcase the player's strengths and achievements within the League of Legends community. The data is stored inside the database to decrease of times, the RIOT API has to be called, since RIOT rate limits all of their API keys. Additionally a rate limiter has been implemented in the application as well, to further decrease the risk of an invalidation of the API key by RIOT.