niyasrad / xylium

With Xylium, users can generate a dashboard with insights about their gaming activity on Steam, and customize and download XYCARD, a sharable card showcasing their recent gaming activity. Built upon React, MongoDB, Express and uses Steam-Web-Api

Tech Stack:

GitHub Stats:

TypeScript   5 mins          ████████████████████████▒   97.82 %
HTML         0 secs          ▒░░░░░░░░░░░░░░░░░░░░░░░░   01.70 %
CSS          0 secs          ░░░░░░░░░░░░░░░░░░░░░░░░░   00.48 %

---

xylium's Issues

[Implementation] Reinforcement of `/settings` Route

Description

• The current usage of /settings route does not ensure the checks of authentication, which needs to be implemented.

Insight

• Have a check for authentication for /settings route, and make sure that it works as intended.

[Implementation] White Space During Scrolling in Mobile Devices

Description
In Mobile viewports, the scrolling enables a white spacing in the bottom, which is very weird looking.

Insight

• This is due to the default viewport sizing in mobile-screens. But then, the fix is to make a fixed background component, and an absolute container over which the other components such as the navbar, home screen all that comes on the top.
• But, to fix this, we'll use a background-color: 'black' to ensure it doesn't show up as bad, since we're also using a black gradient for the website layout.

[Implementation] Login, Signup - Request Handling

Description

• Currently, there's no exact specification of the server loading/ the request being processed in the front-end.
• This causes unlimited waiting times, while the user does not know if the request has been sent for the login/sign up

Insight

• Modifying the button, making it's opacity fade while loading the request.
• Having a snackbar interpret the errors from the server can be helpful and can be implemented for further elements.

[Implementation] Error response when registering with existing user says email instead of username

Description

• When trying to create a new account, if you use a username or SteamID that already exists, it prompts you that the "email" might already be registered. The username no longer needs to be an email so this causes confusion.

Insight

• change text to say username
  Screenshots
  

[Implementation] SteamID validation during account creation missing

Description

• When you create an account, there is no validation to ensure that the SteamID exists, this leads to creation of accounts that don't work. The lack of options to change SteamID makes it so there's no way to fix this by the user in case the account gets created

[Implementation] Popover's `keydown` Enhancement

Description
Currently, the popover is not responsive, and does not give the user focus to enter their details immediately.

Insight

• Upon render, the input element can be focused with.
• There can be handlers which check for keydown and assess if the user pressed Esc or Enter keys to navigate/utilise the popover.

[Implementation] Address Bar Theming for Mobile Devices

Description
Currently, the mobile address bar is colored default, (white)making it go out of sync with the website's dark theme.

Insight
Introduction a meta tag, essentially adding a theme-color. Much is explained clearly in Changing The Header Color

Screenshots

[Implementation] Backend endpoints `/forgotpassword` and `/resetpassword`

Description

• Backend endpoints to enable forget password, i.e. /forgotpassword and /resetpassword and to be implemented.

Insight

• /forgotpassword POST request can accept the e-mail from the body, generate a signed token and lay it out in a link to the user via mail.
• Upon activation of the link, the token is transferred to the front-end with another page (to be implemented further), and from where the user can make a /resetpassword POST request.
• The /resetpassword ensures the signed token, decodes it and changes the password with the body.

[Implementation] Friends Section in `/home` doesn't validate the number of friends returned.

Description
The current Friends section in home, if there's no friends doesn't handle it.

Insight
Make the appropriate Nothing to see here message prompt to the user.

• The files can share a common layout/function for these.
• The previous handles of Nothing found can be used by a function as well.

[Implementation] Custom Snackbar for Xylium

Description

Custom Snackbar has to be wireframed, and implemented with various types of alerts.

Insight

• The snackbar is essentially to be a part of the entire app's wrapper.
• It shall display three functionalities -> error, info, success
• It must have a timeout, and it must disappear after a hook call.

[Implementation] Download option for Xy Card creates image with white borders on left and bottom

Description

• When downloading the image from the Xy Card Menu, the image has a thin white border on the left and bottom edges.

Insight
Investigate the code that handles generating that image and fix the alignment.

Screenshots

[Implementation] Popover Attachment - `/settings` Page

Description

• According to the given FIGMA design, the popover is supposed to be used in the settings page, to trigger requests, and do a lot of other things.

Insight

• The popover designed is to be implemented with BEM formatting, and with framer-motion.
• The popover uses an input with label on the top, two buttons, particularly OptButton.
• The popover can accept props, such as onCancel and onCallback, which triggers effectively according to the use-case.

Screenshots

[Implementation] Current mobile navigation bar in the homepage does not redirect to the neccessary.

Description
The GitHub, Support options in the home-screen do not work as intended.

Insight
Adding the Link components to be associated/ including a navigation function.

Errors take place whenever there are no recently played games available

Description

In some of the test logins, for the routes in /recent, it returns a consequent 400 error, because of no games found in the recents.

Issue/Screenshot

Insight

Having a steamID with no games in the recently played, the steam API returns no games array. This complicates things as the back-end tries to search for possible games returned, if not it returns 400.

Files

backend/src/routes/steam.routes.js

Tasks

• Remove Validation for response.games
• An empty games array is supposed to be sent back to the front-end

[Implementation] Percentile Miscalculation

Description
The current percentile values generated over the settings page, isn't accurate.

Insight
The account with the least value, seemed to be in 33.3% , while it must be 0%

Screenshots

[Implementation] Navigation Bar does not redirect in mobile screens.

Description
In mobile screens, the navigation bar does not redirect to XYCARD.

Insight
Changing the division to a Link will fix the issue.

[Implementation] Frontend implementation for `/forgotpassword` and `/resetpassword` routes

Description

The backend endpoints need to be validated, and used with the front-end's /forgotpassword and /resetpassword routes.

Insight

• The respective routes are to be designed according to the signup, login pages.
• The routes are to be implemented with functionality according to either of the endpoints.
• This must ensure the triggering of snackbars for notifying the user of the progress with such activities.

[Implementation] Entire Friends List, Owned Games List Pagintation

Description

• Currently, the friends section/games section, show only 3 or 6 at max of entries.
• The entire list, must be made to show all of the entries.

Insight

• The way the list should work is, there must be an initial fetch for all the data of the friends/games, using one fetch.
• The display of the list cards (which require APIs) cannot be overloaded. Hence, 25 at once must be loaded.
• To load more of them, there must be either pagination/ a load more button.

[Implementation] Sign-up Implementation With Routes

Description

• Sign-up must be modified to give out two-steps.
• First one being username, email entering and validation.
• Second one being password and SteamID validation.
• There must be a back button to navigate through the step.

[Implementation] Add Placeholder Image for XYCARD, Friends Section

Description

The current implementation of the images, allows Steam's blank images for output in Friends, XYCARD Section.

Insight

• Export variables to monitor the image URLs, and substitute them with the placeholder.
• To add to this, the current steam blank URLs are the same, which allows for proper substitution.

[Implementation] Linking Popover's backend endpoints

Description

• For each feature over the settings page, like deletion, changing email and password, callback functions are to be written.
• The callbacks are handled, and finally based on an error message, or success, a toast message is given back.

[Implementation] Sign-In failure over email query

Description

• The production login fails, due to the unintentional use of email query, which is wrong.

Insight

• req.body.email, an undefined variable is used to query for the email field.
• This results in matching random documents, eventually leading to wrong login credential matching.

[Implementation] Username does not align properly when using longer usernames in mobile

Description

• Longer usernames are not wrapped, so they extend off the screen and make the user need to move their screen right to see all of it.

Insight

• Perhaps include a word wrap to ensure longer usernames are wrapped and avoid breaking the UI breadth.
• Could make the username size also flexible based on the length, bounded to a minimum and maximum allowed size.

Screenshots

[Implementation] Password to be made hidden in `/login`, `/signup`

Description
In any device, the password doesn't seem to cover itself, showcasing a risk.

Insight

• Updating the HTML tag for the input as password

Screenshots

[Implementation] Adding Favicon, OG:Image

Description

• Currently, the application has no description, favicon, or OG:Image to represent itself.

Insight

• Designing a custom .ico, OG:image.

[Implementation] Sort list of owned games by play time

Description

• The current list of owned games is sorted alphabetically, however this doesn't give a good idea of what kind of games a person plays. It would be preferable to have it he sorted by play time.

Insight

• Modify the sort to use play time

[Implementation] Private Steam Profiles/Invalid Profiles handling

Description
Currently, when a proper steamID, yet private account is used to query in /friends, it returns a 401 Bad Request to the server.

Insight

(FOR PRIVATE STEAM)

This is the data returned when we try to get the data in the home-page. (Page redirects to /)

This is the result in the XYCARD page. (Issue Handled, The page loads in and it displays the Nothing here message)

(FOR INVALID ACCOUNT)

This is the data returned when we try to get the data in the home-page. (Page redirects to /)

This is the result in the XYCARD page. (Issue Not Handled, The page keeps loading)

[Implementation] Backend endpoints error handling, and returns

Description

Currently, the backend endpoints for the settings do not check for things such as,

• The e-mail to already have been registered
• The same, old password to be entered for changing.

Insight

• These can be identified, and rectified along a new check with the endpoint.

[Implementation] Mobile landscape mode card alignment issue

Description

• When on mobile, turning to landscape mode makes the cards align incorrectly. They get left adjusted.

Insight

• Perhaps force a centre align for cards in home. Make the pairs of cards an element (or frame) and centre align them.

Screenshots

[Implementation] Add options to delete your account

Description
Once a user decides to leave, there should be an option to delete the account.

Insight
Introduce a delete account button.

There's no handling for `/home` when there's no recently played games

Description

Currently, If there's no recently played games, there's no message from the UI that the user hasn't played much in the recent past.

Insight

A Handler with according display writing back to the user that there's no recently played games should work!

Files

frontend/src/containers/home/Home.tsx

Tasks

• Handle no recentGames to display
• Display a view which says they haven't played much. Oww... Nothing to show, Play more to see something here

[Implementation] Text Alignment Issues in Recently Played Games List

Description
Currently, the user's recently played list doesn't handle large game names, and looks misaligned.

Insight
Using the properties text-align, white-space, overflow, text-overflow, we can set the text to center aligned format, and it can also be followed with padding to provide more space.

Screenshots

[Implementation] Image Avatar Blocker - Fortiguard

Description
Currently, some of the ISPs, can block api requests with the keyword, Steam in it.

Insight
This causes the images involving requests to the steam avatar DB, gets blocked and the images are left without display.

Screenshots

[Implementation] Add account recovery options

Description
In case a user has trouble logging in, they currently have no option to reset their password.

Insight
Consider adding email as a required input during user creation and have password reset requests send an email to the registered email.

[Implementation] Account Value Calculation Endpoint

Description

• Xylium serves to be a portfolio, a gaming one. Therefore, account value is totally required for the showcase.
• To build account value, several API calls are to be done, but then calculation of the account value is impossible since Steam limits the number of API calls. (Separate endpoint for value accumulation)

Insight

• To handle this, the account value is to be stored as a value to the database every week, as the user makes the request/ at the time of account creation, and the timestamp of making that request is to be recorded.
• If account value process is tried more than once per 24 hours, the user must be let on a cooldown, and they must not be able to use it till atleast the next day.

[Implementation] Production `.env`, dev config and other fixes

Description

• The .env file for the front-end is to be initialized, and the hosting is to be configured to handle requests that way.
• The npm start command for the backend, currently starts with nodemon, a development utility. It is to be changed to npm run dev.
• Useless imports are to be removed from the front-end, and is to be made clean.