asiern / speedrunhub

Speedrun Browser for Android/IOS

🏆SpeedrunHub

---

SpeedrunHub is an open source app for Android made with React Native and Expo. It allows you to consult the speedrun.com page natively on your device. All the data is provided by the speedrun.com REST API.

Disclaimer: This is not an official app

• Features
• Downloads
• Contributing
• Creating Issues
• Feedback and Issue Reporting
• Privacy Policy / Terms & Conditions / License

Features

• Receive all Speedrun.com notifications directly to your phone (API-Key is needed)
• Search for users and watch their PBs
• Search for game leaderboards
• Manage your favorite games
• Follow users
• View game runs

Downloads

Download the app for your device:

• Google Play
• Expo
• Github

Contributing

If you're interested in contributing to this project, you can get started by reading the development section in the README. The development section provides information about the project's dependencies, configuration steps, and how to set up the development environment. It will guide you through the necessary steps to contribute effectively. Feel free to explore the codebase and submit your contributions following the project's guidelines. We appreciate your interest and look forward to your contributions!

Creating Issues

To report a problem, suggest an improvement, or request a new feature, you can create an issue in the project's repository. Follow these steps to create a new issue:

1. Go to the repository on GitHub.
2. Click on the "Issues" tab at the top of the repository's page.
3. Click on the green "New Issue" button.
4. Provide a descriptive title for the issue that summarizes the problem or request concisely.
5. In the issue description, provide detailed information about the issue, including any steps to reproduce the problem, relevant code snippets, or screenshots if applicable.
6. You can use Markdown formatting to make the issue description more readable and organized.
7. Add any relevant labels or assignees to the issue to help categorize and assign it to the appropriate team member.
8. Once you're ready, click on the "Submit new issue" or "Create issue" button to create the issue.

Creating clear and well-documented issues helps in efficient communication and problem resolution within the project.

Feedback and Issue Reporting

If you come across an issue, have a question, or would like to request a new feature, there are multiple ways to reach out and provide your feedback.

1. Opening an Issue: If you find a bug, encounter an error, or have a specific problem with the project, you can open an issue on the project's GitHub repository. To do this, follow the steps outlined earlier in the "Creating Issues" section. Provide detailed information about the issue, steps to reproduce it, and any relevant code or screenshots.

2. Sending an Email: If you prefer to communicate privately or have a general question, you can also reach out via email. Feel free to send an email to [email protected]. Include a clear subject line and provide as much detail as possible in your message. I'll be happy to assist you and address any concerns or questions you may have.

Remember, opening an issue or sending an email is not limited to reporting issues only. It's also a way to share your thoughts, ask questions, or request new features for the project. Your feedback and input are valuable in shaping the project and making it better.

Whichever method you choose, whether opening an issue on GitHub or sending an email, I appreciate your involvement and look forward to hearing from you. Your feedback helps improve the project and ensures a better experience for all users.

Privacy Policy / Terms & Conditions / License

• Privacy Policy
• Terms & Conditions
• License

speedrunhub's Issues

Settings screen

• Log out
• Notifications
• About
• Privacy Policy
• Terms & Conditions

Migrate to Expo SDK48

Home screen

• User header
• Search bar
• Notifications
• My Games
• Followed users

Implementation of Accessibility Features (TalkBack)

As part of our commitment to inclusivity and ensuring a seamless user experience for individuals with disabilities, it is crucial to implement comprehensive accessibility features, throughout our mobile application.

The current version of our app lacks proper support for TalkBack, a screen reader for Android devices that assists users with visual impairments in navigating and interacting with digital content. The absence of TalkBack compatibility inhibits users with visual disabilities from accessing and utilizing our app effectively.

App crashing

It seems to be whenever I open the app and close it and try to open it again it won't open the app.

Scroll Indicator error when adding new games

This error is thrown after adding/removing a game to/from config.games list and makes scroll indicator number of slides change.

Warning: React has detected a change in the order of Hooks called by ScrollIndicator. This will lead to bugs and errors if not fixed.

Previous render Next render

1. useContext useContext
2. useRef useRef
3. useRef useRef
4. useRef useRef
5. useRef useRef
6. useEffect useEffect
7. useRef useRef
8. useEffect useEffect
9. useEffect useEffect
10. undefined useRef
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Game screen add to `My Games` button

RunInfo screen

Update Privacy Policy, Terms & condtions and License

• Privacy policy updated
• Terms & conditions updated
• License updated

Textinput icons

• Login page (username input) -> Feather user
• Login page (api-key input) -> Feather key

Following empty list message

Add Empty Search Results Message to Search Screen

Code linting

ESLint is installed but there is no automation for checking and linting code.

• Check current ESLint config
• Update if necessary
• Create hook using husky for linting code before committing.
• Update docs

Update mockups

Onboarding accessibility

• Buttons to move between slides

Migrate from expo-app-loading to expo-splash-screen

GameInfo category text not displaying

Search screen game titles overflow from component

Some examples:

• The Legend of Zelda: A Link to the Past
• The Legend of Zelda: A Link Between Worlds

Search screen item placemet should be top

When search results are not enough to fill screen items are placed at the center of the screen. Items should be placed at the top of the scrollview.

App analytics

Implement an analytics system to monitor app use and errors. Crashlytics

Testing

Project code should be tested before committing or pushing code to repository.

• Choose testing library/framework
• Install testing library/framework
• Create tests
• GitHub actions

Storybook

• Storybook 100% device installation.
• Add storybook docs to readme
• Add badge to readme

Add support for i18next translation library

By incorporating i18next into our React Native Expo project, we aim to achieve the following benefits:

• Enable easy localization and translation management for our app across different languages.
• Simplify the process of handling dynamic content and language-specific formatting.
• Facilitate the seamless integration of translations into our UI components.
• Utilize i18next's extensive ecosystem, including community-contributed language resources and plugins.

Assest uri

Assets uri changed location on api response

FIX:

• GameCard cover uri
• GameInfo BG+GameCard
• User Logo uri
• RunInfo uri
• SectionHeader background

Login screen

Profile UserCard should display an image placeholder

GameInfo loading animation

• Add loading animation on change category
• Add loading animation on change variable

Onboarding "Next" button crash

Profile like button should change based on following state

Individual Level categories

Notifications settings back button

My Games empty list message

Profile filters

Notifications screen layout alignment

Games with no categories not loading

Profile loading animation

Add profile loading animation

Search input onSubmit action

Add user agent to API requests

Speedruncom API docs states the following:

If possible, please set a descriptive User-Agent HTTP header. 
This makes it easier for us to see how the API is being used and optimize it further. 
A good user agent string includes your project name and possibly the version number, like my-bot/4.20.

User Agent: speedrunhub/<version>

Search screen

• Game/User filters
• Game list
• User list

GameInfo app crash

Home screen 'MyGames' and 'Following' label onPress

• MyGames label should redirect to GameList screen
• Following label should redirect to Following screen

Set commit standard

Conventional Commits

• Install husky
• Configure husky with conventional commits
• Add explanation to readme
• Add badge to readme

Profile screen loading time

Reduce user personal best loading time

Add clear text button on search bar component

Profile screen

• User header
• Social media links
• User run list

Forums

Images and graphics not showing

No images or graphics show on any page in the app.

HomeHeader > UserCard component sizing

Sizing not working properly with long names. Component should fill available space and trim texts if necessary.

Describe desing pattern (readme)

This pattern is based on the concept of organizing code by feature, rather than by file type. It is often referred to as "feature-based" or "feature-first" architecture.

The main idea behind this pattern is to organize your code in a way that makes it easy to find and maintain. By grouping related files together in feature folders, you can quickly locate the code you need to work on a specific feature or screen.

Here's a breakdown of the main folders in your app:

• Components: This folder contains reusable components that are used across multiple screens. These components should be generic and not tied to any specific feature or screen.

• Hooks: This folder contains hook functions and API calls for data. This is where you would put any custom hooks that you use in your app.

• Screens: This folder contains the navigation screens for the app. Each screen has its own folder, and the components used by that screen are stored inside that folder. This makes it easy to find and maintain the code for a specific screen.

• Navigation: This folder contains the stack navigations for the app. This is where you would put your navigation logic.

• Types: This folder contains data types used by the app. This is where you would define your custom types and interfaces.

• Config: This folder contains the config context and type definitions for the app. This is where you would put any global configuration settings for your app.

Game screen performance

• Improve game screen performance by migrating ScrollView to a virtual list (FlashList)
• Fetch games in groups of 20 when user scrolls to end