Next.js & React - Build Full Stack News Portal Application

Discover React.js fundamentals, a component-based library for building reusable UI pieces, and learn to create interactive news pages that load API data efficiently with Node.js and VSCode.

Create a new React app using Vite by running npm create vite, selecting React and JavaScript, then install dependencies and open in Visual Studio Code to develop and build.

Run and build your react project using npm run dev, npm run build, and npx, generating a development server URL and a production distribution folder.

Explore the basic react project structure, from the index.html root and src components to app.css, main.jsx, and public assets, guided by package.json scripts and dependencies.

Organize a React project by restructuring into assets (images and css), a source folder with pages and components, and a public folder for svg icons, enabling live reload during development.

Discover essential Visual Studio Code extensions for React development, including auto close tag, auto import, ESLint, Prettier, npm and path intelligence, Postman, and React code snippets.

Master building functional React components for a Next.js and React full-stack news portal by using VS Code extensions and code snippets to scaffold, render, and manage components.

Create header, hero, contact, and footer components, render them on the home page, and learn to import and assemble a component-based layout in a Next.js and React app.

Learn how JSX extends JavaScript to write HTML-like code in components, explain JSX conventions such as single parent element, fragments, self-closing tags, className, camelCase attributes, and inline style as objects.

Learn how to use JSX shorthand for if-else in React to conditionally render results (brilliant result or average result) based on a mark value.

Demonstrates how to use an immediately invoked function within JSX, employing anonymous functions and if-else logic to render dynamic grades and values.

Master rendering a JSX loop by mapping over a city array (Dhaka, Ithaca, USA, Delhi, Chittagong), accessing each item, and displaying it with a key and its index.

Explore how to implement JSX conditional rendering in React using if-else, switch, ternary, logical and, and IIFE to toggle login and logout buttons based on user status.

Explore JSX conditional rendering with a switch statement, using a status variable to return logout or login buttons, with a default null case, contrasting with if-else.

Learn JSX conditional rendering with the ternary operator to display a logout button when status is true and a login button otherwise, with default true and live examples.

Explore jsx conditional rendering with the ternary operator and the logical and in react, displaying content only when status is true and showing nothing otherwise, exemplified by a logout button.

Explore conditional rendering in JSX with an immediately invoked function expression. Use a status to render a logout button when true and a login button when false.

Learn how props pass data from a parent to a child component in a unidirectional flow. Understand read only props and the roles of hero and hero image components.

Pass data from a parent component to a child using props, render the title and description in the hero component, and explore passing string values, arrays, objects, and functions.

Learn how to pass an object from a parent to a child component via props, passing fields like name, age, and city, and render them in the child.

Learn how to pass a function from a parent to a child component in React, using props and on click to trigger an alert.

Explore how to handle onClick events in React by wiring a button to alerts, passing functions via props, and choosing between inline arrow functions, named functions, and function references.

Discover how to manage form submission in a React app by preventing the default page refresh, using onSubmit with an event parameter, and showing an alert on submit.

Install and configure react router dom to manage navigation between home, about, and contact pages using browser router, routes, and links, including a 404 not found route.

Build a navigation menu using React Router DOM, linking home, about, and contact pages with Link and NavLink components, and manage active states with CSS classes.

compare browser router and hash router in react router dom, highlight url appearances, server compatibility, and the html5 history api, and explain when to prefer hash router for simpler deployment.

Learn how to pass parameters via navigation in a React Router setup, sending id and name to about page and retrieving them with use param method from React Router Dom.

Explore React hooks for state management and lifecycle in functional components, including useState, useEffect, useContext, and useRef, with live, step-by-step examples from React 16.8 to 18.2.0.

Learn to use the useRef hook to access DOM elements, modify innerText and innerHTML, and update content on click without re-rendering in React.

Learn how to manipulate image attributes in React using the useRef hook, updating src, height, and width with setAttribute and current, demonstrated through a live example.

Use useRef to manage input fields for first name and last name, and display their values in an alert on click in a Next.js and React news portal app.

Install bootstrap in a React project, import bootstrap CSS, and use useRef to toggle an h1 element's bootstrap classes from text success to text danger on click.

Use useRef to cache expensive API data, avoiding refetch on re-renders by storing first fetched JSON in a cache.

Learn how useState in React stores component data and triggers automatic re-renders, with a live example showing initialization, updating on click, and syncing state with the UI.

Explore using useState with an object in React, updating specific keys with setMyObject, using the spread operator and callbacks to modify key one and key two interactively.

manage a dynamic list with usestate in react. add items, pass element data and index, and remove by index using push and the split method, updating the list with setlist.

Learn to manage a form with useState by building a first name, last name, city select, and gender radio inputs, and store them in a form object.

Master form management with useState by building a form that updates an object for first name, last name, city, and gender, handles onChange, logs the form data, and prevents submit.

Explore how the useEffect hook runs on initial render and when dependencies change. Grasp its callback function and dependency array and how it enables data loading.

Call an API with fetch inside useEffect in a Next.js and React full stack news portal app, handle promises with then, convert responses to json, and render data with useState.

Master fetching API data in React with useEffect using async/await, including an immediately invoked function expression, fetch to JSON, and updating state with useState.

Explore Express.js fundamentals as a Node.js server side framework for building rest APIs, with template engines, and learn to install Node.js, set up Visual Studio Code, and use Postman.

Set up a first Express.js application by initializing npm, installing express, creating package.json and index.js, and wiring a basic get route that returns Hello Express.js on localhost:8000.

Learn how to implement Express.js routing with home, about, and contact routes using get methods, and test post, put, patch, and delete actions via postman.

Focus on four core topics in express.js: request handling, response, middleware, and database operations, with upcoming lessons demonstrating response handling through live examples.

Explore how to work with the Express.js response body, header, status, and cookies using Postman examples to serve HTML, JSON, XML, and text with common status codes.

Learn to return simple string responses with express.js using get and post routes, via send and end methods, and verify results with postman.

Demonstrates manipulating Express.js response status codes to control client feedback, using res.status with 401 and 201, testing routes, and sending or omitting messages.

Learn to handle JSON responses in a node route by returning a JSON array of objects using the JSON method, testing with Postman and observing a 200 status.

Learn to implement a download response in express.js by creating a dedicated route. Serve a file from an uploads folder (about.jpg) using res.download and test in browser or postman.

Learn how to implement response redirects in a Next.js/React setup by creating /USA and /India routes, using the redirect method to forward to /India, and testing with browser and Postman.

Explore how to manipulate response headers in a Next.js and React setup by using the append method to add key-value data and update status codes, with live Postman demonstrations.

Set data into cookies using response cookie method, specifying key and value, with examples like city and age, and verify cookies in the browser and Postman as the server runs.

Explore deleting and clearing cookies in a full-stack setup by using a clear cookie function to remove named cookies like name and city, with live browser and postman tests.

Learn to work with request methods, including get and post, handling url parameters, headers, json bodies, and multipart form data with file uploads, using express.js with live examples.

Handle a get request with a URL query by accessing first name and last name from the request query, then display them in the response.

Pass and retrieve data from HTTP get request headers using Postman; send first name and last name in the header and display them in the server response.

Implement post method for the home route, create a send method to process the request body, and test post request in postman after running the server with node index.js.

Learn to post data with URL query parameters, retrieving first name and last name via postman, concatenating them, and displaying the stored result in a node server.

Demonstrates how to handle a post request with header properties in express.js, extracting username and password from request headers. Displays the values in the response view.

Install body-parser, require it, and enable JSON parsing in your Express app to post application JSON data. Read the request body, stringify it, and return the JSON in the response.

Learn to handle multipart form data in an express.js app using multer, test submissions with postman, and read both form fields and json data for display.

learn to implement file uploads in an express app using multipart form data, configuring disk storage, handling image uploads, and preserving original file names with postman.

Explore how middleware centralizes requests to enforce authentication, authorization, validation, and rate limiting, and learn its application at both the app-wide and per-route levels.

Explore how to implement application middleware in a Next.js and React news portal: create get routes for home, about, and contact, and use next to pass requests and responses.

Explore how to create and apply root route middleware for specific paths, such as the about page, using the use function and simple validation and authorization checks.

Explore MongoDB, an open source, non-relational database management system that stores data as flexible documents rather than tables, enabling elastic storage and scalable cross-platform apps.

Install MongoDB community server on Windows, set PATH for the bin folder, verify installation with PowerShell, and connect with MongoDB Compass to localhost:27017.

Connect an express.js project to MongoDB using mongoose, set up npm, create index.js, and verify the database connection with mongoose.connect, handling errors gracefully.

Explore MongoDB concepts of documents, collections, and databases, then define schemas with Mongoose to model a user collection including name, age, is married, salary, and gender.

Create and save a user document in Mongoose db by defining a schema, creating a user with name, age, married, salary, and gender, and persisting it to test database.

Explore querying a user collection with MongoDB through mongoose: import JSON data, fetch all, filter by is married, salary, and find by id using find, findOne, and findById.

Master advanced queries in mongodb using find, select, limit, sort, and count. Filter by is married false, select name and salary, and apply ascending or descending order with limits.

Learn MongoDB comparison operators: greater than, greater than or equal, less than, less than or equal, not equal, in, and not in, with age and salary examples.

Explain complex and or query operators and demonstrate how is married true and age 30 combine to fetch matching user data using or and and conditions.

Filter users by age greater than 40 or unmarried using the or operator. Project names and sort results by name.

Update a document in MongoDB by finding a user by id and set the is married field to true, then save changes.

Learn how to update a document by id in MongoDB using find by id and update, changing fields like age and is married, with validators and runValidators.

Learn to delete documents in MongoDB in a Next.js and React full-stack news portal by using delete one by id and delete many by condition.

Install Node.js from the official site and verify its installation; then install Visual Studio Code and enable key extensions like auto close tag and auto rename tag.

Next.js is a React-based framework by Vercel that enables production-ready web apps with server-side rendering and static site generation, enabling full-stack development with a structured, simplified setup.

Compare React.js and Next.js, showing React as a library and Next.js as a framework. Explain rendering methods, built-in routing, and data-fetching patterns.

Create a fresh Next.js project with npx create next app, choose JavaScript, and set up a src app root. Learn to run npm run dev and npm run build.

Explore the Next.js project structure, including the Next folder, node_modules, public, and src/app, and learn how layout.js, pages.js, and Tailwind integrate to build a production-ready full-stack news portal.

Discover how next.js uses the app folder and a root layout to load a default page with page.jsx, then add about and profile pages for automatic routing and tailwind css.

Learn to load assets in a Next.js project by placing images in the public/images folder and referencing them with an img tag, or import images for Next.js use.

Learn how to implement global CSS across a Next.js project and create module CSS for component-scoped styling, with practical steps for layout.js, profile, and about pages.

Explore client side rendering and server side rendering in Next.js through a live API demo, using use client, useEffect, and useState to fetch and display dummy JSON data.

Explore server side rendering in Next.js by fetching data with an async function, compare SSR and CSR, and learn when to use each for data rendering.

Explore when to use server components versus client components in Next.js, including data fetching, securing API keys, and reducing client-side JavaScript.

Choose when to use server side rendering vs client side rendering in Next.js, mix them in one component with use client, and implement on click listeners and api data handling.

Explore how Next.js routing maps app folder structures to routes, creating home, about, and contact pages, and handling 404s, while organizing admin and nested routes.

Explore nested routing in Next.js by building a multi-route structure with folders and pages, creating brand, Apple, and iPhone routes to illustrate how nested routes load components.

Build a reusable menu component in a Next.js project to render a navbar using next/link, linking to home, about, admin, and contact pages, with nested routes like brand/apple/iphone.

Implement a routing progress bar in Next.js by installing and integrating the next in progress bar package in a global layout. Experience progress indication across home, about, and admin routes.

Master active and pending link styling in a Next.js and React full-stack news portal by using global CSS classes and the usePathname hook to highlight the current route.

Explore passing and retrieving query parameters with the Next.js Link component, using pathName and query, and reading values via search params on the destination page.

Master reading link query data with useSearchParams in Next.js navigation, extracting name and price from query parameters for dynamic pages, and ensure proper client-side rendering with use client.

Learn how to use the Next.js link component to optimize navigation with replace and prefetch properties, controlling browser history, data caching, and preloaded API data.

Learn to programmatically navigate in Next.js using the useRouter hook, including push, replace, refresh, back, and forward, with practical examples and passing query parameters.

think in next.js by balancing server components and client components to secure server-side rendering, reduce client-side rendering burden, minimize client bundle size, and boost SEO.

Use client components with the use client directive to enable interactivity via onClick and onChange events, state, ref, useEffect, and hooks; Next.js pre-rendering on server and hydrated on the client.

Learn to configure a Next.js project with a base path in next.config.js and manage environment variables, including dot env usage, while distinguishing client and server components for secure keys.

Configure headers in next.config.js with an async headers function, passing key-value pairs to routes such as home and about, and verify with network logs showing request and response headers.

Explore header security configurations in a Next.js project, including x-frame-options to prevent clickjacking, and a content security policy with default-src, script-src, and style-src using self and allowed CDNs.

Learn header security with content and permission policies to deny camera, microphone, and geolocation, and enforce https with strict transport security and subdomain preload.

Configure header security in next.js by using the x content type option to prevent non sniffed content issues, hide the x powered by header, and customize base extensions.

Explore Next.js connection settings, including keep-alive and http agent options, to reuse backend connections and apply gzip compression to rendering content and static files.

Explore how Next.js image optimization handles in-project and third-party images, configures domains in next.config.js, and uses responsive, fixed, and priority options to boost performance and convert images to webp.

Explore font optimization in Next.js and React by loading Roboto from Google Fonts, applying it globally with a Latin subset and weights 300, 400, 700, 900 via a CSS variable.

Learn how to load Google fonts and a local Sunshine Tropical font in a Next.js project, create a fonts folder, and use global font variables for typography.

Load Next.js scripts in a Next.js project by importing a script tag in the main layout, adding CDN sources like Axios or Bootstrap, and verifying via network requests.