Complete rebuilt of the MOVIE SEARCH APP #1439

[mondalsurojit]

🛠️ Fixes Issue (Number) -> #1439

👨‍💻 Changes proposed and Brief Description

📌 Built the application from scratch. COMPLETE REINNOVATION 📌 Designed and coded the new UI 📌 Implemented lazy loading, and also added skeleton loading page load effect 📌 Made the whole site responsive 📌 Fixed the previous bug in the API, that made the whole site useless 📌 Added fallback for images 📌 Incase the API fails to fetch data, I added a popup so that users understand, whats going on/whats the problem 📌 Made the whole documentation, i.e wrote nearly the whole README.md file

✅ Check List (Check all the applicable boxes)

• [X] My code doesn't break any part of the project
• [X] This PR does not contain plagiarized content.
• [X] My Addition/Changes works properly and matches the overall repo pattern.
• [X] The title of my pull request is a short description of the requested changes.

📄 Note to reviewers

The complete reinnovation of this application took a whole lot of efforts. I hope my efforts won't go unrecognized, and you will consider it as a level-3 issue

📷 Screenshots

[netlify[bot]]

✅ Deploy Preview for 30daysofjs ready!

Name	Link
🔨 Latest commit	cf7534d7a75d87202cf3c49b9b863295207618c0
🔍 Latest deploy log	https://app.netlify.com/sites/30daysofjs/deploys/66628fc437cc46000811a436
😎 Deploy Preview	https://deploy-preview-1521--30daysofjs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mondalsurojit]

@swapnilsparsh Sir actually the TMDB API cannot be accessed without a VPN in India...and that was a reason why I added Skeleton loading and a popup, where I mentioned 3 ways to troubleshoot the problem...I have also mentioned to turn on VPN connection in the popup...

The application will work, once you use it after turning on a VPN connection

[swapnilsparsh]

@swapnilsparsh Sir actually the OMDB API cannot be accessed without a VPN in India...and that was a reason why I added Skeleton loading and a popup, where I mentioned 3 ways to troubleshoot the problem...I have also mentioned to turn on VPN connection in the popup...

The application will work, once you use it after turning on a VPN connection

You can use other API also which is allowed in India

[mondalsurojit]

@swapnilsparsh Ok sir...I am finding for one...

[mondalsurojit]

@swapnilsparsh Hello Sir, actually the API that I was using earlier was TMDb. But now I am planning to use OMDb. Its working though without VPN, but many of the features such as Popular movies, Editor's pick and Recommended section will not work....Should I go ahead?

[swapnilsparsh]

@mondalsurojit sure just remove the sections which will not work

[mondalsurojit]

@swapnilsparsh Sir please review the latest PR...

[mondalsurojit]

@swapnilsparsh Hello Sir, I have used new API for this one - OMDb, earlier it used TMDb...and its supposed to work within India. As it has worked several times on my pc, without any VPN connection. Here an example:

https://github.com/swapnilsparsh/30DaysOfJavaScript/assets/114282267/72c0a6f2-f1a5-43b3-97f0-4af475d9bd3d

Can you please connect your pc using mobile internet or maybe restart it once...as I can't actually figure out whats going wrong this time...

[swapnilsparsh]

@mondalsurojit I tried but it is not working on my computer network.

[mondalsurojit]

@swapnilsparsh My god! Ok, in that case...I would need your help, to solve the issue. What do you think is causing the problem....?

[swapnilsparsh]

@mondalsurojit Below is the error which I am getting in my network tab and this is the updated netlify url on which I am checking Link

[mondalsurojit]

@swapnilsparsh Hello sir, the error that is happening exactly is "Mixed Content Error", its because Netlify runs over HTTPS protocol and the API endpoint (OMDb) that I am sending request runs over HTTP protocol. Usually the solution is to transfer all resources to HTTPS and migrate all API's to HTTPS (source -> StackOverflow), which is not a viable option for an opensource project, as most of the APIs that runs on HTTPS protocol and also famous at the same time is the paid one.

Now we are left with 2 last options ->

1. Either to create our own movie API endpoint, which is a bit difficult task...and yes I also have to study first, how to build an API...
2. To allow insecure content by site-settings > Insecure content > Allow

https://github.com/swapnilsparsh/30DaysOfJavaScript/assets/114282267/5aa9da59-a56d-44aa-a279-aa3f88eab91c

I can add a short 10 seconds video/gif in the popup to let users know that, "Since it's an opensource project, to access the app's functionality you have to follow the steps shown in the video..."

[swapnilsparsh]

@mondalsurojit We have to find some other approach then

[mondalsurojit]

@swapnilsparsh Sir, I found a trick, that may work....you please check once whether its working or not...If this doesn't work, I will have to use some sort of proxy http

[swapnilsparsh]

@mondalsurojit Yes it is working now, just one small fix as there is nothing much when I am hovering so you can decrease the height of white background.

[mondalsurojit]

Okay I am doing it...

[mondalsurojit]

@swapnilsparsh Hello sir, please check once....The complete reinnovation of this application took a whole lot of efforts. I hope my efforts won't go unrecognized, and you will consider it as a level-3 issue...thank you :)

[swapnilsparsh]

@mondalsurojit Thank you for contributing to this repo. Looking forward for more 🚀