Full-stack web app for managing a neighborhood chess club.
Full-stack web app for helping a chess club manage players, record championship matches and announce club events, with an interactive chess board to view and download matches, user registration/login, and an administrator dashboard.
cd client && npm install
.sqlfiles provided in
npm run test(optional)
npm run dev
(*) Example connection string:
The app header offers registration/login buttons and three tabs for access to three main sections:
Inicio (Home), with two subsections:
Acerca del club(About the club), containing a general description of the neighborhood chess club
Acerca de esta herramienta(About this tool), containing a general description of the app
Partidas (Matches), with two subsections:
Ver partida(View match), which lists recorded matches
Ingresar partida(Enter match), which offers a form for entering a club match
Anuncios (Announcements), with a single subsection:
Anuncios del club(Club announcements), with announcements by the club’s staff
If the user is logged in and is a player, a fourth tab becomes available:
Jugador (Player), with one subsection:
Perfil del jugador(Player profile), containing a simple profile of the player
If the user is logged in and is an admin, a final fifth tab becomes available:
Administrador (Administrator), with three subsctions:
Ver registros(View logs), which shows all activity on the app
Ver usuarios(View users), which lists all users, their contact info and admin status
Publicar anuncio(Publish announcement), which offers a form for entering an announcement.
To register, press
Registrarse (Register) on the header and enter a username, e-mail and password. Passwords are encrypted with bcrypt.
To log in, press
Ingresar (Log in) on the header and enter a valid username and password. A successful login returns a response header with a JWT signed using an environment variable and placed in local storage. The username is displayed on the header, with a circle if a player and a shield if an admin.
To log out, press
Salir (Log out) on the header. The signed JWT is removed from local storage.
Note: This demo has no password recovery mechanism.
Ver partida shows a list of recorded matches. An
Editar (Edit) button appears next to a match if the user is logged in and was one of the players in the match. All matches can be edited if the user is an admin.
Selecting a match leads to the interactive chess board, which displays match metadata at the top, each move on the right-hand column, and seven buttons at the bottom:
Rotar(Rotate), to turn the chess board 180 degrees
Al inicio(Start) and
Al final(End), to jump to the beginning or end
Avanzar(Forward), to move back or forward one move
Automático(Automatic), to start/stop an autoplay of the match
Descargar(Download), to download the match in a PGN-friendly
Ver partida offers a form for entering a match between club players as match metadata—date, event, white, black, and result—and up to fifty match moves in algebraic notation.
Anuncios del club lists the most recent announcements by the club’s staff.
A logged-in player can view their own profile.
Perfil del jugador shows a simple player profile with total matches, wins, losses, and draws, including the player’s contact info and a listing of their matches.
A logged-in admin can access the admin dashboard.
Ver registros shows logs for all app activity: logins, logouts, entry of match data, announcements sent, etc.
Ver usuarios lists all users as well as their contact information and admin status.
Publicar anuncio offers a form for sending out an announcement to all members, to be shown on the
© 2019 Iván Ovejero
Distributed under the MIT License. See LICENSE.md