Coding Star
Coding Star
  • 11
  • 363 785
Movies App | IMDB Clone | React App | ReactJs Project | 2022
✨ Movies App | IMDB Clone | React App | ReactJs Project | 2022
In this video, we are going to create a Movie app, which will be a IMDB clone created on React App.
This React project will provide us the list of upcoming, popular & top rated movies. On clicking on any movie it will show us the detail page of the movie.
This React app also have a caraousel at the top for displaying movies as hero banner.
Technologies used:
✨ReactJs
✨React Router Dom
✨React Loading Skeleton
✨React Responsive Caraousel
✨Font Awesome
============================================================
Useful Link In Building A Movies App IMDB Clone React App :-
✨ 1. TMDb: The Movie Database API - developers.themoviedb.org/3/getting-started/introduction
✨ 2. IMDB logo - upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/2560px-IMDB_Logo_2016.svg.png
✨ 3. TMDB movies API
Popular - api.themoviedb.org/3/movie/popular?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US
Upcoming - api.themoviedb.org/3/movie/upcoming?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US
Top Rated - api.themoviedb.org/3/movie/top_rated?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US
Movie Detail API - api.themoviedb.org/3/movie/{{ id }}?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US
✨ 4. React Dev Tools - chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
✨ 5. React Responsive Caraousel - www.npmjs.com/package/react-responsive-carousel
✨ 6. TMDB image path - image.tmdb.org/t/p/original/{{ imagePath }}
✨ 7. Font Awesome CDN - fontawesome.com/v5.15/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont
✨ 8. React Loading Skeleton - www.npmjs.com/package/react-loading-skeleton
✨ 9. GITHUB Repo - github.com/PrinceRaaaj/IMDB-clone-ReactApp
============================================================
So, Like , subscribe, share, and support to keep us motivating.
============================================================
Checkout More:-
✨ Socket.io Chat App :- th-cam.com/video/-wUBcivCOk8/w-d-xo.html
✨Login & Register MERN Stack :- th-cam.com/video/SyEQLbbSTWg/w-d-xo.html
✨ MERN Stack Projects(React Js, Node Js, Express Js, MongoDb ) - In Hindi : -
th-cam.com/play/PLMHkO6THGgW5bpnBV4Xrye3nsFiwFQEga.html
=============================================================
Social Links:-
✨ Github - github.com/PrinceRaaaj
✨ Instagram - codingstar98
✨ Instagram (personal)- prince_raaaj
✨ Facebook - princeraj08feb
✨ Movies App | IMDB Clone | React App | ReactJs Project | 2022
#Codingstar #reactjs #javascript
มุมมอง: 130 636

วีดีโอ

Build A Realtime Chat App In ReactJS and NodeJS | Socket.io Tutorial | Create Chat App Using ReactJs
มุมมอง 11K2 ปีที่แล้ว
Build A Realtime Chat App In ReactJS and NodeJS | Socket.io Tutorial | Create Chat App Using ReactJs ✨ Frontend - ReactJs, HTML, CSS, JavaScript, Bootstrap ✨ Backend - NodeJs, ExpressJs, Socket.IO 👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇 PROJECT LIVE URL - chat-socket-io-prince.herokuapp.com/ 👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆 In this video I am going to built a socket.io real time chat app that uses NodeJs and ExpressJs in b...
Login & Register - MERN stack - LocalStorage - (React js, Node Js, Express Js, MongoDB) - 2021
มุมมอง 8K2 ปีที่แล้ว
Login & Register - MERN stack - LocalStorage - (React js, Node Js, Express Js, MongoDB) - 2021 ✨ Frontend - ReactJs, HTML, CSS, JavaScript ✨ Backend - NodeJs, ExpressJs, MongoDB, Mongoose This video is second part of Login & Register - Hindi - MERN stack . In this video i am going to tell you how to use localStorage in ReactJs and MERN project. Dont forget to watch the first video. First Video:...
ReactJs - Skeleton Loading for API - Hindi Tutorial - 2021
มุมมอง 15K3 ปีที่แล้ว
ReactJs - Skeleton Loading for API - Hindi Tutorial - 2021 This project specially focuses on how to achieve skeleton loading on our react app when the API is being called. I had used some online API that is providing us a list of user that is required by us on our React project. So when the App load for the first time the API is being called and the skeleton is visible of our card. When the API...
3. React Js Tutorial - JSX - Hindi - 2021
มุมมอง 2413 ปีที่แล้ว
3. React Js Tutorial - JSX - Hindi - 2021 In this video we are going to learn about What is JSX, and how it is different from HTML, and also we are going to learn how we can use it in reactJs. So watch the full video to know about JSX. Initialize React App - th-cam.com/video/TiPWpYy8Xgc/w-d-xo.html And dont forget to Like , subscribe, share, and support to keep us motivating. Checkout More:- ✨ ...
Reminder App with WhatsApp notify - Hindi - MERN Stack (ReactJs, Node Js, ExpressJs, MongoDB) - 2021
มุมมอง 17K3 ปีที่แล้ว
Reminder App with WhatsApp notify - Hindi - MERN Stack (ReactJs, Node Js, ExpressJs, MongoDB) - 2021 ✨ Frontend - ReactJs, HTML, CSS, JavaScript ✨ Backend - NodeJs, ExpressJs, MongoDB, Mongoose In this video I am going to build an awesome MERN stack app that has a feature to notify on reminder on whatsapp. So, just jump start the video and you will be able to create this amazing app, I am using...
2. React Js Tutorial - Initialization, Folder Structure & cleaning process - Hindi - 2021
มุมมอง 1.5K3 ปีที่แล้ว
2. React Js Tutorial - Initialization, Folder Structure & cleaning projecss - Hindi - 2021 Video TImeline: ⏭ Intro: 00:00 ⏭ Initializing App: 00:29 ⏭ Mini Task For You: 01:11 ⏭ Cleaning Process: 01:42 ⏭ Starting App: 04:39 ⏭ Folder Structure: 06:05 ⏭ Ending: 08:10 In this video we are talking about, How to initialize our first react app, of HELLO WORLD. We are also discussing folder and file st...
1. React Js Tutorial - Inroduction, What and Why React Js - Hindi - 2021
มุมมอง 6573 ปีที่แล้ว
React Js Tutorial - Inroduction, What and Why React Js - Hindi - 2021 Hello, Everyone today I am starting a brand new series on React Js, in which I will be covering all the important topics such as Jsx, Components, Hooks, State, props, conditional rednering, immutability, fragrance, and many more. This course is the way to becoma a Master in React Js. ✨ React Official Site - reactjs.org/ So, L...
Login & Register - Hindi - MERN stack (React js, Node Js, Express Js, MongoDB) - 2021
มุมมอง 173K3 ปีที่แล้ว
Login & Register - Hindi - MERN stack (React js, Node Js, Express Js, MongoDB) - 2021 ✨ Frontend - ReactJs, HTML, CSS, JavaScript ✨ Backend - NodeJs, ExpressJs, MongoDB, Mongoose In this video I am going to build a complete login and registration functionality in Mern stack (ReactJs, NodeJs, ExpressJs, MongoDB), and also dealing with some concepts related to javascript and other function, like ...
Frosty Glass Effect with HTML & CSS - Tutorial in Hindi - 2021
มุมมอง 3673 ปีที่แล้ว
Frosty Glass Effect with HTML & CSS - Tutorial in Hindi - 2021 The video focuses on how to achieve a frosty glass effect UI with just plain HTML and CSS. This tutorial will guide you with the step by step procedure, and concepts related to achieving this Frosty glass effect in webpage UI. Video TImeline: ⏭ Intro: 00:00 ⏭ HTML Structuring: 00:30 ⏭ CSS styling: 01:44 ⏭ Ending: 15:14 Important pro...
The Keeper App - Hindi Tutorial - MERN( MongoDb, Express Js, React Js, Node Js ) - 2021
มุมมอง 7K3 ปีที่แล้ว
The Keeper App - Hindi Tutorial - MERN( MongoDb, Express, React, Node ) - 2021 ✨ Frontend - React Js, HTML, CSS, JavaScript, Bootstrap, FontAwesome ✨ Backend - Node Js, Express Js, MongoDB, Mongoose In this video I am going to build Keeper app that is based on ReactJs, and supported with Node Js, Express Js backend. And the databse used here is MongoDB. There are 3 steps involded in this react ...

ความคิดเห็น

  • @Taral-ib5qf
    @Taral-ib5qf วันที่ผ่านมา

    Seriously man , the content and the knowledge you are providing is magnificent

  • @shweta6117
    @shweta6117 9 วันที่ผ่านมา

    please koi api ki lin share kr do because description link nhi run hori hai

  • @AirdopWithProfessor
    @AirdopWithProfessor 20 วันที่ผ่านมา

    nice project this will open me the gate of API handle and may more muchx100 thanks to you sir

  • @aniruddhafalke6594
    @aniruddhafalke6594 24 วันที่ผ่านมา

    API is not working brother

  • @sakshamsharma1792
    @sakshamsharma1792 24 วันที่ผ่านมา

    APis not working

  • @sakshamsharma1792
    @sakshamsharma1792 24 วันที่ผ่านมา

    Why the api not now working . I have made in 2023 at that time it was working fine but now it is not working why ??

  • @mehandilone9533
    @mehandilone9533 27 วันที่ผ่านมา

    Thank u sooo much bahi best vedio

  • @Prince_07123
    @Prince_07123 หลายเดือนก่อน

    🎉❤

  • @pcshivani8552
    @pcshivani8552 หลายเดือนก่อน

    API is not working

  • @vardhansuri1356
    @vardhansuri1356 หลายเดือนก่อน

    how is classification of movie (top,uocoming)is done here???

  • @LalitKumar-zx6gn
    @LalitKumar-zx6gn หลายเดือนก่อน

    Connection established at port 9002 E:\React\New folder\Login\login-register-backend ode_modules\mongoose\lib\mongoose.js:423 throw new MongooseError('Mongoose.prototype.connect() no longer accepts a callback'); ^ MongooseError: Mongoose.prototype.connect() no longer accepts a callback at Mongoose.connect (E:\React\New folder\Login\login-register-backend ode_modules\mongoose\lib\mongoose.js:423:11) at file:///E:/React/New%20folder/Login/login-register-backend/index.js:10:10 at ModuleJob.run (node:internal/modules/esm/module_job:194:25) Please, someone help?

  • @vikasni95
    @vikasni95 หลายเดือนก่อน

    Please remove the bg music, its disturbing

  • @Everything12105
    @Everything12105 หลายเดือนก่อน

    bhai i want help cause my movie image is not working can u please help in that the synopsis and image is not working properly

  • @saurabhideshmukh718
    @saurabhideshmukh718 หลายเดือนก่อน

    Do anyone get the error of axios , While using post method

  • @user-wz7xy1in3m
    @user-wz7xy1in3m 2 หลายเดือนก่อน

    Sir you are very good, I learned and implemented this project in 4 days (because when I implemented I face many errors but I fixed errors) and this video is very helpful for me because in it I learn front end, back end and DB. Thanks ❤

  • @kosaransari5493
    @kosaransari5493 2 หลายเดือนก่อน

    thankyou so much for the guidance..made my first project very well..also i learned very much from you

  • @designwithhzzrd6330
    @designwithhzzrd6330 2 หลายเดือนก่อน

    The most simplest and easiest way for login form 😮

  • @lilianquin9248
    @lilianquin9248 2 หลายเดือนก่อน

    Me encanto, gracias por tu ayuda❤

  • @Aravind_234
    @Aravind_234 3 หลายเดือนก่อน

    bro when i am going to add footer is not working

  • @neetukumari6866
    @neetukumari6866 3 หลายเดือนก่อน

    thank you for this video. it's helpful. thanks.

  • @aakashbankey4035
    @aakashbankey4035 4 หลายเดือนก่อน

    thanks bhai 👍👍👍

  • @ezaazbasha5534
    @ezaazbasha5534 4 หลายเดือนก่อน

    Bro TMDB me issue dikharaha hai wo site open nahi horaha hai

  • @NikhilSingh-rx2lu
    @NikhilSingh-rx2lu 4 หลายเดือนก่อน

    Tumhare fast forward k chakkar me hamare L lag ja rahe hai...

  • @Soul5517
    @Soul5517 4 หลายเดือนก่อน

    how to make this project responsive for all devices can anybody help plz??

  • @Moto_Dragzz
    @Moto_Dragzz 4 หลายเดือนก่อน

    search option dalnaa chahiyethaa

  • @souravkumar7187
    @souravkumar7187 4 หลายเดือนก่อน

    API is not working

    • @factcinemaaa
      @factcinemaaa 3 หลายเดือนก่อน

      Bhai copy v nhi krne aata tumko 😂

  • @dhanjeetsharma4488
    @dhanjeetsharma4488 4 หลายเดือนก่อน

    00:01 Implementing login and access control 02:44 Setting up the MERN stack project 09:30 Creating login and register operations 12:12 Demonstration of login and registration process in MERN stack 18:42 Exploring login functionality in MERN stack 21:23 Creating user login and registration process 26:16 Configuring and using Express in MERN stack 29:26 Using and managing databases in MERN stack projects 35:13 Setting up login and registration process in MERN stack 38:01 Handling user registration and login process 43:35 Making a post request and handling responses 46:08 Handling request body and data manipulation in the MERN stack 52:43 Sending a message and making necessary changes in the network 56:30 Logging in and user validation process 1:02:47 How to implement login and register functionality in MERN stack (React js, Node Js, Express Js, MongoDB) 1:05:59 Explanation of switch statements and usage in MERN stack 1:10:27 Login and Register flow with MERN stack 1:12:43 Implementation of login and registration in MERN stack 1:17:54 Handling user login functionality 1:21:01 Handling user login and registration flow 1:26:31 Setting up login and register functionality Crafted by Merlin AI.

  • @immasha8187
    @immasha8187 5 หลายเดือนก่อน

    thank you so much bro

  • @krishnanand8012
    @krishnanand8012 5 หลายเดือนก่อน

    sir how to login using google account

  • @user-yk3yt4vk9j
    @user-yk3yt4vk9j 6 หลายเดือนก่อน

    Easy and beginner friendly❤

  • @Sanatan-pe8zy5fk9p
    @Sanatan-pe8zy5fk9p 6 หลายเดือนก่อน

    Please Make complete MERN ecommerce website

  • @rushabh23
    @rushabh23 6 หลายเดือนก่อน

    amazing tutorial bro

  • @balendrasinghparihar8849
    @balendrasinghparihar8849 6 หลายเดือนก่อน

    just finished this project

  • @sanamukhtar4008
    @sanamukhtar4008 6 หลายเดือนก่อน

    just love your explainations

  • @sanamukhtar4008
    @sanamukhtar4008 6 หลายเดือนก่อน

    very informative

  • @premkhodke3176
    @premkhodke3176 6 หลายเดือนก่อน

    Great video and explanation. ❤❤

  • @ajay.rajputt
    @ajay.rajputt 7 หลายเดือนก่อน

    if anyone make searchbar in this project

  • @harshsaini7645
    @harshsaini7645 7 หลายเดือนก่อน

    Thanks bro!

  • @user-gj2tl9pr3b
    @user-gj2tl9pr3b 7 หลายเดือนก่อน

    Thanks brother❤

  • @Himanshu-kb6dr
    @Himanshu-kb6dr 7 หลายเดือนก่อน

    How to deploy this project bro ?

  • @priii25
    @priii25 7 หลายเดือนก่อน

    Why mongo db isn't used?

  • @luckylunar4468
    @luckylunar4468 8 หลายเดือนก่อน

    but removing some files shows error

  • @Entertainment_brooo
    @Entertainment_brooo 8 หลายเดือนก่อน

    sir i am facing issues nothing is displaying on browser. please respond me.

  • @yashu_vocalist
    @yashu_vocalist 8 หลายเดือนก่อน

    01:07:35 I am not getting Switch in react router dom. Could someone help me?

  • @pankaj_9998
    @pankaj_9998 8 หลายเดือนก่อน

    very useful tutorial. please make more such webapp videos. 😃

  • @techsupport424
    @techsupport424 8 หลายเดือนก่อน

    Thank you bhai it really helped me. But many things changed like useHistory is now useNaviagte and Switch to Routes. maybe be more. Make more such videos 😎

  • @yashu_vocalist
    @yashu_vocalist 8 หลายเดือนก่อน

    25:45 npm init -y

  • @fayizcj2529
    @fayizcj2529 8 หลายเดือนก่อน

    bro please add search bar and add favarate list

  • @nitinkrsingh409
    @nitinkrsingh409 8 หลายเดือนก่อน

    how you pass data as a movie in movie list to card both are siblling how we pass props in sibling?

  • @kavyagayaru1560
    @kavyagayaru1560 8 หลายเดือนก่อน

    really great explanation sir