Dive into an extensive 8-hour video tutorial covering advanced React.js concepts and related technologies. Master GraphQL integration, explore Next.js features like Static Site Generation and Server-Side Rendering, and learn to work with MongoDB. Gain hands-on experience with React Query for efficient data fetching, and enhance your UI design skills using Material UI components. Discover how to implement TypeScript in Next.js applications and deploy your project using Vercel. Conclude with guidance on further learning paths to continue your web development journey.
Overview
Syllabus
- Consume GraphQL API in Frontend
- GraphQL Mutations and Parameters in Graphene
- Mutations with useMutation Apollo Client
- GraphQL Nested Data
- Build a Nested Order Form Component
- Mutation for Nested Data Backend
- Add to GraphQL List and refetchQueries
- Intro to Next.js Static Site Generation + Server Side Rendering
- Routing and Parameters - Next.js
- Static Site Generation with getStaticProps - Next.js
- Call an API with Axios in getStaticProps - Next.js
- Incremental Static Regeneration - Next.js
- getStaticPaths Static Data Fetching Parameterized Pages
- fallback with getStaticPaths - Next.js
- Lazy Caching with getStaticPaths - Next.js
- Connect to MongoDB
- MongoDB findOne by ObjectID
- Create a GET API with MongoDB - Next.js
- Details API by Object ID MongoDB - Next.js
- POST a New Document MongoDB API - Next.js
- On-Demand Revalidation in Next.js
- Update and Delete API for MongoDB - Next.js
- Intro to React Query
- React Query Refetch Options and Dev Tools
- React Query Refetching Stale Data
- Data Caching in React Query
- React Query with Next.js Static Site Generation SSG
- Intro to Material UI
- Icons and Tooltips in Material UI
- Create a Website Theme - Material UI
- Navigation and Active Link Highlighting - Material UI
- Grid Styling with Material UI
- Data Grid Table with Material UI
- Filter Orders by Customer with DataGrid initialState - Material UI
- API for nested Objects and MongoDb ObjectId
- Adding TypeScript Types to Our Next.js Page
- Deploy a Next.js Application with Vercel
- Where do I go from Here - 10 Things to Learn
Taught by
Caleb Curry
