Part 1 | Full Stack Responsive React Movies App With API | MERN Project | React Tutorial
HTML-код
- Опубликовано: 31 май 2024
- Hello friends. In this video, we are going to build Fullstack Responsive Movie Website with MERN stack and Themoviedb.
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
02:48 - Setup Project
09:45 - Create Axios Client
10:37 - Create TMDB Client
22:55 - Create Models
33:17 - Create Handlers
38:15 - Create Token Middleware
42:15 - User Controller
53:29 - Media Controller
01:05:43 - Favorite Controller
01:11:09 - Person Controller
01:13:34 - Review Controller
01:18:56 - User Route
01:37:26 - Media Route
01:39:39 - Person Route
01:41:02 - Review Route
01:47:05 - Setup Front end Project
01:53:18 - Folder Structure
01:54:10 - Api Service
02:24:16 - Redux Features
02:35:53 - Make Utils
02:37:15 - Configs Theme
02:45:31 - Configs UI
02:51:03 - Configs Menu
02:56:46 - Custom Hooks
02:57:56 - App Layout
03:08:39 - Routing with React Router v6
03:26:17 - Global Loading
03:34:19 - Footer
03:46:38 - Header
04:03:47 - User Dropdown Menu
04:16:29 - End Part 1
---- 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
Some error will be fixed on part 2. Sorry about that ❤❤
ruclips.net/video/Q_uLi4f27Lc/видео.html
Very cool video. Please, please make an admin to CRUD content
cound u help to set spanish lang?
hey bro can you contact me?
What can i replace in baseurl
@@user-sn1vk3bo3c help me to solve error
Đỉnh quá bác. Mong bác ra nhìu video nữa nhé. 🥳🥳😍😍😍
I can't believe this is a free content, I really appreciate your work man, thank you for this amazing content, wish you the best in your career!
Thank you ❤️❤️
your code writing style is awesome thanks for your valuable lessons
I'm starting the project today, I'm excited! thanks for sharing your knowledge
❤️❤️❤️❤️
Have you completed this project
this is the best movie website I have ever seen, thank you so much!!!
❤️❤️❤️❤️
Thank you! Great video👏👏👏
❤️❤️❤️❤️
Hello brother, I really appreciate your time and effort to create such an amazing videos for us to learn and improve our skills. But sometimes, we find it difficult to understand various things. It will be very helpful for us, if you can explain the things/concepts side by side. So, that we can also do it by ourselves. KEEP UP THE GREAT WORK❤❤
❤️❤️❤️
Have you completed this project
@@RohitYadav-yt7rryes, I have completed this project, but I have not followed the whole tutorial, I just learnt few basics like folder structure, api, etc and implemented the rest according to my requirements.
Em rất thích cách mà anh xử lý trong project mặc dù chỉ hiểu 80% ,mong anh ra nhiều video về TypeScript❤
❤️❤️❤️❤️
Very nice, thanks , just comment for you, bro :)
Thank you from Uzbekistan 🔥🔥🔥
❤️❤️❤️❤️
Great video! 💯👍
Thank you
Dường như đây là toàn bộ kiến thức bạn đi làm phải không!quá hay!
❤❤❤
Thank You so much sir! From Indonesia
❤️❤️❤️❤️
🙏🏻🙏🏻Thank you
tuyệt quá anh ơi, hihi
❤️❤️❤️
đỉnh quá anh
Nice anh
❤️❤️❤️❤️❤️
Hay quá ah
❤️❤️❤️❤️
Video anh rất hay ạ, em có thường theo dõi kênh anh và thấy rất hữu ích ạ. tuy nhiên việc code theo có thể dẫn đến vài phần khó hiểu, anh có thể làm video dạng vừa giải thích vừa code được không ạ.
thank you bro !
❤️❤️❤️❤️
Buddy, I appreciate your hard work and dedication for making this wonder piece of art. Hats off to you. I just want to know what are the fonts and theme that you are using in vs code, and It is a request to please explain the code in the future projects, it would be highly helpful. Thank you for efforts
Have you completed this project
with everything you do there you must work at NASA. My respects!
Anh có thể chia sẻ thêm nên học những gì để có đạt lên cái style viết như a không ạ em cảm ơn
Great Work Boss, but please while you write a certain piece of code just show the output or explain it !!
Anyways Thanks
When i try adding the libraries i cant get the nodemodules or the json
pls help, is at the begining
I really like your video and started creating watching the video. It would be highly appreciated if you can talk and explain us the process.
hay anh ơi
❤️❤️❤️❤️
Hello i love u content, please can u share u vsc theme? thank u!
To be honest I really don't know what's going on and I'm trying to create a movie website what is that your using at the beginning?...and thanks for the video🥰
Please make E-commerce project using MERN Stack
@tuattrananh kindly reply how to fix ssl errors? the api fails if i use https instead of http. while its fine in local, in production we cant continue because vercel backend fails. Please please help.
Brother you explain what you code then your subscriber increased
Hi Tuat Tran Anh, i follow your code but i have a problem with connect Mongodb. Do you have any idea to solve my problem?
cho mình hỏi mediaType gồm có bao nhiêu type và bao gồm những gì, mediaCategory bao gồm những gì với b. Mình có tìm hiểu qua thì mediaType sẽ có là all, movie và tv. Còn mediaCategory thì mình chưa biết, mong bạn giải đâp
Im still learning react, and i wanna cry seeing this video
keep learning bro
@@tuattrananh can u share with me how much time it took for u to master all of this stuff bro?
Bạn làm clip setup extension và setting như vs-code của bạn đc không ?
8:44 what is the shortcut for this?
I really need of this please help me to know that how can i see and edit it because whenever I open index file its show nothing.
Hello Sir! My name is Abdullo and I'm from Uzbekistan. I don't speak English, so I'm using a basic translator to write these words. I really liked the design of your website, and I want to make some modifications myself to put it on Google. Do you mind if I do this? I would greatly appreciate your response. Thank you!
cách để điền dấu chấm phẩy tự động giống anh là dùng phím tắt gì vậy a
@Tuat Tran Anh bro please tell me can we add movie download button and advertising banner on it❤
Can i ask a doubt in this website if a user need to upload a new movie post what will he do
hello, thanks for your video, I need your help, how to get string url mongodb format?
pls make guide on just anime
hi brother i have a error in server loading I'm getting the error as yarn start as nodemon app crashed waiting for file system changing what do here someone help me
i had some errors call""Cannot read properties of undefined (reading 'data')" idk why ,is there sth wrong with my api ???
were you able to solve it?
Can You give rating? Or does it come from api TMDB?
cách code rất hay anh
Brother i connected it to my db still showing old data how ?
anyone please help how to get the mongodb url ...this is your localhost ip how to link my own
Hello Sir, I really appreciate your effort to create this amazing videos for us to learn and improve our skills. But when i try to use this app code locally, i find always the same error on my browser "Oops! Something worng!". When i show the atlas mongodb database, the user is perfectly created but i always get this error also when i try to Sign in. Can you help me to skip this error ??
Hello sir, i'm a beginner and i wanna ask you something. When i run yarn add, why my node_modules didn't show In my server folder. There's no error, just warning your project contain lock files generated by tools other than yarn. I'm so confused. My version of Yarn is 4.0.2
Have you got the solution?
Hiện tại a đang là middle hay senior v ạ?
what keyboard do you use ?
is it containing video streaming??
hello do you have class diagram? or erd database
Cho em hỏi phần này có tác dụng gì vậy anh
route.index ? (
) : (
)
Hy everyone i need a small help .like i have a movie name from IMbd api. So i just want to check that how many OTT plateform that movie is available and what it's price and show this in my frontend (both platform & price)
Can this be used commercially, sir?
Where to get movie api ?
uh hey how to did you solve the error i still dont understand
Is it play like other app?
This is best project i have ever seen , could you please explain the model and its purpose
const modelOptions = {
toJSON: {
virtuals: true,
transform: (_, obj) => {
delete obj._id;
return obj;
}
},
toObject: {
virtuals: true,
transform: (_, obj) => {
delete obj._id;
return obj;
}
},
versionKey: false,
timestamps: true
};
export default modelOptions;
thanks in advance
toJSON and toObject is for delete _id in result
versionKey: false is for remove _v in reuslt
timestamps: true is for add createdAt and updatedAt in result
How do you start the project on react.
Anh nghĩ sau mỗi task anh nên tab sang web review lại ạ
Would you like to add save favorite and remove favorite items. Plz
It is already in part 2
ruclips.net/video/Q_uLi4f27Lc/видео.html
How Can I edit this Code for my Project puppose
Where you get that MONGODB_URL ?
Create mongodb collection
.env
@@AmanThakur-ke1is
Where can I get the API keys I got error
@@sarabibrahim8312 Tell me in detail which error occurred.
@@AmanThakur-ke1is what can i replace baseurl
Sir can you create this in flutter?
This should be like ultra paid content ngl
please bro, what's this vs code theme which you are using, I thought it was one dark pro but it's not, could you tell us
marketplace.visualstudio.com/items?itemName=MaoSantaella.night-wolf
THANK YOU!@@tuattrananh
Bro when I replace the base url from public and private client to my localhost port, the app crashes. Why is it hapenning.
Same bro is the error resolve or not
Yes I resolved it back then. I don't remember exactly how I did it. But do some debugging, the app still couldn't redirect the requests to your localhost. In my case the problem was in either package.json or env file (at least that's what I remember). Try it if it dosen't work maybe i can check.
@@S.Saurabh_ yes please you can check because monday is submission day
@@S.Saurabh_ how can i contact you
@@S.Saurabh_ bro can you help??
Can we put this kind of projects on our resume for a software developer role?
of course yes
cho mình hỏi thao tác như thế nào để chèn nhanh ; cuối dòng nhỉ
cài đặt trong vscode nhé bạn, lưu file là tự động chèn ;
ko có giao diện admin à bro
Is this a mobile application ? Or website ?
It is website with responsive support
why you use http to create server not app.listen?
server = http.createServer(app)
then
server.listen(...)
Anh Tuat có khoá học không ạ
ko e ơi
Anh dậy đỉnh zayy mà không có khoá học bùn quee ạ 🥹
What can i replace in base url
get base_url from themoviedb api page
@@tuattrananh yes I try it but not working
We can already watch movies from that?
This project is completre free or paymmt
3:39 what did you did at terminal
yarn : The term 'yarn' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of
the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ yarn add axios cookie-parser cors dotenv express express-validator js ...
+ ~~~~
+ CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException i am getting this error
you need to install yarn first
npm install -g yarn
@@tuattrananh npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling
of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ npm install -g yarn
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Không có cách setup ban đầu với Mongodb ạ anh
cài mongodb vào máy rồi thêm connection string vào env thôi em
@@tuattrananh Sao em thêm connection string từ cloud của mongo lại không được anh nhỉ, sign in nó chỉ lưu data xuống thoi anh ạ, chứ k cho vào Home
@@tuattrananh Em run local server BE vẫn truy vấn đc api tuy nhiên login sign in nó bị 500 a ạ
1:56:49 how you got baseURL
localhost:5000
where do I get the mongodb url?
After install mongodb in your PC, connection string will be mongodb://127.0.0.1:27017/
www.mongodb.com/basics/mongodb-connection-string
@@tuattrananh okey thx broo🔥
How to run this project? Somebody please help
first register TMDB account and get API key, then clone completed project from github or do step by step like video
@@tuattrananh after getting API key, just add it to env variable.. then what command I have to give to start development server??
Is it just like npm install and npm start or something else? Please tell me dude!
Brother I connected it my db still getting old posts of users ...and their account do u know how to tackle it @@Tamilarasi-yf8fp
sir give back end url
What's your mean?
put your own mongodb url from the driver mongo connect
cho em hỏi là gửi request tầm bao lâu thì có key api của trang TMDB vậy ạ
đăng ký tk là có key liền mà
@@tuattrananh vâng ạ, lúc đầu em đk nhầm pro nên k có :3
@@tuattrananh bro please tell me can we add movie download button and advertising banner on it❤
err: MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.
at NativeConnection.Connection.openUri (/mnt/c/Users/Usuario/Desktop/Downloads/fullstack-mern-movie-2022-main/server/node_modules/mongoose/lib/connection.js:695:11)
at /mnt/c/Users/Usuario/Desktop/Downloads/fullstack-mern-movie-2022-main/server/node_modules/mongoose/lib/index.js:414:10
at /mnt/c/Users/Usuario/Desktop/Downloads/fullstack-mern-movie-2022-main/server/node_modules/mongoose/lib/helpers/promiseOrCallback.js:41:5
at new Promise ()
at promiseOrCallback (/mnt/c/Users/Usuario/Desktop/Downloads/fullstack-mern-movie-2022-main/server/node_modules/mongoose/lib/helpers/promiseOrCallback.js:40:10)
at Mongoose._promiseOrCallback (/mnt/c/Users/Usuario/Desktop/Downloads/fullstack-mern-movie-2022-main/server/node_modules/mongoose/lib/index.js:1288:10)
at Mongoose.connect (/mnt/c/Users/Usuario/Desktop/Downloads/fullstack-mern-movie-2022-main/server/node_modules/mongoose/lib/index.js:413:20)
at file:///mnt/c/Users/Usuario/Desktop/Downloads/fullstack-mern-movie-2022-main/server/index.js:22:10
at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
at async Loader.import (internal/modules/esm/loader.js:178:24)
Excuse me on .env I added my mongodb version and API database key but it still gets errors when i write yarn start
pls help
PS C:\Users\ibera\OneDrive\Desktop\Nová složka> yarn start
yarn run v1.22.19
$ nodemon index.js
[nodemon] 3.0.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node index.js`
{
err: MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.
at _createMongoClient (C:\Users\ibera\OneDrive\Desktop\Nová složka
ode_modules\mongoose\lib\connection.js:804:11)
at NativeConnection.openUri (C:\Users\ibera\OneDrive\Desktop\Nová složka
ode_modules\mongoose\lib\connection.js:741:29)
at Mongoose.connect (C:\Users\ibera\OneDrive\Desktop\Nová složka
ode_modules\mongoose\lib\index.js:404:15)
at file:///C:/Users/ibera/OneDrive/Desktop/Nov%C3%A1%20slo%C5%BEka/index.js:19:10
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
}
[nodemon] app crashed - waiting for file changes before starting...
you should put your own mongo db driver url
Hey bro awesome work!! Can you contact me i want some help❤
Bro you completed the project
hey bro can you contact me ? i want help so muchh thanks