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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.