Github pages not showing react app website correctly

Question

I am a self-taught programming newbie with 1 month of learning age. Currently I have built a project by watching youtube and I want to show the project results on github page, but after trying everything the website still fails to correctly show the contents of the web, only showing the readme.md as the page content.

1. This is my project: https://github.com/PerdidoenCoding/first_react_app
2. This is my github page URL: https://perdidoencoding.github.io/first_react_app/

After numerous tries, finally found the error as to why it was showing readme.md file instead of the correct website. I did not install the gh-pages package. After correctly installing the gh-pages packages and running npm run deploy,the website is finally showing, but the website is not running the API_URL function in my website, which I got from omdbapi, how do I solve this problem?

Answer 1

Your API_URL is being served using http whilst Github pages are served using https protocol, leading to mixed content error, which is caused when sites served from https are fetching insecure resources (images, scripts, APIs, etc.). Changing it to https should load the data you`re expecting from.

You can read more about mixed content here (link)

Note that in your current state, you are getting a network error when trying to fetch the API, which you are not handling, so I would also wrap your setMovies contents in a try/catch and provide a fallback or notify the user about the issues. What if the API is actually down? It's not actually correct to display that there are no movies for Batman.