live deploy: https://lol-scrims-finder.netlify.app/
LoL Scrims Finder is a webapp made to help users host and manage custom lobbies for the video game League of Legends as easily as possible without the need of
messy spreadsheets. It is designed to be as plug and play as possible.
If you have an admin key, you can host a scrim/lobby. Then players just have to click on the spot/role and team they want to play in, they can change roles/teams and leave the game. Once the countdown reaches 0 for the lobby, a password and name will appear and the lobby captain has to make it. Then enjoy the game!, at the end of the game the loobby captain has to say who won (he will have the choice in the lobby page / section).
- Be able to create and delete lobbies. ✔️
- Countdown Timer with lobby name and password. ✔️
- Complete join, leave and swap functionality for players ✔️
- Sessions with transactions in the back-end (solve the classic "move-ticket buy at same time") issue for same players clicking on spots at same time. ✔️
- Authentication (Maybe, trying to keep it plug and play...) ✔️
- Profile pages, notifications, friends ✔️
- Use the Riot Live Client API for summoner data.
- Discord validation
- Be able to host tournaments with classic tourney-style functionality and interface.
- first app live deploy
- tons of bug fixes that I can't even type in.
- admins can now choose a custom lobby title when creating a scrim
- Admins can now kick players from lobbies.
- all api routes require an x-api-key (safer app).
- lobby names generated for scrims are now the amount of scrims created that day and in that region plus the one created. (previous word api brought weird names sometimes)
- admins can now edit scrims.
- lobby hosts/captains and admins can now upload a post game image to verify winner.
- accounts are now authenticated using google and stored in database.
- users can edit their account information as long as it isn't taken
- Database is now fully relational (teams and casters of scrim reference the user, etc).
- Added JWT & bcrypt ontop of google authentication with firebase.
- Created a navbar drawer/burger-menu
- Moved the date select filter and region filter for scrims into the drawer
- Moved the show/hide current, previous, upcoming scrims toggles into the drawer.
- Added back-end unit tests with Travis CI Pipeline
- Added user profile page, users can now visit their own or other users profiles.
- Added the option to make scrim private on creation or edit.
- Added the option to send each other friend requests
- added the option to search all the users.
- added notifications on friend request created
- Added live chat functionality using socket.io:
- private chat between friends
- public scrim chat for each scrim
- replaced scrim data fetching interval with socket.io.
- Added live socket new message notifications.
- Admins can now swap between 2 players / 1 player and 1 empty spot using drag and drop
- userAgent data now gets saved in the DB when logging in, that is for security purposes.
- socket is now hosted with the server, instead of a different hierarchy
- conversations on the messenger dropdown are now sorted by unseen messages, then by online status
- rewrite some queries
- change scrollbar in user profile page
- user profile page created scrims and participated scrims are now collapsible glass accordions.
- refactored the backend controllers.
- added riot api support, game lobby now automatically creates tournament code that can be copy and pasted, no more manual lobby creation needed.
- added bug fixes and optimizations.
- added new notifcation sent when scrim started for participating user
- notifications now send on the computer if accepted, not just in-app.
- user stats now get calculated from back-end instead in profile page
- user exp in user profile is now a progress bar instead of a static number
- user profile page now uses charts.
- added an admin dashboard with charts, stats and recent activities
- UI redesign/update with new color scheme and glassmorphic UI, rebranded to reluminate.gg
- added summoner tag line
- fixed bug of user profile not showing avatar image after riot switched to tagliens
- added the option for admins to toggle between generating a tournament code or using a manual custom lobby during scrim creation/editing
- added emerald as a possible rank.
- updated scrim edit/create page to be more user friendly.
- updated the sidebar with collapsible sections and user image
- refactored front-end code to use the features folder style and import aliases
- user can now unsend friend request
- fixed an exploit where sender user could accept receiver users' friend request when using a proxy.
- socket message emissions are now being sent from the backend instead of front-end
- scrim chat bubble now displays unread messages count for that scrim conversation if not refreshed
Back-end is made using Express & Node.js, with Mongoose to connect to the MongoDB database.
Create a .env file in the root directory with the following variables:
# Database
PROD_MONGODB=mongodb_connection_string
# Authentication & Security
SECRET_OR_KEY=jwt_secret_key
JWT_EXPIRATION=7d
X_API_KEY=api_key_for_internal_auth
ADMIN_KEY=admin_key_for_admin_routes
# Riot Games API
RIOT_API_KEY=your_riot_api_key
RIOT_TOURNAMENT_STUB=false # Set to true for testing with stub API
# AWS S3 / DigitalOcean Spaces (for image uploads)
S3_ACCESS_KEY_ID=your_access_key
S3_SECRET_ACCESS_KEY=your_secret_key
S3_BUCKET_NAME=your_bucket_name
S3_ENDPOINT=endpoint_url # e.g., nyc3.digitaloceanspaces.com for DO Spaces
AWS_REGION=us-east-1 # Optional, defaults to us-east-1
# API Configuration
API_URL=https://your-api-url.com
NODE_ENV=production # or development
# Optional - IP Data for geolocation
IPDATA_API_KEY=your_ipdata_api_key # Optional, for IP geolocationThere are 2 models currently, the User and the Scrim models.
A Scrim is basically a game lobby that contains 2 teams, and casters, and more. Most of these objects nested inside the scrim reference the User model.
The User is authenticated using both Google (for email) and JWT (to save decoded user into local storage and to ping node-api for verification).
Front-end is made using the React library and was bootstrapped using Create-React-App. It uses @material-ui/core as the UI framework, please check the documentation for Material-UI here: https://material-ui.com/ if not familiar with it.
The folder hiearchy for the react-app looks something like this:
src
|__ assets/
|__ images
|__ ranks
|__ diamond.png
|__ bronze.png
|__ roles
|__ top.png
|__ bottom.png
|__ store
|__ store.dev.js
|__ store.prod.js
|__ index.js
|__ reducers
|__ auth.reducer.js
|__ scrims.reducer.js
|__ components
|__ CountdownTimer.jsx
|__ IntroForms.jsx
|__ ScrimTeamList.jsx
|__ UploadPostGameImage.jsx
|__ shared
|__ Navbar.jsx
|__ NavbarDrawer.jsx
|__ Loading.jsx
|__ Footer.jsx
|__ Tooltip.jsx
|__ services/
|__ apiConfig.js
|__ users.services.js
|__ auth.services.js
|__ scrims.services.js
|_ styles/
|__ scrimSection.styles.js
|_ screens/
|__ Intro.jsx
|__ Scrims.jsx
|__ ScrimDetail.jsx
|__ ScrimCreate.jsx
|__ ScrimEdit.jsx
|__ Settings.jsx
|__ utils/
|__ keycodes.js
|__ copyToClipboard.js
There are some .env variables you need to set up before getting started:
REACT_APP_ADMIN_KEY
# Node API
REACT_APP_API_URL
REACT_APP_API_KEY
# S3
REACT_APP_S3_ACCESS_KEY_ID
REACT_APP_S3_SECRET_ACCESS_KEY
# Firebase
REACT_APP_FIREBASE_MEASUREMENT_ID
REACT_APP_FIREBASE_APP_ID
REACT_APP_FIREBASE_MESSAGING_SENDER_ID
REACT_APP_FIREBASE_STORAGE_BUCKET
REACT_APP_FIREBASE_PROJECT_ID
REACT_APP_FIREBASE_AUTH_DOMAIN
REACT_APP_FIREBASE_API_KEY
- to run back-end, type in cmd:
yarnto install latest-dependencies, then run the command:yarn dev. - to run front-end, cd into
clientdirectory and runyarnto install dependencies, then runyarn startto run the server. - to run socket, cd into
socketand runyarnto install dependencies, then run the command:yarn dev
- Please link your issue to your pull request when making one.
- Please the request to merge into develop instead of master.
- Do not merge without being approved.
- Please squash your commits before merging.