/StatsTrack

Web application for climbing competitions. Read the description below to learn more.

Primary LanguageJavaScript

StatsTrack

sounds like star trek

Technologies

For back-end I used:

  • Express.js(4.16.3), which is a web application framework for Node.js(v8.9.4)
  • socket.io(2.1.0) which is a javascript library for real-time web applications(uses the WebSocket protocol), in use by a board(chat) for live information exchange.
  • cookie-parser parses Cookie header and populate req.cookies with an object keyed by the cookie names. I'm using it to identify participants(ask for their name and save it in Cookie), so if they are using a live board, their name(nickname) would be visible to everyone else.
  • body-parser - parses incoming request bodies in a middleware before your handlers

For front-end I used:

  • Javascript(ES6) as the main language
  • JQuery in some cases to make the code more readable and easier to follow
  • AJAX is used to update the ranking table(planing to change it and make future table updates with socket.io).

Summary

  • HTML/CSS and JS(ES6), JQuery, AJAX on the fron-end.
  • Node.js, Express.js and sockets.io(WebSocket) on the back-end, along with additional middlewares: cookie-parser and body-parser.
  • Simple JSON files are used to simulate DB role.

Basic logic explanation

  1. Main Page
    1. [Future feature]Find your competition using CompetitionID
  2. Your competition's results live
    1. Show the result table(ranking) of the competition #${competitionID} with participants sorted
      according to the gained points
    2. Button to add a new participant to the competition(and ranking table)
    3. Also there you can find which clibming routes(walls) have been finished
  3. Live board (chat) for competition announcements and inside comunication between everybody
  4. Panel for organizators to manage competition
    1. Choose the number(type?) of the climbing wall from a drop-down menu, each wall has its points.(If some participant has finished it, he gains points according to the wall's points.)
    2. button to add participant's result
      1. Full name
      2. Result
    3. button to disqualify a participant

Start

To start my project, simply clone it somewhere, open StatsTrack folder, install it "npm install" and run with "npm start" command.
Final project for WebDev Academy at Motorola Solutions
for any info feel free to email me:
kolodiy1103@gmail.com