Home Page | Playing a Game | An other user's profile |
---|---|---|
![]() |
![]() |
![]() |
Notification | Viewing user's own profile |
---|---|
![]() |
![]() |
Reporting a player | Admin panel |
---|---|
![]() |
![]() |
Signin | Login | Register |
---|---|---|
![]() |
![]() |
![]() |
- Authentication (Google Authentication as well)
- Profile pages
- Sending messages to other users
- PvP
- Chat during PvP
- Playing with a bot
- Different match lengths
- Match Replay
- Reporting users, games, private messages.
- Admin panel; Banning users, inspecting reported games and private messages
- Front end
- React
- create-react-app (the app will be a SPA)
- react-router-dom@6 (for routing)
- chess.js (chess engine)
- react-chessboard (chess UI for react)
- async-mutex
- Nodejs
- express
- express-http-proxy
- React
- Backend
- Nodejs
- express (routing, serving, etc.)
- express-session (authentication)
- mongoose (to access MongoDB and use of object model)
- connect-mongo (storage for express-session)
- dotenv (environment variables)
- bcryptjs (to hash passwords)
- ws (WebSocket library)
- chess.js (chess engine)
- Nodejs
- Database
- MongoDB
Database scheme;
users
{
_id: ObjectId,
email: String,
username: String,
password: String,
bio: String,
bans:{Object {playing: {Number}, chat: {Number}, message: {Number}}},
type:{String} (normal or admin)
}
matches
{
_id: ObjectId,
date: Number,
length: String,
white: ObjectId, (user id)
black: ObjectId, (user id)
moves: [{color: String, from: String, to: String , flags: String, piece: String, san: String, timestamp: Double}, ...],
endedBy: String,
winner: String (w or b)
}
reports
{
_id: ObjectId,
type: String, (bio, chat or game),
content: String,
sourceUsername: String,
targetUsername: String,
targetId: String (reported user's id)
}
privateMessages
{
_id: ObjectId,
sender: String,
reciever: String,
content: String,
date: Number,
isRead: Boolean
}
sessions
{
_id: String,
expires: Date,
session: {
cookie: {...},
userID: String
}
}
Considering required technologies (Node.js (npm) and MongoDB) are installed and running,
Running npm install
in app/backend
and in app/front_end
installs the libraries.
.env files must be created in app/backend/
and in app/front_end/
;
app/backend/
API_PORT=4001 # backend api port
FRONT_END_ADDRESS="http://localhost:3000" # the full address of frontend
MONGO_URI="mongodb://localhost:27017/bomchess" # the connection string of mongodb
SECRET="SUPERSECRETCRAZYAMAZINGPERPENDICULAR" # secret for the session
app/front_end/
PORT=3000 # frontend port
BUILD_PATH=../_build/public # DON'T CHANGE THIS
REACT_APP_BACKEND_ADDRESS="localhost:4001" # backend api's address
REACT_APP_SECURE="false" # if app uses secure connection (https) "true" or "false"
Setting up a google cloud project for google auth;
- Create a project in
Google Cloud Developer Console
- Go to API's & Services -> Credentials and create a
OAuth client ID
credential- It will ask you to configure your consent screen first. When doing so, include the
email
scope. Also, we don't require a test user since we don't access any sensitive/restricted info. - When creating the credential, add
http://localhost:3000
toAuthorized JavaScript Origins
andhttp://localhost:4001/api/login-via-google
toAuthorized redirect URIs
sections. (note that the ports must be your front-end port and backend port relatively)
- It will ask you to configure your consent screen first. When doing so, include the
- After creation, download your credential's JSON file, rename it as
google_login.json
and copy the file into/app/backend
Finally, running npm start
in the app/front_end
,
and node index.js
in the app/backend
sets up the app for development.
Admin panel is accessible at /admin
. Only an user with admin
type can access there. For that, an user's type must be manually changed in database from normal
to admin
Considering google cloud project is setup and required technologies and libraries are installed and running as described in Regarding Development
section,
The google project's OAuth Client ID credential that was created in development section must be changed;
- Remove localhost and add your real host to
Authorized JavaScript Origins
section. (ex: https://mySubDomain.myDomain.com) - Remove localhost and add your real host to
Authorized redirect URIs
section. (ex: https://mySubDomain.myDomain.com/api/login-via-google) - Download the credential's JSON file, rename it to
google_login.json
and update the one in/app/backend
Running npm run build
in app/front_end
creates the static files in the app/_build/public
folder.
.env
file must be created inapp/_build/
;
FRONT_END_PORT=3000 # This must be the same with development's frontend port.
In the app/_build
folder, run npm install
to install the libraries and then node index.js
to serve the files.
Running node index.js
in app/backend
sets up the backend.
Resources used for implementing google auth (OAtuh 2.0);
https://cloud.google.com/nodejs/docs/reference/google-auth-library/latest#oauth2