Frontend Documentation

The frontend is built with NVM 18.20.8.

Pages & Overlays:

We generate angular components for all pages and overlays on the site. The pages directory contains all of the different pages that can be navigated to by the user. The components outside of the pages directory are overlays, or components present on multiple pages through out the site for easy integration. So if you want to display something across every page create the component outside of the pages directory. Page Images: All images on the site are stored in assets/images. Please add new images to this directory.

Cookies:

Cookies are used to store user information to keep them logged in for a period of time. That way a user can leave or refresh the page and continue to be signed in. We store users information using a JWT web token that is sent to the server and verified. Any information that needs to be stored about the user across pages should be added to the cookie. Cookies are checked and verified in the header component which is embedded into every page on the site within initialization of the page. Information in the cookie is also used to prevent users from accessing pages they should not. This logic is within the header component as well.

ChessBoard:

Code for the chess board is located in the chessClient directory. In order for this to run properly you must move all of the files in chessClient into your apache directory. On Ubuntu it should be /var/www/html. Then index.html should be hosted on localhost. The chess board and chess logic on the site is a separate entity from the angular components. We use two javascript libraries to generate the board, pieces, and move logic. Chessboardjs (https://chessboardjs.com/) is where the board, and pieces are generated. Changing the styling of the board will require modifying chessboardjs. Move validation is achieved using chessjs (https://github.com/jhlywa/chess.js/). If you want to modify logic, or add rules then this library contains a multitude of functions to do so. All of the logic is located within index.html within the script section.

_Modal: This is a imported component that overlays the page when a mentor or a student are looking for a game.