Fullstack Development — Straight to the point!

Explore how full stack applications operate, combining front end and back end. See how a client requests static files from a server via http, and how the browser processes them.

Explore how the browser uses JavaScript, HTML, and CSS to define page behavior, structure, and design, with HTML as markup, CSS for style, and JavaScript for behavior.

Create your first web page by writing an html file, learn the head and body structure, and nest tags like h1, p, a, and div; save as html.

Link a css file to html and create kebab-case classes. Style an h1 with purple color and larger font, and a div with background, size, border radius, and padding.

Add functionality by creating a JavaScript file, log 'Hello, world' to the console, and observe the script running automatically in the browser via the DOM and console tools.

Connect a JavaScript file to index.html, create the file if needed, and verify script execution by reloading and viewing console.log outputs in the browser's Developer Tools console.

Explore how variables store numbers and strings with let and const, why var is obsolete, and how if conditionals using count > 0 and else guide program output.

Learn the for loop and while loop in JavaScript, mastering their syntax with initialization, condition, and increment, and how to print values during each iteration.

Explore arrays and objects as non primitive variables that hold multiple values, using zero-based indices for arrays and key-value pairs for objects, with examples like name equals John.

learn how to manipulate the document object model with JavaScript by selecting elements with querySelector, updating innerHTML, and triggering changes on button clicks after the page loads.

Learn how to use fetch to make HTTP requests, handle promises, convert responses to JSON, and render product data on the page with DOM updates.

Explore how Axios streamlines http requests on client and server, with promises, json support, headers, timeouts, cancellation, data transformation, and interceptors with Axios instances for reusable configurations.

Explore what React is as a library for web and native user interfaces, and learn how components and JSX, a JavaScript syntax that looks like html, compile to JavaScript.

Learn to install react with the npx create react app command, noting that installing react without a framework is not recommended. Run npm run start to view your app.

See how a sensor component acts as a function that accepts props, or properties, as inputs. Destructure the props and reuse the same component with different text.

Manage local component state with the useState hook, update via setCount, and trigger automatic DOM rerendering.

Clean up a fresh React app, understand the public folder and root dom injection in a single-page application, and learn the basics of jsx and functional components for reusable ui.

Learn how the useEffect hook runs side effects in functional components, with a callback and a dependency array, plus cleanup and dependency-driven execution.

Explore prop drilling by lifting state to a grandfather, passing value and setter through children, and previewing a global state solution with Zustand.

Adopt global state management with Zustand by creating a count store and an increment function, then use it in the grandson to demonstrate state updates without props drilling.

set up a node.js backend by initializing npm in a new folder, creating package.json, and writing index.js; run node index.js to start the server and prepare for express setup.

Install express.js and paste the boilerplate to start a server on port 3000. Test the root route with a GET request in the browser to see the response.

Test postman by sending a get to retrieve an array of objects, then post to /submit with a json body and see the server print and respond 'received'.

Export the router from Express, import it into the products router, and wire it to the app with app.use, then move on to the middleware topic.

Learn how middleware acts as code between two parts of an app, using app.use to apply to all routes, and controlling flow with next, with route-specific middleware for specific routes.

Explore authentication and how it verifies a user or system before granting access to protected resources. Demonstrate bearer token authentication and preview implementing it with Node.js and React.

Bearer tokens authenticate users by attaching a token to every request via the authorization header. After login, the server issues a token stored for subsequent requests.

Implement the server-side authentication flow using Express and Postman, expose an unprotected books API that returns a books array, and prepare for a login route in the next video.

Implement the login route using a simulated user database, verify user and password, return 401 on failure, generate and store a token, and respond with the token for postman testing.

protect a route with an is authorized middleware that extracts the token from the authorization header, validates it with the token service, and calls next for authorized requests.

Use a React client and Axios to post login credentials to a server, receive a token, and store it in local storage for future authenticated requests.

Log in to obtain a fresh token, retrieve it from local storage, and attach it in a configuration object with authorization headers to the post and get requests for fetch books.

Encrypt passwords with bcrypt and verify with bcrypt's compare during login, avoiding plain text storage; implement a logout route that removes the token from headers and the active tokens array.

Install the Next.js meta framework to bundle React and Node.js, then create a Next app, run the dev server, and test the api at localhost:3001/api with Postman.

Explore Next.js file-based routing that renders pages from the app folder and server component, then add an about page by creating an about folder with a page file for /about.

Next.js renders every component as a server component by default, speeding up pages, and you can switch to a client component with the use client directive for browser-only hooks.

discover how to add pages in Next.js using the app router by creating page.tsx files under the app folder, and compare the old pages router with the new app router.

Implement fast, client-side routing in Next.js using the built-in Link component and next navigation, avoiding full page reloads on the app router and enabling programmatic redirects with a button.

Install MongoDB Atlas and connect it to your application using a cloud database, then sign up at mongodb.com and sign in with Google.

Create and organize a MongoDB Atlas database by building an organization, project, and cluster, then create a database and books collection, and insert sample documents using a NodeJS connection string.

Identify the server IP and add it to the whitelist so Atlas allows access. For simplicity, use a wildcard to permit access from anywhere, though not secure.

Connect the database to our Next.js app by wiring a books collection and books service, configuring the connection string in the environment file, then test with Postman.

Deploy your app to a server with Vercel, linking to GitHub, importing the project, configuring environment variables such as the Atlas DB connection string, then deploy.

Learn how to organize multiple components with a barrel file by creating an index that exports components and a default export, enabling cleaner imports and simpler code.

Explore Zod, a TypeScript-first schema validation library with runtime validation for forms. Create form validations with Zod schemas and React Hook Form, including a social security number and email format.

Harness TanStack query to handle asynchronous http requests with built-in caching, error handling, and isPending status, wrapping fetches with useQuery instead of useEffect.