Full Stack Web Developer Masterclass - React - Next - Mongo

Builds single page web apps with fast load times as an open source JavaScript framework by Meta. Bundles HTML, CSS, and JavaScript with Webpack, tapping into a large GitHub community.

Explore the React folder structure, including the public and src folders, index.html and index.js entry points, package.json dependencies, and npm scripts to run and organize a React app.

Explore JSX as a blend of HTML and JavaScript, and learn how rendering and debugging work in a React app, including common errors and using React Developer Tools.

Discover what React components are, small, reusable blocks of code in a single JavaScript file. Create, export, and reuse components (like MyComponent) in App.js, use capitalized names, and JSX fragments.

Learn how props pass data from a parent component to child components in React, including passing, destructuring, and using the read-only children prop for wrapping content and reusability.

Discover why React streamlines dev workflow with readable code, reusable components, and a virtual dom that speeds updates and enables hooks.

Explore conditional rendering in React by displaying either a button or a header based on a condition, using if-else or the ternary operator.

Explore the component hierarchy in React, from index.js to app.js and nested components, learn prop drilling with props, and grasp reusability and future use of context for shared data.

Learn to use the useState hook to manage a counter state, handle onClick events, and update the counter with setCounter in a React component for dynamic UI.

Learn how the useEffect hook runs after state updates and how to control it with a dependencies array. Use it for API calls, data fetching, and updating state.

render lists in a to do list app with React by mapping state items, updating the list via user input and a spread operator, and using onChange and onClick events.

Learn how context in React replaces prop drilling by creating a global state handler with a provider and useContext, wrapping the app to share state across components.

Master the rule of hooks: use them only inside functional React components or custom hooks. Structure components with hooks first, then useEffect logic, then other functions, and finally return JSX.

Explore using the useRef hook to access and control DOM elements in React, replacing direct DOM queries with refs to focus, style changes, and value manipulation.

Learn how controlled components keep input values in React state using onChange, creating a single source of truth, and contrast them with uncontrolled components accessed via a DOM reference.

Boost the performance of your React app by using useMemo and useCallback to memoize values and functions, controlled by dependency arrays to prevent unnecessary rerenders.

Learn how to memoize a React component with React.memo to cache its render output and rerender only when props change. Boost performance by avoiding unnecessary rerenders of expensive components.

Learn how lazy loading and dynamic importing split a React app into chunks, load components on demand, and use suspense with a fallback to improve initial load times.

Learn how debouncing reduces API calls in React by delaying searches, improving performance for large apps, and implement a small search UI with a dummy API.

Explore React 18's automatic batching to update multiple states in one render, and learn useTransition for non-urgent updates that render after urgent ones.

Celebrate mastering key React optimizations and advanced techniques, then stay updated through official React docs and blogs from Medium, Dev.to, and the React blog community.

Explore how Next.js transforms React into a production ready, full stack framework with server side rendering and zero config bundling.

Explore the Next.js 13 directory structure, including the app directory, pages, public assets, and API routes, and learn how route layout, page.module.css, and global CSS organize your app.

Learn to create routes in Next.js with the app directory and page.js. Use dynamic routing with params and slug, and leverage search params for data in the URL.

Navigate between pages in Next.js using the Link component or the use navigation hook from next/navigation. Explore dynamic routes for course names and the project page, with prefetch.

This lecture explains Next.js layouts, including layout.js, wrapping pages with a dashboard layout, and nested and route group layouts, with examples of dashboard, user, and dynamic id routes.

Learn to structure Next.js apps with per-route files like head.js, loading.js, and error.js to customize titles, favicons, SEO-friendly meta tags, and loading and error handling.

Explore Next.js advanced rendering by comparing client side rendering, server side rendering, and static site generation, and learn data fetching patterns with client and server components.

Learn the differences between client side rendering (CSR) and server side rendering (SSR) in Next.js, and implement a client side component and a server side component.

Learn how to nest server-side and client-side components in Next.js by passing SSR as a child to CSR, applying the use client directive, and handling third-party libraries.

Explore data fetching in Next.js by contrasting client side rendering with server side rendering using client and server components, fetch API, loading states, promises and async/await, and caching.

Learn advanced data fetching in Next.js 13 by mastering caching and revalidation to balance fast cached responses with fresh server data.

Explore parallel, sequential, and streaming data fetching patterns in Next.js, learning how to fetch multiple APIs concurrently, sequence requests, and progressively stream data to the UI.

Explore dynamic data fetching and rendering with URL changes, fetch posts by id, and use Next.js static params to pre-generate routes for performant rendering.

Explore what next.config.js is and how to use it with Next.js, including redirects, base path, and common configurations like build indicators, eslint behavior, and custom webpack.

Explore inbuilt Next.js image and script tags, learn how automatic image optimization with width, height, quality, and fill modes boosts performance, and manage script loading strategies with Next/script.

Explore how to use Next.js hooks like router, back, forward, push, refresh, prefetch, use search params, and pathname to manage navigation and data flow.

Build a full-stack Next.js application from scratch, learning API creation, MongoDB CRUD, authentication with NextAuth, and deploying a live listing project using Material UI.

Explore Material UI, a production-ready component library for buttons and chips, and learn to implement it in a Next.js project. Start with setup, component APIs, and a signup page.

Create the signup page frontend in a Next.js app using Material UI templates, grid layouts, and text fields. Learn to manage client components, images, and responsive layouts.

Reuse the signup page to build the sign-in page, replace icons, remove the username field, and use an outlined button with filled inputs in a responsive grid with Next.js links.

Build a front-end listing page from scratch using material ui components like paper, typography, checkbox, and icon buttons, with separate list item and list input components.

Add static functionality to the listing page by implementing client-side state, input handling, item creation, rendering, and basic delete and check interactions before moving to dynamic storage.

Master adding static form functionality to the sign up page and replicate it on sign in by using a single state object with a universal handleChange for controlled inputs.

Learn how MongoDB enables create, read, update, delete operations with JSON, set up a MongoDB Atlas cluster, and connect your app to a users collection for a signup API.

Connect a Next.js app to MongoDB using an environment variable for the connection string, then build a signup API as a serverless function that stores user data in the database.

Learn to validate sign up data on the front end with empty, email, and password length validators, show snack bars, and post to /api/signup to store users in MongoDB.

Implement secure authentication by hashing signup passwords with salt using the triple js library, validate sign-in against the database, and share the authenticated user email via a global context.

Authenticate users by validating email and password via the sign in API, compare the password hash, and redirect to the listing page while persisting the email in session storage.

Protect routes with authentication and redirect to sign in, then store listing data via add, delete, and check item APIs using update one, dollar push, and dollar set.

Test the full stack app, implement sign out with session storage handling, enable edit items API for frontend and database update, and design the homepage.

Deploy your full stack app to production using GitHub and vercel, then sign up, create a repository, push code, configure environment variables and redirects, and deploy globally.

Learn how Next.js built-in SEO enables static and dynamic metadata generation, including page titles and meta tags. Implement open graph metadata to generate social previews and improve search engine optimization.

Learn the root handlers approach in Next.js, moving APIs into the app directory with route.js files, using method-based handlers (get, post) and Next response for dynamic data via slug.

Learn how to optimize package imports in Next.js by enabling experimental optimizePackageImports, and selectively import libraries like material to reduce bundle size.