LWC Project - Part 1 | Build a Movie Search App with Lightning Web Components

No video

LWC Project - Part 1 | Build a Movie Search App with Lightning Web Components

Рет қаралды 14,887

Күн бұрын

🎬 Movie Search Using LWC - Part 1
⭐ If you find this project helpful, please consider giving it a like.
📝 Description:
In this project, we'll create a Movie Search web application using Salesforce's Lightning Web Components (LWC). This web component allows users to search for movies using the Open API. We'll walk through the entire development process, from setting up a Salesforce environment to fetching and displaying movie results. Whether you're a beginner or an experienced developer, you'll find valuable insights in this tutorial.
🚀 Key Features:
- Integration with Public API
- Real-time movie search functionality.
- Dynamic results displayed using Lightning Web Components.
- Easy-to-follow step-by-step tutorial.
📚 Resources:
- Remote Site Setting and CSP Trusted Site for this project
⭐ m.media-amazon...
⭐ www.omdbapi.com
- Public API Documentation:
⭐ www.omdbapi.com/
🔧 Technologies Used:
- Salesforce Lightning Web Components (LWC)
- JavaScript
- HTML/CSS
🤝 Support:
If you have any questions, suggestions, or encounter issues during this project, please leave a comment below. I'll do my best to assist you.
🤝 Learning from this project
👉 Use of Fetch API
👉 Parent to Child Communication - @api
👉 Child to Parent Communication - customEvents
👉 Independent Component Communication - Message Channel
👉 External CSS
👉 Use Component on LWR Sites
👉 Template Looping and Conditional Rendering
👉 Getter methods
👍 Don't forget to like this video, subscribe to the channel, and ring the notification bell to stay updated with more tutorials like this one!
#salesforce #lwc #lwcproject #lwcminiproject #lwcadvanced #lwcbasics #lightningwebcomponent #lwr

Пікірлер: 64

@sumeetyadav1817 7 ай бұрын

Thanks Ankit, It is really helpful. Please keep on creating such videos.

@TechJourneyWithAnkit 7 ай бұрын

Glad you liked it

@awesomekj5812 10 ай бұрын

Thank you for sharing your knowledge. I subscribed and looking forward to part 2 of this video.

@TechJourneyWithAnkit 10 ай бұрын

Glad you liked it. Part 2 is live now

@Islamic_7841 5 ай бұрын

Good explanation ❤

@TechJourneyWithAnkit 5 ай бұрын

Thank you 🙂

@user-jb6cn9ej5m 2 күн бұрын

Hello, could you please provide a more detailed explanation? I am having difficulty understanding, as it seems you are only presenting the code. I would appreciate it if you could elaborate on the concept in your response. Thank you."

@TechJourneyWithAnkit Күн бұрын

Noted. Will take care of this in future videos

@DSA_Javascript 4 ай бұрын

I am getting a pop error as A Component Error has occurred! "Cannot read properties of undefined (reading 'Poster')".but when I close the pop then do search the movie everything working fine

@TechJourneyWithAnkit 4 ай бұрын

do the debug and please try to check line by line , where it is failing

@charudattajadhav8134 3 ай бұрын

hello sir, i was stuck on tile component. It is not rendering the tiles. There is no error in code but on UI it is showing only black background. Please help me with it.

@TechJourneyWithAnkit 3 ай бұрын

Might be an error in html file or js file. Debug line by line

@suhasshenoy1283 6 ай бұрын

Sir during compilation I am not getting any errors. but I am getting "Cannot read properties of undefined (reading 'length')" error in the component

@TechJourneyWithAnkit 6 ай бұрын

Debug the code or initialise with blank array

@prathamkunjeer Ай бұрын

Getting an error like : Movie Search Output {Response: 'False', Error: 'Invalid API key!'} . I have formed the URL correctly also I have authorized the API key. Still getting this error ! Can you please help ?

@TechJourneyWithAnkit Ай бұрын

Recheck if you are using https or http while making any fetch request and accordingly configure remote site setting and CSP as well

@prathamkunjeer Ай бұрын

@@TechJourneyWithAnkit I have checked everything. It's as per your Video 🥲. The problem still persists 🫡 . Do you have any other Solutions?

@himanshubansal6809 23 күн бұрын

@@prathamkunjeer any update on your problem? I am also facing same issue

@user-jb6cn9ej5m 2 күн бұрын

@@prathamkunjeer same Error i am also getting

@JyotiSingh-ff5zp 3 ай бұрын

For movies and series it is working but how can we search for "type 3" Episodes?. How to put the name?

@TechJourneyWithAnkit 3 ай бұрын

Not explored that

@AnirudhBargur 7 ай бұрын

The Movie Details tab does not show up at all. The code executes without any error. The component goes invisible in the 'Edit Page' as well. what might be the problem?

@Dante-yd9ou 7 ай бұрын

I have yet to reached at your step so can't help with your issue right now, just curious after making the first call to the API did you get any error like this - because it violates the following Content Security Policy directive: "connect-src 'self' FYI, I have already setup remote site and CSP according to the video tried in edge and chrome also but getting same error. Would really appreciate if you can help on this

@TechJourneyWithAnkit 7 ай бұрын

Check in console if you are getting value using Message Channel

@TechJourneyWithAnkit 7 ай бұрын

Check the used url and configured URL, both most have http. It should not be http and https at different places

@AnirudhBargur 6 ай бұрын

Thank you@@TechJourneyWithAnkit

@sushmitamandal942 7 ай бұрын

Can we not make the child component (movie tile) communicate with the other component(movie Detail) making it a child component of (movie tile)

@TechJourneyWithAnkit 7 ай бұрын

yes it is possible by keeping both movie tile and movie detail under another component ( let's say master component) , but again for this project i want to explore all types of communication

@Dante-yd9ou 7 ай бұрын

I have already set up the CSP and Remote Site settings but still I am getting this error when I try to fetch the results, would really appreciate your help. *because it violates the following Content Security Policy directive: "connect-src 'self'*

@Dante-yd9ou 7 ай бұрын

Finally, it works, but I have to deploy the component to the experience site and it worked fine. I don't know why it is not working in the org itself although the settings are unchanged (CSP and Remote Site)

@TechJourneyWithAnkit 7 ай бұрын

Check url it should be http or HTTPS at all places

@thotaupendra901 4 ай бұрын

@@Dante-yd9ou even im getting same error, how did you rectify that?

@Dante-yd9ou 4 ай бұрын

@@thotaupendra901 I have already mentioned my method in the above reply

@Shaik_Abdul_01 8 ай бұрын

Hi @Ankit I unable to solve this error: "{Response: 'False', Error: 'Incorrect IMDb ID.'}Error: "Incorrect IMDb ID."Response: "False"[[Prototype]]: Object". I tired by double checking my apikey and i checked URL also which is in correct form. What could be the reason? And pls guide me to reslove it.

@TechJourneyWithAnkit 8 ай бұрын

Check if message service sending the imbd I'd correctly

@sundichaithanyareddy 7 ай бұрын

Hi have you found what was the reason for that error because I am also getting the same error. Tell me if you know what is the mistake

@JShorts511 3 ай бұрын

@@sundichaithanyareddy In my case ,I forgot to add onchange property to one of the ligthning-input

@HemlataAamod 2 ай бұрын

When i am searching movie name then any image are not showing

@TechJourneyWithAnkit 2 ай бұрын

Check logs and make sure you are using the correct node from json. Note it is case sensitive

@sushma6058 7 ай бұрын

In video 8:41 i am unable to find that page in my security tab Can you please how should I find that csp trusted sites

@TechJourneyWithAnkit 7 ай бұрын

help.salesforce.com/s/articleView?id=sf.security_trusted_urls_manage.htm&type=5

@BalajiBalaji-jv1gt 6 ай бұрын

In the spring 24 csp trusted site place came up with -----> Trusted URLs once search with this name Trusted URLs.

@sarcasticmind1676 7 ай бұрын

56:00 why to do it unnecesarry. passing data to parent and then again passing the same data from parent to the same child

@TechJourneyWithAnkit 7 ай бұрын

we follow this approach to create modular components

@SFDCWEB 9 ай бұрын

Hello Sir I am getting this error {Response: 'False', Error: 'Incorrect IMDb ID.'}Error: "Incorrect IMDb ID."Response: "False"[[Prototype]]: Object

@TechJourneyWithAnkit 9 ай бұрын

Double check your api key. Check if url is formed correctly

@SFDCWEB 9 ай бұрын

@@TechJourneyWithAnkit solved 😊 thanks for your reply 😊

@akshaymahajan7160 7 ай бұрын

Hi, I need help actions not available on record list arrow tab

@TechJourneyWithAnkit 7 ай бұрын

Check out Data Table series

@aswinselvaraj6171 9 ай бұрын

Trusted sites not showing in my org (in the quick find)

@TechJourneyWithAnkit 9 ай бұрын

From Setup, in the Quick Find box, enter Trusted URLs, and then select Trusted URLs.

@rajking69 6 ай бұрын

Hello sir i I am looking for a job in salesforce development as a fresher for a long time so please help if any reference Thank you

@TechJourneyWithAnkit 6 ай бұрын

I don't have any openings. Will let you know if there is any

@kumareshghosh5593 5 ай бұрын

Just tested the key in postman, it says invalid API key.

@TechJourneyWithAnkit 5 ай бұрын

Make sure you are authorising it from your email

@kumareshghosh5593 5 ай бұрын

@@TechJourneyWithAnkit yes now working

@akashdhargave3314 9 ай бұрын

not showing in my org CSP Trusted site so what can I do

@TechJourneyWithAnkit 9 ай бұрын

Search for trusted site

@akashdhargave3314 9 ай бұрын

i search trusted site but they show trusted URL...?

@BalajiBalaji-jv1gt 6 ай бұрын

Trusted URLs came in the place of csp trusted site.

@lucifer2099 6 ай бұрын

Hi sir can you provide code for the movie search?

@TechJourneyWithAnkit 6 ай бұрын

I can't due to copyright

@avinashgosavi844 9 ай бұрын

Hello sir I am getting error like - incorrect IMDb ID.

@TechJourneyWithAnkit 9 ай бұрын

If you are getting an error on page load, validate Api key is correct and url is also formed correctly