Next.js 15 Full Stack Complete Learning Management System

Learn React.js fundamentals, focusing on a component-based architecture with reusable UI components and shared headers. Set up Node.js and VSCode to run and build apps that load data via APIs.

Create a React app using Vite by installing Node.js and Visual Studio Code, running npm create vite, selecting React and JavaScript, then installing dependencies and starting the development server.

Run and build your react project using npm run dev to start the development server and npm run build to generate the production distribution folder for deployment.

Discover the basic react project structure, including index.html with a root div and the src folder. Learn how App.jsx and main.jsx host components, with CSS and assets.

Organize your React project by restructuring src into pages and components, assets into css and images, and public with svg icons, while cleaning auto-generated files.

Discover essential VS Code extensions for React development, including auto close tag, auto import, ES6 TS/JSX, auto rename tag, ESLint, npm intelligence, path intelligence, Postman, Prettier, and Tailwind CSS intelligence.

Create and render functional components in React.js using VS Code shortcuts, build app and demo components, and render input fields and a submit button.

Create and integrate header, hero, contact, and footer components into the app, demonstrating component-driven layout, imports, and rendering on the home page in a react/next.js project.

Learn JSX conventions and how JSX blends JavaScript with HTML-like syntax, build components with a single parent, and apply camelCase attributes and inline styles.

Explore JSX shorthand for if-else in React.js and implement conditional rendering with a live example, using a mark variable to show boolean and average results.

Learn to use an immediately invoked function expression in jsx, including anonymous functions, if-else logic, and returning values to render grades in a Next.js app.

Show how to render a JSX loop using the map function to display a city array (Dhaka, USA, India, Chittagong) as a list with keys and iteration indices.

Explore JSX conditional rendering in Next.js by using if/else, switch, ternary, logical and, and an immediately invoked function to toggle login and logout buttons based on user status.

Master conditional rendering in JSX by implementing a switch statement to display either a logout button or a login button based on a status flag, with default and null returns.

JSX conditional rendering with the ternary operator by toggling a status variable to show a logout or login button, and see how it simplifies inline if-else logic.

Explore jsx conditional rendering with the logical and operator to show content only when a condition is true, using a login status and logout button example, with no else branch.

Discover how to use an immediately invoked function in JSX to implement conditional rendering, toggling between logout and login buttons based on status, in the Next.js 15 full stack course.

Learn how props, short for properties, pass data from a parent component to a child component in a Next.js 15 app, with unidirectional flow and read-only data.

Explore passing data from a parent to a child component with props in a Next.js 15 app, including title and description rendering in a hero component.

Learn how to pass object data through props from a parent to a child component in Next.js, including an object with name, age, and city.

learn how to pass a function from a parent to a child component as a prop, trigger it on a button click, and display an alert such as hello Adrian.

Learn on click event handling in a Next.js app by wiring a submit button with onClick in camelCase, triggering alerts like 'click' and 'hi' using array and regular functions.

Learn to manage form submissions in React JS by preventing default page reload, wiring an onSubmit handler with an arrow function, and displaying a submit confirmation alert.

Learn to install React Router Dom and configure browser router with routes and elements for home, about, and contact pages, plus a not found page for unknown paths.

explains how to create a navigation menu with Link and NavLink from react router dom, highlight active routes using isActive and css classes for home, about, and contact pages.

Learn the key differences between browser router and hash router in React Router Dom, including URL hash behavior, history API use, and deployment notes about access file configuration.

Pass parameters via navigation by sending id and name to the about route and display them on the about page using useParams from react router dom.

Learn how React hooks manage state and side effects in functional components, using useState, useEffect, useContext, and useRef, with live examples and step-by-step explanations.

Explore how to use the useRef hook to access and modify a DOM element's inner text and inner HTML, with live examples of on-click updates and avoiding re-renders.

Learn to dynamically update an image’s src and other attributes in Next.js 15 using useRef and a reference, including setAttribute for height and width with live examples.

Master useRef with input elements to capture first and last name values on click, display them in an alert, and manage multiple refs with array-based targeting.

Explore using the useRef hook to manipulate CSS classes in a React app by installing Bootstrap, importing styles, and toggling a headline from text-success to text-danger on click.

demonstrates use ref caching of an expensive computation by storing API data and reusing it on subsequent renders, with fetch API and show data actions.

Discover how use state stores component data and triggers automatic re-render when data changes. Learn to connect state memory to the user interface, with increment and decrement actions via click.

Learn to manage an object with useState and immutably update specific keys using the spread operator, with an on click example updating RN1 and RN2.

builds a simple to-do app using useState with an immutable array, handling input, updating the list with a spread operator, and rendering items in a table with a remove button.

Learn to manage an immutable array with useState by adding and removing items in a dynamic list, using index-based removal, push, splice, and setList to reflect changes.

Demonstrates managing a form with useState by building a fields object for first name, last name, city, and gender, updating values on change, submitting, and styling with bootstrap and milligram.

Explore useState-driven form management in Next.js 15, handle onChange to update a form object with first name, last name, city, and gender, and submit with preventDefault for console logging.

Explore how useeffect runs when a component mounts and when its dependencies update. Learn the two arguments—the callback function and the dependency array—and how they enable data fetching and re-renders.

Learn to fetch API data with useEffect, handle promises, parse JSON, and store results in state for display in a Next.js 15 full stack course.

Learn to fetch API data inside a useEffect using async/await, compare it with promises, implement an immediate invoked function, convert response to JSON, and update state.

Download and install Node.js from nodejs.org, a free cross-platform JavaScript runtime, then verify with node -v. Install Visual Studio Code and extensions like auto close tag and auto rename tag.

Discover what Next.js is and why to use it as a React-based framework by Vercel, offering server-side rendering and static site generation out of the box.

Compare React.js and Next.js: React.js is a client-side JavaScript library for building UI, while Next.js is a React-based framework offering server-side rendering, static site generation, and file-based routing.

Learn to create a fresh Next.js app with npx create next app, set up tailwind CSS, organize with src and app root, and run development and build commands.

explore the next.js file structure, including the next folder, src app, public assets, and Tailwind CSS setup, and how npm run build prepares production deployment.

Explore the primary page concept in Next.js 15, building functional components within the app folder and root layout, and generating routes from page.jsx files for home, about, and profile pages.

Explore loading static assets in a Next.js project by placing images in the public/images folder and referencing them with an image tag, including alt, height, and width.

Learn to use global CSS across a Next.js project via the layout. Apply module CSS for component-scoped styles by importing CSS modules and using class names.

Explains client side rendering in Next.js with an example that fetches dummy JSON data using useEffect and useState. Contrasts this with server side rendering, where the server delivers rendered HTML.

Compare server side and client side rendering in Next.js 15, showing how to fetch data on the server with an async function and render JSON to HTML.

Discover when to use server components for data fetching, backend access, and protecting keys, and when to use client components for interactive events and browser APIs in Next.js 15.

Discover when to apply server side rendering vs client side rendering in Next.js 15, and how the use client directive enables on click listeners and mixed rendering.

Explore how Next.js routing works by mapping routes to app folder structure, using page.js files for home, about, contact, and admin pages, and handling 404s and nested routes.

Explore nested routing in next.js by building folder-based pages such as brand, Apple, and iPhone, each with page.jsx components to demonstrate how routes load automatically.

Learn to build a reusable navbar with Next.js link across home, about, admin, and contact pages, wire nested routes like brand/apple/iphone, and load the menu component on every page.

Learn to implement a routing progress bar in Next.js by installing and integrating the next in progress bar package in the app layout, configuring color, client rendering, and snippet options.

Learn to implement active link styling in a Next.js 15 app by adding active and pending link classes in global CSS and applying them with the current path using usePathName.

Explore passing query parameters with Next.js link by forming a path name and query object, including name and price, then read and display them on the about page using useSearchParams.

Learn to read and display link query data with use search params in next.js navigation. Pass name and price as query properties and handle client-side rendering.

Learn how Next.js link properties replace and prefetch control navigation behavior, browser history storage, and data fetching, enabling faster pages while preventing unwanted caching.

Master programmatic routing in Next.js 15 with the useRouter hook, including push, replace, refresh, back, forward, and prefetch, plus passing parameters via queries.

Choose server components in Next.js 15 for data fetching and database operations to keep sensitive calls on the server. Balance server and client components to optimize security, performance, and SEO.

Discover why and how to use client components in Next.js 15 for interactive features with on click and on change events, using use client, and understanding pre rendering and hydration.

Discover how to configure base paths and environment variables in Next.js using next.config.js/mjs and .env files, and learn when to expose API keys safely in server components.

Configure headers in Next.js 15 using an async headers function to pass key-value data to routes such as home and about, and verify requests in the network tab.

Configure header security in your Next.js project to prevent clickjacking by applying x-frame-options. Enforce a content security policy that uses self for script and style sources.

Learn header security in next.js 15 with content-security policy and permission policy to manage camera, microphone, geolocation, battery, and browsing topics; enable strict transport security with https and subdomains.

Configure next.js header security with the X content type option to control downloads, hide the X powered by header, and manage page extensions JS/JSX and the production build directory dist/build.

Learn how to configure Next.js connection keep-alive and http agent options to reuse backend connections, and enable gzip compression for rendering content and static files.

Learn how to implement Next.js image optimization, load images from local assets and third-party domains, and configure domains in Next.js to enable optimized delivery and format conversion.

Learn to optimize fonts in a Next.js app by importing Google fonts, configuring Roboto with Latin subset and weights, and applying it globally via a CSS variable and body class.

Learn how to load fonts in a Next.js 15 project, switching from Google fonts to a local Sunshine Tropical font. Configure the font family in your project and CSS.

Load a CDN script in Next.js by importing a script into the main layout and setting its src to a CDN link such as axios or bootstrap.

Learn how Next.js middleware intercepts requests, applies authentication and authorization checks, and redirects or rewrites based on conditions to admin or home pages.

Explore middleware setup in Next.js 15, handling next, redirects, and the requested URL to route to about, home, or contact pages with includes and matchers.

Learn how to customize Next.js 15 not found pages by creating not found.js, using server or client components, and fetch data to show the current path in a 404 page.

Explore MongoDB fundamentals in this module of the Next.js full stack course, a flexible, open-source, non-relational database that uses a document model and elastic storage for scalable apps.

Install MongoDB community server on Windows, configure system path, verify installation in PowerShell, and connect with MongoDB Compass to localhost:27017 for local databases.

Create an Express.js project, install mongoose, and connect to a MongoDB server using mongoose.connect with then and catch. Log 'database is connected' on success and display errors on failure.

Explore how MongoDB represents data as documents, collections, and databases, and build schemas and models with Mongoose to define fields like name, age, is married, salary, and gender.

Create and save user data in a MongoDB database using a Next.js 15 full stack approach, including schema creation, model instantiation, async save, and verification via console logs.

explore querying a mongoose-based user table in a Next.js project, importing JSON data and using find, find one, and find by ID to filter by is married and salary.

Explore advanced MongoDB queries with find, select, sort, limit, and count documents; learn filtering by is married false, selecting fields like name and salary, and ordering results.

Explore MongoDB comparison operators: equal, not equal, greater than, greater than equal, less than, less than equal, and in, through hands-on age and salary queries using the find method.

Explain the and and or operators in complex queries, showing how or returns data when any condition matches and and requires both conditions, with examples using is married and age.

Execute advanced mongodb queries to find users over 40 or unmarried using the or operator, with $gt and is married false, then select names and sort by name.

Update a MongoDB document by id, modify the is married field from false to true, and save the updated user data in the database using Node.

Discover how to update a document by ID in MongoDB using find by ID and update, modify fields like age and is married, and enable run validators.

Learn to delete documents in MongoDB using delete one and delete many, by specific id or by is married false condition, with practical Node server examples.