A stats viewing fullstack web application using the Riot API

Requirements

• Node.js
• Next.js
• Express.js
• MySQL database server on Aiven
• Riot.txt file for authentication
• Riot API key
• Separate deployments for backend server and frontend (e.g. Vercel)

Environment Variables (Frontend)

NEXT_PUBLIC_SERVER_URL= Your server URL used when sending requests for data (e.g. https://summonerscardserver.com)
NEXT_PUBLIC_BASE_URL= Your URL used when using this build (e.g. https://summonerscard.com)
SQL_PASSWORD= MySQL database server password
DB_ENDPOINT= Database endpoint for Aiven MySQL database

Ensure these variables are within a .env file inside the root directory

Environment Variables (Server)

API_KEY= Riot API key
ALLOWED_ORIGIN= The URL used to host the frontend (e.g. https://summonerscard.com)

Ensure these variables are within a .env file inside the root directory

Installing

> git clone https://github.com/jack-pap/Summoners-Card.git
> npm install 

Running locally

> cd frontend
> npm run dev

> cd server
> npm start

Documentation

Documentation for all methods can be found here

Features

• Stylish modern front-end design
• Vercel deployment
• Express.js backend server that sends and receives API requests
• MySQL database hosted on Aiven
• Extensive testing (unit, component tests) using Jest
• Thorough documentation using JSDoc

Screenshots Desktop

Screenshots Mobile