1 of 20

Rivals Tracker

Team Members: Benjamin Nguyen, Kenneth Chau, Alexander Leang

May 13, 2025

Github Repo

1

2 of 20

Presenters

Kenneth Chau

UI/UX, Hooks, CORS, API, Database, User/Auth

Alexander Leang

UI/UX, Database, API

Benjamin Nguyen

User/Auth OOP, Database, API

2

2

3 of 20

Agenda

  • Our goal
  • Timeline
  • Tech Stack
  • Features Implemented
  • OOP Implementation
  • Demo

Cal Poly Pomona | Agenda

3

3

4 of 20

Our Goal

Create a full stack website that would allow users who play Marvel Rivals to check player statistics through a simple search of a username or UID while leveraging OOP principles, supporting user authentication, API data retrieval, data processing, and interactive visual representation of player statistics.

4

4

5 of 20

Timeline

February

  • Setup React boilerplate with Vite
  • Collaborate on how we’ll split the work
  • What idea we wanted, what features

March

April

May

  • Install all necessary dependencies
  • Connect backend and create database to hold users
  • Making sure all UI libraries are installed correctly
  • Work on homepage, and accessory pages as well as login/signup
  • Make API proxies/hooks from backend to frontend
  • CSS styling w/ Tailwind and ChakraUI
  • Adding user authentication, making sure login and signup work properly with database
  • Finish styling other pages and making it fully functional

Cal Poly Pomona | Timeline

5

5

6 of 20

Our Tech Stack

Client

React, Vite

Frontend

ChakraUI

Backend

Java, Maven, Spring Boot, PostgreSQL

API

Marvel Rivals API (https://marvelrivalsapi.com/)

6

6

7 of 20

Features Implemented

  1. Player Statistics
    1. Search for players by username
    2. View game statistics, level, avatar
    3. Track match history for specific players
  2. Game Information
    • Heroes catalog with roles & difficulty
    • Maps gallery with location details, game modes, and preview links
    • Patch notes archive
  3. User Account System
    • User registration with user:pass
    • Secure login with JWT Auth and token expiration
    • Password encryption w/ BCrypt
  4. Profile Management
    • Link Marvel Rivals username to account
    • Update account information
    • Display Marvel Rivals avatar when linked
    • Account deletion
  5. UI/UX
    • Responsive design
    • Minimalist, dark theme interface
    • Animated UI components
    • Loading states & error handling

7

7

8 of 20

OOP Fundamentals Unveiled: Structuring Code

  • How you used the following concepts?
    • Inheritance
    • Polymorphism
    • Abstraction
    • Encapsulation

99%

If you play as a team, you tend to win more

Source: I’m Top 500

of the time,

8

8

9 of 20

Inheritance

Our JwtFilter extends OncePerRequestFilter (parent) to override doFilterInternal method

9

9

10 of 20

Polymorphism

By providing a specific implementation of doFilterInternal, we showcase polymorphism

10

10

11 of 20

Abstraction

Our JwtUtils showcases abstraction through keeping our JWT token creation and validation logic separate thus hiding it

11

11

12 of 20

Encapsulation

We have a UserService file to hide implementation details and provide a clean interface for user ops to showcase encapsulation

12

12

13 of 20

SOLID

Our UserController has specific endpoints for different operations to ensure a single responsibility for each class

13

13

14 of 20

Screenshots of the Prototype

14

14

15 of 20

Screenshots of the Prototype

15

15

16 of 20

Screenshots of the Prototype

16

16

17 of 20

Live Demo

Cal Poly Pomona | Presentation Title

17

17

18 of 20

The End

Cal Poly Pomona | Presentation Title

18

18

19 of 20

Additional Graphics – Cropped Corners

19

19

20 of 20

Additional Graphics

20

20