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
⭐️ Node.js: The Complete Guide to Build Backend Projects [2023] ⭐️
Link - www.dipeshmalvia.com/courses/...
⭐️ GitHub link for Reference ⭐️
github.com/dmalvia/React_Type...
github.com/mightymeld/mightym...
⭐️ Mightymeld Docs - docs.mightymeld.com/
⭐️ Support my channel - www.buymeacoffee.com/dipeshma...
⭐️ Crash Courses ⭐️
🔗 Nodejs Crash Course - • Learn Node.js & Expres...
🔗 React Crash Course - • Learn React JS with Pr...
🔗 JavaScript Crash Course - • JavaScript Tutorial fo...
🔗 HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
🔗 CSS Crash Course in 1 Hour - • CSS Crash Course For A...
⭐️ Social Media ⭐️
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ 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.

[@abdirahmanabdullahi1966]

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

[@pintae8681]

Amazing job with the content as alway!!!

[@DipeshMalvia]

Thanks!

[@pareshmetaliya6214]

​@@DipeshMalvia 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 ...

[@silvanageorgioska9717]

The Best !

[@alexanderkomanov4151]

Thanks a lot!

[@DipeshMalvia]

You're welcome!

[@pareshmetaliya6214]

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 ...

[@pareshmetaliya6214]

❤

[@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?

[@bharathraj4545]

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

[@silvanageorgioska9717]

Super!!!

[@DipeshMalvia]

Thank you! Cheers!

[@mihaichildesco8276]

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!

[@user-fg6vn6sn9v]

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

[@ismailbakhach8990]

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

[@rrkrockstarraja3425]

Please explain Vite, react, redux,typescript

[@user-xc4tv7mi9t]

It'a 2024 why use cra?

[@rentalabharadwaja8013]

head ache configs , beat around the bush

[@ALOKKUMAR-jz7db]

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

[@AnkushKumar-px9dp]

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