Full-stack web app for managing a neighborhood chess club.
Built with React, Node/Express and PostgreSQL.
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.
Demo at: https://ajedrez-torre-blanca.herokuapp.com/
Features:
- Basic CRUD ops for chess players, matches and event announcements
- Interactive chess board to visualize and step through chess matches
- Registration/login via JSON web tokens, with password encryption
- Admin-only dashboard, logging and event announcement board
- Protected routes, React Router navigation, Jest-based testing
- Install Node and clone repo
- Get server dependencies:
npm install
- Get client dependencies:
cd client && npm install
- Create PostgreSQL db using the
.sql
files provided indemo/sql
- Create an
.env
withJWT_KEY=whatever
andDEV_CONNSTRING=...
(*) - Test:
npm run test
(optional) - Run server and client:
npm run dev
(*) Example connection string:
"postgresql://john:abc123@localhost:5432/chess_db"
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 clubAcerca 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 matchesIngresar 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 appVer usuarios
(View users), which lists all users, their contact info and admin statusPublicar 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.
The subsection 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 degreesAl inicio
(Start) andAl final
(End), to jump to the beginning or endRetroceder
(Back) andAvanzar
(Forward), to move back or forward one moveAutomático
(Automatic), to start/stop an autoplay of the matchDescargar
(Download), to download the match in a PGN-friendly.txt
file
The subsection 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.
The subsection Anuncios del club
lists the most recent announcements by the club's staff.
A logged-in player can view their own profile.
The subsection 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.
The subsection Ver registros
shows logs for all app activity: logins, logouts, entry of match data, announcements sent, etc.
The subsection Ver usuarios
lists all users as well as their contact information and admin status.
The subsection Publicar anuncio
offers a form for sending out an announcement to all members, to be shown on the Anuncios
tab.
© 2019 Iván Ovejero
Distributed under the MIT License. See LICENSE.md