This is a sample application that demonstrates how to create a custom leaderboard with your Classy data. It should be used purely as instructional material rather than a production-ready application. A great support article further outlines and walks through what this application achieves.
Please refer to Classy's developer documentation for more information about how to work with our product.
This application shell makes use of a Node backend layer to handle requests between the application and Classy's API as well as a React frontend to create a Client for the data retrieved from the customer's Classy account.
You can find the backend layer in the
/server folder and the frontend part of the application in
the /client folder.
The Server folder leverages the Express framework as well as Nodemon to simplify development.
The Client folder contains the React SPA to display the data retrieved from Classy's API by the backend.
- Ensure you have NVM installed.
- Ensure you have yarn installed.
- Copy the environment variables from
.template.envto a new.envfile in the root of the server directory, adding in the values that correlate with your organization, campaign, and authentication credentials. - Run the following commands from the root of this app to set up the project:
$ nvm use
$ yarn install:all
$ yarn start:local
nvm use will assure that you are using the latest stable version of Node.
yarn install:all will install all of the dependencies the root application and subdirectories need to run.
yarn start:local will run both the server and client applications in parallel.
NOTE:
React's strict mode can cause double renders and, thus, duplicate requests to the backend. For local development, you may want to remove the React.StrictMode wrapper around the React app in index.tsx.
If you encounter issues with yarn following the nvm use command, you may need to reinstall yarn for the new node version:
$ npm install -g yarn