thedavidbarton / video-games-on-rawg-react-app Goto Github PK

View Code? Open in Web Editor NEW

18.0 2.0 6.0 4 MB

A video game app powered by RAWG.io api and Archive.org.

License: MIT License

HTML 1.20% JavaScript 90.33% CSS 8.47%

rawg video-game reactjs express videogames archive-dot-org

video-games-on-rawg-react-app's Introduction

Videogames on RAWG

Reusing this project without forking

⚠️ As I see more-and-more are using my application as an inspiration for their projects which is cool. 😊 I want to ask you to (1) make sure that you comply with the MIT license in case you are copy-pasting parts of it (means you are not forking, so the natural connection is cut between your work and the original source code) and also that (2) please alter the User-Agent ({ 'User-Agent': 'video-games-on-RAWG-react-app (GitHub)' }) in your server implementation so it points to your app, not mine (it is not nice to introduce yourself as me when you are calling multiple APIs that are implemented in the code) ☝️ ( (+3) if you'd give me credits as my project was an "inspiration" for yours that would be much appreciated) Thank you! 🙏

a React.Js app with Express backend

An experimental project with the RAWG api and Archive.org's search api.

Local run

Express backend: yarn, yarn start

React.Js frontend: cd client, yarn & yarn start

Simplified API docs

GET /api/trending - used on the home page
GET /api/topRatedRecommended - used e.g. in the header components' bg image
GET /api/videogame/{id} - the content of a specific game
GET /api/videogameAutocomplete?q={query}; ?q= (mandatory) - used in the search input component's autocomplete
GET /api/searchArchive?title={query}&year={query}; ?title= (mandatory); ?year= (mandatory) - searches in Archive.org's collection if an older game has an online playable version on their servers.
GET /api/searchOldgameshelf?title={query}; ?title= (mandatory) - searches in OldGameShelf.com's collection if a NES game has an online playable version on their page.
GET /api/searchSnesnow?title={query}; ?title= (mandatory) - searches in SnesNow.com's collection if a SNES game has an online playable version on their page.
GET /health?from={origin_url} - ?from= (optional) - used for health checks and to wake up idling Node.Js backend on free hosting sites

See in details: server.js.

License

MIT License

Credits

Used data

Powered by Archive.org video game links. This app links some titles to the biggest web archive of the internet. Thanks Archive.org!

Powered by OldGameShelf.com video game links. This app links some titles to OldGameShelf.com which is a brilliant website to play all the retro games of the Nintendo NES system. Thanks OldGameShelf.com!

Powered by SnesNow.com video game links. This app links some titles to SnesNow.com which is a brilliant website to play all the retro games of the SNES system. Thanks SnesNow.com!

Used font

video-games-on-rawg-react-app's People

Contributors

Stargazers

Watchers

Forkers

tysonmike666 fabbud peterk6e cathatef caraelliott csiwill

video-games-on-rawg-react-app's Issues

[FEATURE] finetune strapi results w filters

docs:
https://strapi.io/documentation/3.0.0-beta.x/content-api/parameters.html#filters

e.g.:
/videogame/54243-chuck-rock
=>
https://snesnow.com/play/adventures-of-rocky-and-bullwinkle-and-friends-the-27.html

due to 'chuck rock' results are ordered by name, and Chuck Rock is only the 2nd result :

[
   {
      "id":27,
      "name":"Adventures of Rocky and Bullwinkle and Friends, The",
      "slug":"adventures-of-rocky-and-bullwinkle-and-friends-the",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-25T17:59:13.000Z",
      "metadata":{
         "rawZip":"adventures-of-rocky-and-bullwinkle-and-friends-the/adventures-of-rocky-and-bullwinkle-and-friends-the.7z",
         "zip":"adventures-of-rocky-and-bullwinkle-and-friends-the/adventures-of-rocky-and-bullwinkle-and-friends-the.zip",
         "smc":"adventures-of-rocky-and-bullwinkle-and-friends-the/Adventures of Rocky and Bullwinkle and Friends, The (U) [h1C].smc",
         "images":[
            "adventures-of-rocky-and-bullwinkle-and-friends-the/images/snes_adventures_of_rocky_and_bullwinkle_and_friends,_the_1.gif",
            "adventures-of-rocky-and-bullwinkle-and-friends-the/images/snes_adventures_of_rocky_and_bullwinkle_and_friends,_the_2.gif"
         ]
      },
      "viewCount":98
   },
   {
      "id":219,
      "name":"Chuck Rock",
      "slug":"chuck-rock",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-24T06:33:47.000Z",
      "metadata":{
         "rawZip":"chuck-rock/chuck-rock.7z",
         "zip":"chuck-rock/chuck-rock.zip",
         "smc":"chuck-rock/Chuck Rock (E) [!].smc",
         "images":[
            "chuck-rock/images/snes_chuck_rock_1.gif",
            "chuck-rock/images/snes_chuck_rock_2.gif"
         ]
      },
      "viewCount":44
   },
   {
      "id":695,
      "name":"Kabuki Rocks",
      "slug":"kabuki-rocks",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-27T22:14:58.000Z",
      "metadata":{
         "rawZip":"kabuki-rocks/kabuki-rocks.7z",
         "zip":"kabuki-rocks/kabuki-rocks.zip",
         "smc":"kabuki-rocks/Kabuki Rocks (J) [a1].smc",
         "images":[
            "kabuki-rocks/images/snes_kabuki_rocks_1.gif",
            "kabuki-rocks/images/snes_kabuki_rocks_2.gif"
         ]
      },
      "viewCount":46
   },
   {
      "id":1097,
      "name":"Pocky And Rocky",
      "slug":"pocky-and-rocky",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-27T07:31:10.000Z",
      "metadata":{
         "rawZip":"pocky-and-rocky/pocky-and-rocky.7z",
         "zip":"pocky-and-rocky/pocky-and-rocky.zip",
         "smc":"pocky-and-rocky/Pocky & Rocky (E) (Sample) (NG-Dump Known) [t1].smc",
         "images":null
      },
      "viewCount":39
   },
   {
      "id":1098,
      "name":"Pocky And Rocky 2",
      "slug":"pocky-and-rocky-2",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-15T05:29:25.000Z",
      "metadata":{
         "rawZip":"pocky-and-rocky-2/pocky-and-rocky-2.7z",
         "zip":"pocky-and-rocky-2/pocky-and-rocky-2.zip",
         "smc":"pocky-and-rocky-2/Pocky & Rocky 2 (E).smc",
         "images":null
      },
      "viewCount":49
   },
   {
      "id":1179,
      "name":"Rock N' Roll Racing",
      "slug":"rock-n-roll-racing",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-27T11:28:49.000Z",
      "metadata":{
         "rawZip":"rock-n-roll-racing/rock-n-roll-racing.7z",
         "images":[
            "rock-n-roll-racing/images/snes_rock_n_roll_racing_1.gif",
            "rock-n-roll-racing/images/snes_rock_n_roll_racing_2.gif"
         ]
      },
      "viewCount":61
   },
   {
      "id":1180,
      "name":"Rocketeer, The",
      "slug":"rocketeer-the",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-23T15:24:13.000Z",
      "metadata":{
         "rawZip":"rocketeer-the/rocketeer-the.7z",
         "zip":"rocketeer-the/rocketeer-the.zip",
         "smc":"rocketeer-the/Rocketeer, The (U).smc",
         "images":null
      },
      "viewCount":35
   },
   {
      "id":1181,
      "name":"Rockman And Forte",
      "slug":"rockman-and-forte",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-27T01:57:50.000Z",
      "metadata":{
         "rawZip":"rockman-and-forte/rockman-and-forte.7z",
         "zip":"rockman-and-forte/rockman-and-forte.zip",
         "smc":"rockman-and-forte/Rockman & Forte (J) [!].smc",
         "images":null
      },
      "viewCount":46
   },
   {
      "id":1182,
      "name":"Rocko's Modern Life - Spunky's Dangerous Day",
      "slug":"rockos-modern-life-spunkys-dangerous-day",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-21T20:45:42.000Z",
      "metadata":{
         "rawZip":"rockos-modern-life-spunkys-dangerous-day/rockos-modern-life-spunkys-dangerous-day.7z",
         "images":[
            "rockos-modern-life-spunkys-dangerous-day/images/snes_rockos_modern_life_-_spunkys_dangerous_day_1.gif",
            "rockos-modern-life-spunkys-dangerous-day/images/snes_rockos_modern_life_-_spunkys_dangerous_day_2.gif"
         ]
      },
      "viewCount":54
   },
   {
      "id":1183,
      "name":"Rocky Rodent",
      "slug":"rocky-rodent",
      "ratingCount":1,
      "ratingValue":5,
      "description":null,
      "editorPick":false,
      "detailContent":null,
      "seoInfo":null,
      "created_at":"2019-01-11T21:11:19.000Z",
      "updated_at":"2020-03-16T10:21:05.000Z",
      "metadata":{
         "rawZip":"rocky-rodent/rocky-rodent.7z",
         "zip":"rocky-rodent/rocky-rodent.zip",
         "smc":"rocky-rodent/Rocky Rodent (E) [b1].smc",
         "images":null
      },
      "viewCount":36
   }
]

[BUG] mocked unit tests fail since refactor to React Hooks

currently they are on test.skip:

homepageTrending.test.js
videogame.test.js
searchDropdownItem.test.js

introduce CI

it is required to have for Heroku auto-deploys
update README.md
add link to github.io page and LinkedIn profile

Missing release year not handled in Archive.org request

E.g.: https://trending-video-games.herokuapp.com/videogame/248399-harry-potter-rpg-working-title

videogame.jsx:57 TypeError: Cannot read property 'docs' of undefined
    at videogame.jsx:54
    at c (runtime.js:45)
    at Generator._invoke (runtime.js:265)
    at Generator.e.<computed> [as next] (runtime.js:98)
    at r (asyncToGenerator.js:3)
    at l (asyncToGenerator.js:25)

It gets a different response (seems a random RAWG response) which doesn't have docs attribute.

no background_image is not handled

/videogame/57175-skitchin

TypeError: Cannot read property 'match' of undefined
    at a.t.getBackground (videogameDetails.jsx:92)
    at a.value (videogameDetails.jsx:166)
    at Xa (react-dom.production.min.js:4241)
    at Ga (react-dom.production.min.js:4232)
    at _l (react-dom.production.min.js:6674)
    at _u (react-dom.production.min.js:5648)
    at Cu (react-dom.production.min.js:5637)
    at gu (react-dom.production.min.js:5393)
    at react-dom.production.min.js:2829
    at t.unstable_runWithPriority (scheduler.production.min.js:270)

"read more" of reviews even if there is only one very short review so button should be hidden
images of creators are not resized (they are really huge photos!)
screens cannot be opened in original size => modal
some 4:3 ratio videos are not in align with other screens in the row (e.g. Super Mario Bros)
bad image aspect ratio for some trending games (like Doom currently on HP), it is bit distorted due to width: 100%
autocomplete has one character delay sending the requests to backend, so search is not 100% precise now
instead of "buy" it should be "get" as Archive.org's offers are already free

TypeError: Cannot read property 'slug' of undefined

Example

/videogame/53239-disneys-aladdin-1993

JS error:

videogame.jsx:71 TypeError: Cannot read property 'slug' of undefined
    at videogame.jsx:67
    at c (runtime.js:45)
    at Generator._invoke (runtime.js:265)
    at Generator.e.<computed> [as next] (runtime.js:98)
    at r (asyncToGenerator.js:3)
    at l (asyncToGenerator.js:25)

request:
/api/searchOldgameshelf?title=Disney%27s%20Aladdin

response:

[]

solution:
line 67

if (json[0].slug) {
...

if (json[0].hasOwnProperty('slug')) {
...
    }

length of undefined (getReviews)

TypeError: Cannot read property 'length' of undefined
    at t.value (videogameDetails.jsx:367)
    at Xa (react-dom.production.min.js:4241)
    at Ga (react-dom.production.min.js:4232)
    at _l (react-dom.production.min.js:6674)
    at _u (react-dom.production.min.js:5648)
    at Cu (react-dom.production.min.js:5637)
    at gu (react-dom.production.min.js:5393)
    at react-dom.production.min.js:2829
    at t.unstable_runWithPriority (scheduler.production.min.js:270)
    at Ko (react-dom.production.min.js:2794)
hl @ react-dom.production.min.js:4636
videogameDetails.jsx:21 TypeError: Cannot read property 'length' of undefined
    at t.value (videogameDetails.jsx:367)
    at Xa (react-dom.production.min.js:4241)
    at Ga (react-dom.production.min.js:4232)
    at _l (react-dom.production.min.js:6674)
    at _u (react-dom.production.min.js:5648)
    at Cu (react-dom.production.min.js:5637)
    at gu (react-dom.production.min.js:5393)
    at react-dom.production.min.js:2829
    at t.unstable_runWithPriority (scheduler.production.min.js:270)
    at Ko (react-dom.production.min.js:2794)