logo

Riot API Badge Next.js Badge Express.js Badge Vercel Badge Jest Badge React.js Badge Node.js Badge MySQL Badge GitHub Actions Workflow Status

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

homepage

dashboard

Screenshots Mobile

mobileHome mobileDashboard