Learn React, Typescript & Material UI With One Project | Build a Movie App in 90 Minutes

A lot of companies prefer to use React with Typescript as it offers static types which makes the code more readable and maintainable as compared to Javascript. So in this video we will build a Movie application using TypeScript, React and Material UI to style our app.
We will use Context Api for sharing data between components and useReducer Hooks to manage the state. The video will be more focused on building the UI of our application using Material UI and how we use Typescript instead of Javascript.

🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:20 - Project Demo
0:01:51 - Project Setup & Code Walkthrough
0:03:40 - Dependency Installation
0:04:50 - Mightymeld Studio Setup
0:10:38 - Prefabs Setup
0:12:43 - Pages Setup
0:14:56 - Routes Setup
0:18:00 - Build the App Layout
0:22:00 - Sidebar Component
0:26:53 - Sidebar Menu JSX
0:35:17 - Home Component
0:44:38 - Movie List Setup
0:46:34 - Movie Data & Interface
0:48:06 - Create Movie Context API & Interface
0:56:44 - Search, Recommended & Trending Filters
1:00:11 - Create MovieTrendList & MovieList Component
1:04:10 - Movie Card Setup
1:06:00 - Create MovieTrendCard Component
1:16:25 - Bookmark Movie Feature
1:18:50 - Create MovieCard Component
1:24:35 - Fix The Search Results
1:25:42 - Movies Page
1:27:55 - TV-Series Page
1:29:28 - Bookmarks Page
1:30:21 - App Feature Testing
1:31:36 - Outro

⭐️ GitHub link for Reference ⭐️

⭐️ Crash Courses ⭐️

⭐️ Social Media ⭐️

⭐️ Tags ⭐️
- Master React, Typescript, and Material UI With Project
- Create a Movie App in 90 Minutes with React TypeScript
- React, Typescript, and Material UI Tutorial
- React Typescript Project for Beginners
- React Typescript Material UI Project for Beginners

⭐️ Hashtags ⭐️
#react #typescript #materialui #project

Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[abdirahmanabdullahi]

Thanks. I was little bit challenging for beginners but very good video.

[pintae]

Amazing job with the content as alway!!!

[techsavy]

I play all other videos at 1.25x, but yours 0.75x
MM was overwhelming for newbie like me. :)
Cheers.

[lucksmith-wd]

Great effort, but this mightymeld stuff just went straight over my head. I was hoping for a nice TS MUI tutorial...

[pareshmetaliya]

Respected Sir,
You have created quality of content that cover all the concepts all react js for any beginners and very good explanation with project based learning,

Will you please just make a simple video of list out small projects that any beginners have to make for practice react concepts in step by step manner...
Just list out the small projects list with which we can practice all react concepts effectively ...

[bharathraj]

Hi, can you make one dedicated video on contact manger app how to connect frontend with backend.

[FrydFrenchhFrys]

Hi, I am new to React and I have a question regarding the router. So my understanding is that React is special because instead of creating multiple pages, you can simply change the components on a single page. Is there a reason why that was not done here?

[arsh_x]

@DipeshMalvia after hitting npx mightymeld command i don't see libary part which is show in video

[ismailbakhach]

why the scroll bard is still appear in my app, its not transparent

[fgvnsnv]

Bro you are showing the tv series on the Tv series page but in the Movies Page you are showing both movies and tv-series. You declared a state to achieve movies at this point how we can filter just movies except tv series

[rrkrockstarraja]

Please explain Vite, react, redux, typescript

[vqrpsut]

Why it wont navigate to other page it always shows login page i think i dont do any mistake

[mihaichildesco]

why dont you provide a starter project from github ? How should i follow along ? download the finished one start deleting files to start from scratch ? No, thanks!

[rentalabharadwaja]

head ache configs, beat around the bush

[ALOKKUMAR-jzdb]

create this one in nextjs 14 app router with material ui, typescript

[AnkushKumar-pxdp]

You made it too complicated by including MightyMeld. I was here just for react concepts and typescript. Instead of focusing on ui this video should have been more focused on react concepts and typescript. You lost me at MightyMeld installation. It was too difficult for a beginner