React Node MERN Stack from Scratch building Social Network

Learn how to declare JavaScript variables with var, let, and const, compare their scope and window object behavior, and see when to use const or let in if-else blocks.

Explore the this keyword in JavaScript, how it refers to the enclosing context and the window object, and how arrow functions lack this, impacting joining cities with a dash.

Learn ES6 classes in JavaScript by defining a Holiday class with a constructor and a method, using new to create instances like Kathmandu, Nepal for 30 days.

Learn how to extend a parent class to a child class in JavaScript, access inherited properties and methods with super, and augment with custom constructors, gear, and the rest operator.

Create a node.js project, write a simple function, and execute it in the node environment, observing console output. Initialize with npm to access packages that speed development.

Learn how to modularize Node.js code using import and export, create helper modules, and import with require or ES modules, improving organization with exports and destructuring.

Explore core Node.js modules by requiring the http module and creating a simple server from scratch. Send a 200 response with text/html content and Hello from Node on port 8000.

Explore how the Node.js event loop handles asynchronous events on a single thread, using a cashier-and-kitchen analogy; unlike blocking languages, events queue and dispatch without waiting.

Learn to manage user input in React by creating state with the use state hook, binding inputs as controlled components, and handling on change and on submit events.

Learn to fetch data from a backend API in a React component using fetch and useState. Click a button to retrieve and display the user data.

Learn how to resolve cross-origin resource sharing errors by configuring the cors middleware in an Express server, allow specific origins, and test with front-end requests.

Fetches user data from the /users endpoint, stores it in state, and renders the users with map, ensuring the data uses an array format and unique keys.

Learn to import and export in React, create a reusable button component, and render it across the app by passing props such as a title and a click handler.

Explore three ways to style a React app: global css via index.css, component-specific css files, and inline styles, with bootstrap and style components.

Learn to use Ant Design components in a React app by installing npm packages, importing the list component, and rendering posts with layout, data source, and render item.

Learn to implement a loading state in a React component by showing a loading spinner while API data loads, then render posts once data arrives.

Modularize your backend by moving routes and callbacks into separate files, apply Morgan as development middleware to log requests, and review status codes like 200, 304, and 401.

Learn how to add multi-page routing to a React app using React Router Dom, create home, about, and services pages, and render components based on the current route.

Master react router essentials by implementing routing with browser router, route components, and exact paths, then build a navigation bar using link components for home, about, and contact.

Build a real-time social network from scratch using React, Next.js, Node.js, MongoDB, and Socket.io, featuring authentication and a timeline with posts and CRUD functionality.

Set up a Next.js project from scratch, create client and server folders, install Next.js, React, and React-DOM, bootstrap, then build a pages routing with index, login, and register.

Understand how the public folder stores static content like images and CSS, organize images and CSS inside public, and reference them directly from pages without long paths.

Learn to manage user input with React state and a change event handler, turning form fields into controlled components, and prepare a submit workflow with preventDefault and state binding.

Learn to post user data from the front end with axios to /api/register, sending name, email, password, and secret, and handle responses while preparing the server endpoint.

Set up a Node.js express server with npm init, connect to MongoDB via mongoose using Atlas URL, and configure middleware including express.json, express.urlencoded, and cors, running on port 8000.

Define a user schema with fields name, email (unique), password, secret, about, and photo, plus following and followers as object id references, with timestamps and a mongoose model.

Build a server-side user registration flow by validating inputs, hashing passwords, checking for existing emails, saving the user, and returning success or error messages.

Improve form handling by clearing fields after success, using a next public env for the API URL, adding client-side validation, and extracting the form to a separate reusable component.

Style the login page with a background image by creating a background class using default.jpg, set black text for clarity, and extract the form into a reusable component.