The NSC Web App is a dashboard for athlete and coach management, built for administrators of the National Sports Council of Sri Lanka and various Sri Lankan sporting associations. The web app is built in React and uses a backend API built with Express.js, which connects to the MongoDB database.
Built by @anudaweerasinghe, @sparrownor1, @addykan, and @raaidrt.
To run a local version of the app in your own browser, run npm start in terminal. Unfortunately, authentication is required to access the app.
The app is separated into multiple modules, separated by folders in /src/components. The main pages are the dashboard home page, activities, payments, and profiles.
This page is visible to NSC admins only, who can click through to each association to view the association's dashboard. Sports and associations are independently tracked to allow for multiple associations under one sport.
On the association home page, both NSC admins and association admins can get an overview of recent payment requests as well as profiles.
The Profiles module allows admins to view information about athletes and coaches, across all associations. This information is accessible by the general public through the API endpoint.
The profile details page allows admins to view publicly available information such as names, locations, and associated profiles (such as a coach). They can also view information about the user's recent activities, rankings, and payments.
Admins are also able to make changes to rankings and profile information directly from this page:
The payments module allows admins to track, create, edit, and approve payments to athletes and coaches. Only NSC Admins are permitted to create new payments.
The details page shows more information about the specific payment, allowing NSC admins and association admins to add comments and track paycheck information. Alongside payment details, admins can also see activity history for the user.
The rankings module supports multiple ranking types, and admins can easily add new players to the ranking list.
The activity details page is accessible from any activity card across the entire app, and shows information about a specific activity. Athletes, coaches, and all admins can add comments and media to the activity, which can be approved by coaches and associations.
Below is an example of a fully approved activity:
