Jet Fighters Online is a web platform where you can play a real-time multiplayer game based on the “Jet Fighter” 1975 Atari game featuring 2d aircraft combat.
Frontend
- Language: JavaScript
- Base library: React (Create React App)
- Styling: with SCSS modules
- Routing: with React Router
- Props validation: with prop-types
- Http requests: with axios
- Charts: with chart.js
- Code style: ESLint and Prettier, lint rules borrowed from wesbos
Backend
- Server base: Node.js + express
- Database: Cloud MongoDB Atlas + mongoose
- Authorization and authentication: built from scratch using jsonwebtoken and refresh tokens
- Emails: with nodemailer (disabled during tests)
- Validation: with Joi
- Environment variables: with dotenv and cross-env
- Testing: with jest and supertest
- Error handling: centralized to a final middleware
- Cross-Origin Resource-Sharing: enabled by cors
- Code style: ESLint and Prettier, lint rules borrowed from wesbos
Authentication and authorization are built on jwts (json web tokens), refresh tokens and admin/user roles.
Upon successful login the server sends one http only cookie which is used by the browser to get the jwt (json web token) from the /refresh-token route.
The received jwt expires in 15 minutes which means that the frontend will request a new jwt every 14 minutes or every time the user visits the website. The http only cookie expires in a week, but every time a new jwt is received, a new refresh token is received as well. This means that the user will be logged off only if he hasn't opened the app for a whole week.
The refresh token is revoked when a user logs off or if an admin manually revokes it.
Authorization is done by sending the jwt token inside the "Authorization" request header. The backend verifies the digital signature and if it is ok, and the role permits it, then the requested data is sent to the frontend.
On the backend, the bulk of authorization logic is done by the /middleware/authorize.js middleware, which can be attached to any route.
- How to style React applications with SCSS modules.
- How to implement websockets within React.
- How to implement websockets within Express.
- How to work with canvas within React.
- How to make charts using chart.js.
- How to implement an authorization/authentication system based on json web tokens + refresh tokens.
- How to sned emails from the backend.
- How to self-host google fonts.
-
Feature: search users by name and view their profile. -
Feature: notification system. -
Feature: mini website guide. - Refactor: migrate project to typescript
- Chore: CI + precommit hooks.
- Chore: e2e tests.
- Feature: friendship system (make and challenge friends).
- Feature: unique jet powers (ex: multi shot, speed boost, invisiblity, short time immunity).
- Feature: solo play with an AI.