Part 2 | Full Stack Responsive React Movies App With API | MERN Project | React Tutorial
HTML-код
- Опубликовано: 13 июн 2024
- Hello friends. In this video, we continue build Fullstack Responsive Movie Website with MERN stack and Themoviedb. You can watch Part 1 here • Part 1 | Full Stack Re...
Demo: moonflix.vercel.app/
What are the features of this project?
- Sign up / Sign in
- Save movie to Favorite list (Remove favorite item)
- Write review for movie (Delete review)
- Search movies / tv series / people
- Light / Dark theme
What are the technologies in this project?
- Front end
- Create react app
- Material UI
- SwiperJS
- React router v6
- Formik
- Yup
- Axios
- Back end
- Express rest api
- Express Validator
- Jsonwebtoken
- Mongoose
- Axios
Don't forget to click the like button and share the video with your friends if you found the video useful.
Please support me by LIKE, SHARE and SUBSCRIBE, thank you!
---- CONTACT
Facebook: / trananh2001
Github: github.com/trananhtuat
---- SOURCE CODE
github.com/trananhtuat/fullst...
---- RESOURCE
Create React App: create-react-app.dev/
Material UI: mui.com/
Mongoose: mongoosejs.com/
ExpressJS: expressjs.com/
Express Validator: express-validator.github.io/d...
React Router: reactrouter.com/
Formik: formik.org/
Yup: github.com/jquense/yup
Axios: axios-http.com/
Swiper: swiperjs.com/
ThemovieDB: www.themoviedb.org
JWT: github.com/auth0/node-jsonweb...
---- TIMESTAMP
00:00 - Demo
04:42 - User Dropdown Menu
08:29 - Sidebar
25:53 - Sign In Sign Up Modal
35:39 - Sign In Form
56:05 - Sign Up Form
01:00:08 - Fix Toastify CSS
01:01:37 - Get User with JWT
01:08:30 - Circular Rate
01:12:05 - Hero Slide
01:51:02 - Movie Slide
02:03:24 - Movie Slide Item
02:30:39 - Image Header
02:34:29 - Media Detail
03:12:16 - Add Movie to Favorite
03:18:21 - Remove Favorite
03:21:55 - Movie Videos Slide
03:37:25 - Movie Backdrops Slide
03:43:21 - Movie Poster Slide
03:46:00 - Movie Recommend Slide
03:51:44 - Movie Review
04:30:13 - Media List Page
05:00:34 - Fix UseEffect Error
05:02:48 - Fix Meida query with Page
05:04:32 - Media Search
05:22:13 - People Detail Page
05:44:04 - User Favorite Page
05:58:39 - User Review Page
06:18:10 - Update Password
06:31:19 - End
---- MORE AWESOME VIDEOS
/ tuattrananh
----------------------------------------------------------------------------------
#tuattrananh #React #ReactJS #themoviedb #movies #reactmovies #reactmoviewebsite #JavaScript #JS #HTML #CSS #JavaScript #Ecommerce #slider #responsive #Darkmode #landingpage #landing #Redux #reactredux #reacthook #reacthooks #hooks #router #reactrouter #reactrouterdom #swiperjs #swiperreact #swiper
Wow, what a wonderful project. Thanks for your efforts!
❤️❤️❤️
All love for you and your process
Nice video. Thank you!💥👍👏
Wow, increible! Gracias por tu esfuerzo!
Nice video. This is exactly what current I need. Thank Anh Zai.
❤️❤️❤️❤️❤️
Đây là video giúp em học hỏi được nhiều hơn, cảm ơn anh nhé 😊
❤️❤️❤️❤️❤️
Project chất lượng quá a! ra nhiều video hơn nha a!
oke babe
oh my god it is wonderful gift for new year thanks bro
hope you enjoy it ❤️
I can proudly say I developed this without any help of this video just only the design
Awesome these React videos!!!
❤️❤️❤️❤️
That's what I was looking for.
Thank you So much Sir
❤️❤️❤️
Cool!
I don't believe this knowledge is free!! Cám ơn anh đã chia sẽ nó❤️❤️❤️
❤️❤️❤️❤️
😮thank u so much
Your content is just awsem !!.... BTW which theme you are using in VS code ??
More than great work, thank you !!
I have a question,
there is no control panel-dashboard (administrator)??
Very cool video. Please, please make an admin to CRUD content
anh có thể làm một video về cách xây dựng 1 trang web page builder được không ạ, cảm ơn anh nhiều vì đã tạo ra video này 😍😍
Thanks sir ❤️😘
Lần sau đổi mới làm dự án với typescript đi anh 😀
Hi! Very interesting project, a very high quality level. I would like to program sites and apps like you! But from which point to start? I need a very basic tutorial to start with. Which do you suggest? I want to learn Node and React of course at minimum. Thanks!
Please can you add part 3 ?
custom video player + Paid video hosting CDN to host website videos on it + admins, moderators panel and more ...
Thanks
Yes please add part 3 for more features
You're storing cookie on the localstorage as there is domain conflict (if I not wrong). However, this solution is not secure, so is there any better approach like deploy both front and back end on same domain?
cảm ơn a nhiều ạ ❤
❤️❤️❤️❤️
Đỉnh luôn anh. Mà hồi anh làm đồ án tốt nghiệp anh làm về đề tài gì vậy...em k bt chọn đề tài hướng nào đi hỏi lung tung th😁
A làm về cảm biến với rasperri nè e
cảm ơn anh nhiều ❤❤
Bạn ơi cho mình hỏi ở phút 19:27 tại sao lại phải dùng ListItemText có props disableTypography rồi lại bọc thêm thẻ Typo vào sử dụng vậy nhỉ? Mình thấy ko cần props disableTypography + bọc thẻ Typo thì vẫn ra chữ bình thường mà nhỉ? Mong bạn giải đáp, mình cảm ơn b
I am very surprised with your work, I am working on a web page like the one you show, but I still do not have the web player, could you help me with that? a web player similar to that of netflix or youtube, the important thing is that it has pause buttons, backward 10 seconds, forward 10 seconds, volume up and down plus the main video time bar. I don't know if you can do it with html, css, js or if you need to implement more languages
Anh có dự định làm về Nextjs ko ạ.?
cám ơn anh em tham khảo để làm niên luận :))))
good luck to you 👍👍
I have a doubt in sign in and sign up form that i couldnt move into other state as well as i couldnt signin and register into it please help me
On the heroslide file im not getting correct output can u please tell me how to get the correct output please give rply...
chào bạn,cho mk hỏi dự án của bạn có xử lý xung đột khi 2 user booking 1 vé không
Please help!
"failed to load resource the server responded with a status of 404 (not found)".
What am I doing wrong?
why when I download the file and I click on index.html does it just open a blank page?
nothing to say. Just read this link reactjs.org/
im getting error like failed to reload on the server side 501 how to resolve that
Sir when your Next video coming?
hey your video is great I have a question with your code can we add our own films and not extracts from youtube films or trailers ?
yes you can
brother even after connecting to my database ... i am not getting any data and still the data is going to your database.
Bro I had doubt can i Add a Creator from in it I want creators to have an option to upload just like youtube 🤔🤔🤔
Edit: If you have any idea then please help :")
is it a recommendation sys as well? like shown movies accordingly to the user behavior ?
It doesn't have recommendation system
cảm ơn bạn rất nhiều, bạn có thể hướng dẫn thêm chỗ play và thiết lập player được không
please tell me how do i download and install this and view or edit this one please tell me?
I m getting cannot read properties of undefined (reading 'data') in sign in option someone help me
Did you got any solution for your problem?
can i watch the movie when i click watch video here?
Sir your next Project Topic?
Sir make a project on E-commerce app using MERN Stack.
3:28:00 mấy cái class đó là mình tự đặt hay là sẵn ở trong mui v bác
mấy class đó của swiper nhé
Amazing 🤍🤍🤍
Hey how to make admin panel of it??
anh có thể làm tiếp part 3 về trang của admin để quản lý dữ liệu + đăng ký tài khoản có phí được không ạ?
How to deploy this on VERCEL?
can we play movies on it????
If I do not to sign in, I get nothing when i click into any media detail page,
I thought that due to get media detail is using privateClient,
but I found out your demo work normally when I don't sign in, I don''t know why
in getmedia detail route, check if you validate token
@@tuattrananh I found I made some mistake in media controller, thanks a lot
Anyone else got this problem: I can signup a user it goes in the database but when i try to sign in with that user i get an error 500
can you share error message?
How to get High quality backdrop poster?
Does the film play ? Or it’s only design
It just show info of movie, API do not include film video source
anh ơi cho em hỏi, hiện tại thì e đang làm đến phần MediaDetail, thì phía backend phần token đang bị false, do cái bearerHeader đang bị undefined (em không biết sao nhưng mà cái route getDetail lại không get được header authorization) nên không thể set thuộc tính isFavorite cho media được kéo theo việc không hiển thị được icon trái tim màu đỏ, nếu được mong a cho em xin hướng giải quyết với ạ
e xem lại cái api gọi detail ở client có dùng privateClient để gọi không nhé
@@tuattrananh dạ được rồi, em cảm ơn anh nhiều lắm ạ
sao anh không làm từ lúc khởi tạo project như ở phần 1 anh :/
cái này tiếp theo phần 1 mà e. Khởi tạo project gì nữa?
Great job ! How did you deploy the app?
deploy tutorial here ruclips.net/video/YYmzj5DK_5s/видео.html
Thanks)
Sir when your next project dropped on RUclips?
may be next month, I am not sure
@@tuattrananh Project Topic?
part 1 and part 2 is same true or false
Anh ơi cho e hỏi cái này Backend là Nodejs hay là gì vậy ạ?
nodejs nha
@@tuattrananh vâng, cảm ơn a
how to deploy merns stack project to the vercel ?
ruclips.net/video/YYmzj5DK_5s/видео.html
@@tuattrananh thanks, I will watch later :D
Does this project have an admin page?
It does not have admin page
@@tuattrananh Tiếc quá, có là pớ phẹc dồi :)
@@tuattrananhcan it be created for part 3
Have one question does the movie plays
Its only Trailer video. API does not include movie's video source
Thanks for letting me know btw love your content
hoàn thành chưa a ơi
Hi pelase accept my apology for bothering you i have problem when i am sign up it is not creating user in server database if you have any idea about my issue? but server is creating 3 collections in database while signup it is not creating any user data in db
after signup user Menu is not showing even sign in after refresh page only sign in is appearing on top bar
Bro I fixed the problem
@@kainorling7418 How can u tell me please :)
I am unable to connect my mongodb to server any idea ? like what should i paste in .env file?
@@kainorling7418 hey buddy please can you tell me how you fixed the problem? It's urgent :(
Where is user data saved?
user data is saved to MongoDB
Please reply