Learning Full Stack (MERN) Web App Development through Free Online Tutorials – Organized Notes and Log

Last updated on 23 March 2024

This post is an organized version of my somewhat less organized post: Learning web app development through free online tutorials – Detailed Log . This post is closely associated with my post: Roadmap to Learning Full Stack (MERN) Web Development Beginner Level through Free Online Tutorials .

These notes and logs were prepared by me as I went through two rounds of most of the main tutorials mentioned in above "Roadmap". I think it may be a very useful resource for students who follow my above Roadmap to learn full stack web app development.

Topics Covered

  1. Visual Studio Code
  2. HTML5
  3. Chrome DevTools
  4. CSS
  5. JavaScript
  6. Node.js and Express.js
  7. MongoDB and Mongoose
  8. ReactJS
  9. Git
  10. Github
  11. Using Git and GitHub from Visual Studio Code
  12. MERN Full Stack mini-project
Note: This post presumes Operating System as Windows 10 (or higher) OS but it could be applicable to other Operating Systems too.

Visual Studio Code

Visual Studio Code website with download link for Windows version: https://code.visualstudio.com/

How to Install Visual Studio Code on Windows 10 [2023 Update] Complete Guide, https://www.youtube.com/watch?v=CPmQwlycfGI , 2 min. 30 secs.

Visual Studio Code shortcuts:

Prettier extension installation and invocation: Installing Prettier Visual Studio Code plugin, https://www.youtube.com/watch?v=J-JRwDkDJHc , 1 min. 45 secs.

To change ES7 snippet rafce (and possibly other such snippets too) to not have ‘import React from “react”;’ statement, do the following:
In VSCode choose File -> Preferences -> Settings -> Extensions -> ES React/React-Native/Redux snippets. In the right panel, uncheck “React Snippets > Settings: Import React on Top”.

VSCode: Getting prettier to ignore some files: https://prettier.io/docs/en/ignore.html#ignoring-files
I used the following .prettierignore file at project directory level and it worked as expected:
# Ignore src/test directory files
**/src/test
VSCode Prettier: Turning off prettier for next node: From JSX, https://prettier.io/docs/en/ignore.html#jsx
{/* prettier-ignore */}
I tried the above and it works for next JSX tag (and all tags within it).

Editor Sticky Scroll: To Toggle it (as of Feb. 2024): Command Palette -> (View:) Toggle Editor Sticky Scroll . Article explaining the feature but as it is 2022/2023 article, the user interface to turn on and off Editor Sticky Scroll seems to have changed in VSCode and so use abovementioned UI steps to turn it on or off: Visual Studio Code’s New Editor Sticky Scroll Feature - Never Get Lost In The Code Again!, https://dev.to/bytehide/visual-studio-codes-new-editor-sticky-scroll-feature-never-get-lost-in-the-code-again-1dob

VSCode can be used to search for text within folders having nested folders of projects with their source code.

Adding Visual Studio Code to Windows Context Menu, https://www.youtube.com/watch?v=4qspErFtm00, 1 min. 50 secs.

Visual Studio Code "Open With Code" does not appear after right-clicking a folder, https://stackoverflow.com/questions/37306672/visual-studio-code-open-with-code-does-not-appear-after-right-clicking-a-folde

Additional Info

From Markdown, https://en.wikipedia.org/wiki/Markdown: “Markdown[9] is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004 as a markup language that is easy to read in its source code form.[9]”

autocomplete for log should be first console.log #49308, https://github.com/Microsoft/vscode/issues/49308

HTML5

A long detailed video tutorial (4 hrs): Learn HTML – Full Tutorial for Beginners (2022), https://www.youtube.com/watch?v=kUMe1FH4CHE, 4 hrs, 3 mins, by freeCodeCamp.org.

HTML5 – Overview, https://www.tutorialspoint.com/html5/html5_overview.htm

Create new HTML files in Visual Studio Code, https://www.youtube.com/watch?v=5a4gynygW9o , 2 min. 48 secs.
! in blank HTML file is (Emmet) shortcut to have a starter HTML file (shown in above video).
Emmet — the essential toolkit for web-developers, https://docs.emmet.io/
To open an HTML file from Visual Studio Code, from Terminal use: start html-filename (e.g. start index.html).
HTML in Visual Studio Code, https://code.visualstudio.com/docs/languages/html

HTML Tutorial, https://www.w3schools.com/html/

What is the difference between section and div tags in HTML ?, https://www.geeksforgeeks.org/what-is-the-difference-between-section-and-div-tags-in-html/

Question: Why Does my Browser Silently Send Requests for a ‘favicon.ico’ File for Multiple Domains?, answered in: Troubleshoot What a Favicon.ico Is and why a Browser Requests It, https://www.cisco.com/c/en/us/support/docs/security/web-security-appliance/117995-qna-wsa-00.html .

HTML small : the side comment element, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

Chrome DevTools

Build better sites faster with Chrome DevTools, https://www.youtube.com/watch?v=VYyQv0CSZOE , 29 min 4 secs, published on Aug 24, 2019 by SFHTML5

Debugging JavaScript – Chrome DevTools 101, https://www.youtube.com/watch?v=H0XScE08hy8 , 7 min 27 secs, published on Jan 5, 2018 by Chrome for Developers

CSS

A long detailed video tutorial (11 hrs): CSS Tutorial – Full Course for Beginners, https://www.youtube.com/watch?v=OXGznpKZ_sA , 11 hrs. 8 mins, published by freeCodeCamp.org on 30 Aug. 2022. Source code: https://github.com/gitdagray/css_course .

“CSS Tutorial” section of CSS Tutorial, https://www.w3schools.com/css/default.asp .

Learn to style HTML using CSS, https://developer.mozilla.org/en-US/docs/Learn/CSS

CSS align-items Property, https://www.w3schools.com/cssref/css3_pr_align-items.php , https://www.w3schools.com/cssref/tryit.php?filename=trycss3_align-items, https://www.w3schools.com/cssref/playdemo.php?filename=playcss_align-items&preval=stretch

CSS display Property, https://www.w3schools.com/cssref/pr_class_display.php , https://www.w3schools.com/cssref/tryit.php?filename=trycss_display (shows difference between display inline and display block)

Learn CSS Units – Em, Rem, VH, and VW with Code Examples, https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/
An Introduction to the fr CSS unit, https://css-tricks.com/introduction-fr-css-unit/

Understanding use of the +, >, and ~ symbols in CSS selectors, https://levelup.gitconnected.com/understanding-use-of-the-and-symbols-in-css-selectors-95552eb436f5

CSS Box Sizing, https://www.w3schools.com/css/css3_box-sizing.asp

How TO – Hero Image, https://www.w3schools.com/howto/howto_css_hero_image.asp , “A Hero Image is a large image with text, often placed at the top of a webpage…”

CSS Inheritance, https://developer.mozilla.org/en-US/docs/Web/CSS/Inheritance

CSS Variables – The var() Function, https://www.w3schools.com/css/css3_variables.asp

CSS: visibility: hidden makes the element not visible but the element still takes up space in the layout (so the centering of visible siblings in a flexbox is not impacted). display: none removes the element from the document (so the centering of visible siblings in a flexbox is impacted). Ref: Tryit: Difference between display:none and visiblity: hidden, https://www.w3schools.com/css/tryit.asp?filename=trycss_display .

min-height property overrides both height and max-height. Ref: https://css-tricks.com/almanac/properties/m/min-height/

I put up a separate post on: Notes on height related CSS settings for document (html tag) and body (body tag) elements, https://raviswdev.blogspot.com/2024/02/notes-on-height-related-css-settings.html .

“A viewport represents the area in computer graphics being currently viewed. In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc. That is the part of the document you are viewing.”

HTML Responsive Web Design, https://www.w3schools.com/html/html_responsive.asp : “Responsive web design is about creating web pages that look good on all devices!" ... "A responsive web design will automatically adjust for different screen sizes and viewports.”
  • width trigger point for mobile < 600px
  • width trigger point for tablet < 768px
  • width trigger point for desktop(/laptop) >= 768px
How to write :hover condition for a:before and a:after in CSS?, https://www.geeksforgeeks.org/how-to-write-hover-condition-for-abefore-and-aafter-in-css/

How do I wrap text in a pre tag?, https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag …. Key CSS code: pre {white-space: pre-wrap;}

“The element.style property lets you know only the CSS properties that were defined as inline in that element (programmatically, or defined in the style attribute of the element)”…

The above explains why my test HTML JS code that was displaying style property(ies) of an element was showing null data when the style property was being set only in CSS. Setting the style property inline or programmatically resulted in that property data getting displayed correctly (using element.style).

CSS Flexbox and Grid

CSS Grid Layout Module, https://www.w3schools.com/css/css_grid.asp (display: grid;)

CSS Flexbox, https://www.w3schools.com/css/css3_flexbox.asp (has 3 child-pages: CSS Flex Container, CSS Flex Items and CSS Flex Responsive with the last showing how to “Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content”).

The ultimate CSS battle: Grid vs Flexbox, https://medium.com/hackernoon/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf

4-part series:
  1. Learn CSS Flexbox by building a photo card component, https://freshman.tech/flexbox/
  2. How to build a Navigation Bar with CSS Flexbox, https://freshman.tech/flexbox-navbar/
  3. How to build a responsive feature list with CSS Flexbox, https://freshman.tech/feature-list/
  4. How to build a Mobile App Layout with CSS Flexbox, https://freshman.tech/flexbox-mobile-app/
Game for improving/testing CSS Flexbox skills: https://flexboxfroggy.com/
Game for improving/testing CSS Grid skills: https://cssgridgarden.com/

How to Create a Responsive 3 Column Layout Flexbox CSS, https://devpractical.com/3-columns-flexbox-layout-css/ (uses width and is a short and simple article)

Equal Columns With Flexbox: It’s More Complicated Than You Might Think, https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/ (uses flex property and is a detailed and complex article)

CSS: Page with Header, Main and Footer using Flex, https://raviswdev.blogspot.com/2024/03/css-page-with-header-main-and-footer.html

Gradients, transform and web-kit 

linear-gradient(), https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient gives an example of colour and percentage use as color-stop. One of the tutorial projects mentioned elsewhere in this post, uses: “background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);”. The above web pages helped me to understand this to mean start with #ffb199 at bottom and have a gradient to top with #ff0844.

CSS transform Property, https://www.w3schools.com/cssref/css3_pr_transform.php

Creating a responsive hamburger menu button with CSS, https://reintech.io/blog/creating-responsive-hamburger-menu-button-with-css

The CSS properties: -webkit-background-clip, -moz-background-clip, -webkit-text-fill-color and -moz-text-fill-color seem to be poorly documented. After lot of searching, I got some info. from the following links:

It is these properties that seem to provide the text (NEXT GENERATION TECHNOLOGY) using gradient colour effect in HTML-CSS-Website-V1 project referred in youtube video (HTML CSS and Javascript Website Design Tutorial – Beginner Project Fully Responsive) mentioned elsewhere in this post.

HTML DOM 

HTML DOM Element classList (includes info. about Toggle method), https://www.w3schools.com/jsref/prop_element_classlist.asp

Toggle example: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_classlist_toggle

HTML DOM Document querySelector(), https://www.w3schools.com/jsref/met_document_queryselector.asp

Additional Info.

To see how a page looks on a mobile screen in Chrome: ctrl+shift+i followed by ctrl+shift+m

Why use *, *::before, *::after at the same time? [duplicate], https://stackoverflow.com/questions/65563666/why-use-before-after-at-the-same-time

Is knowledge of CSS necessary for React?, https://forum.freecodecamp.org/t/is-knowledge-of-css-necessary-for-react/179104

This tutorial combines HTML, CSS and very little bit of JavaScript: HTML CSS and Javascript Website Design Tutorial – Beginner Project Fully Responsive, https://www.youtube.com/watch?v=FazgJVnrVuI, 1 hr. 25 mins, published on 14 Sep. 2020 by Brian Design. Final source code can be downloaded.

This tutorial has little more of JavaScript than above: HTML CSS Javascript Website Tutorial – Responsive Beginner JS Project with Smooth Scroll, https://www.youtube.com/watch?v=3-2Pj5hxwrw , 2 hrs 5 mins, published on 25 Sep. 2020 by Brian Design. Final source code can be downloaded.

CSS Frameworks and Pre-processor(s)

Semantic UI

Bootstrap
Sass

JavaScript

JavaScript Tutorial, https://www.w3schools.com/js/default.asp . [Seems to be comprehensive and good enough for me to quickly understand new features and refresh my knowledge about old features except for few topics like promises, async/await, fetch where I think some other tutorials are better (if I recall correctly).]

JavaScript Versions, https://www.w3schools.com/js/js_versions.asp

ECMAScript is JavaScript official name. ES6 is an abbreviation of ECMAScript first released in 2015. Since 2016 the versions are said to be named by year (but also seem to be referred to as ES6, e.g. ES6 ECMAScript 2020).

To open (JavaScript) console in Chrome, use Ctrl+Shift+J. [Inspect and then clicking on Console tab is a two-step way]

Difference between let and var in JavaScript, https://sentry.io/answers/difference-between-let-and-var-in-javascript (Let has block scope, var has function scope (and so larger scope); also at global level var creates a property on global object but let does not.)
JavaScript Let (and difference with var), https://www.w3schools.com/js/js_let.asp .

forEach: https://www.w3schools.com/jsref/jsref_foreach.asp 

(` backtick usage): JavaScript Template Literals, https://www.w3schools.com/js/js_string_templates.asp [Also see test file/program: BackTickTemplateLiteralSample\index.html]

JavaScript Double (==) equals vs Triple (===) equals, https://reactgo.com/javascript-double-vs-triple-equals/

Array vs Object Destructuring in JavaScript – What’s the Difference?, https://www.freecodecamp.org/news/array-vs-object-destructuring-in-javascript/
About destructuring (page first covers arrays and then objects): React ES6 Destructuring, https://www.w3schools.com/react/react_es6_destructuring.asp

JavaScript Objects, https://www.w3schools.com/js/js_objects.asp

From https://www.w3schools.com/js/js_const.asp : (in my own words) In the context of an object or array, Const defines a constant reference but the properties of the object and the elements of the array can be changed.

JavaScript Array find(), https://www.w3schools.com/jsref/jsref_find.asp

What is function chaining in JavaScript?, https://www.tutorialspoint.com/what-is-function-chaining-in-javascript

JavaScript Object Constructors, https://www.w3schools.com/js/js_object_constructors.asp

JavaScript String startsWith(), https://www.w3schools.com/jsref/jsref_startswith.asp [Returns true if string starts with parameter]

Javascript Array.prototype.filter(), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Javascript Array.prototype.slice(), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Javascript Array.prototype.join(), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Javascript creating objects – multiple approaches, any differences?, https://stackoverflow.com/questions/16109108/javascript-creating-objects-multiple-approaches-any-differences covers factory function which is used or something similar is used in Node js tutorial.




Javascript Short Circuiting Operators, https://www.geeksforgeeks.org/javascript-short-circuiting/ [AND(&&) short circuit, OR(||) short circuit]


“Many built-in operations that expect booleans first coerce their arguments to booleans.” …
It states that the following turn into false: undefined, null, 0, -0, NaN, “” (empty string) and 0n (BigInt 0).


Create Simple List UI

How to Add Edit and Delete Data in HTML Table using JavaScript ?, https://www.geeksforgeeks.org/how-to-add-edit-and-delete-data-in-html-table-using-javascript/

Edit Items in a List with Javascript, https://codepen.io/mcraig218/pen/MmmYQM

Object destructuring, spread and rest

let sortedProducts = […products];
As per my understanding, above statement (from Node tutorial) uses spread operator and results in products array being copied to sortedProducts with the two arrays being different. Operating on one does not change the other.
let sortedProducts = products;
As per my understanding, above statement would have two references of sortedProducts and products to same array.
For more, see JavaScript Spread Operator, https://www.geeksforgeeks.org/javascript-spread-operator/
…spread operator and rest operator – Beau teaches JavaScript, https://www.youtube.com/watch?v=iLx4ma8ZqvQ , 6 min. 57 secs.

Section “Add Aliases” in JavaScript Object Destructuring, Spread Syntax, and the Rest Parameter – A Practical Guide, https://www.freecodecamp.org/news/javascript-object-destructuring-spread-operator-rest-parameter/
res.status(200).json({ task })
seems to be a shortcut to:
res.status(200).json({ task:task })

In Node js tutorial 07-params-query.js, the following is used:
const { id, name, image } = product;
Above statement destructures product into 3 consts of id, name and image which can be used later, as is used in this statement:
return { id, name, image };

Arrow Function

JavaScript Arrow Function, https://www.w3schools.com/js/js_arrow_function.asp .

(Arrow Functions) => Explained (blog post), https://blog.webdevsimplified.com/2020-09/arrow-functions/ . Same is covered in this video: JavaScript ES6 Arrow Functions Tutorial, https://www.youtube.com/watch?v=h33Srr5J9nY , 9 min. 31 secs, published on Jan. 3, 2019 by Web Dev Simplified [Created test program ArrowFunctionTut\script.js based on above article code.]

Promise and Async/Await

The JavaScript language -> Promises, async/await, https://javascript.info/promise-basics [Created test program PromiseTut\PromiseTest.js.]

Promise explanation in w3schools, https://www.w3schools.com/js/js_promise.asp is significantly different from https://blog.webdevsimplified.com/2021-09/javascript-promises/ . The w3schools explanation uses promise.then(fn1, fn2) code whereas webdevsimplified.com uses promise.then.catch code, and the latter seems to be more in regular use. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise has a diagram which suggest both of the above code styles are OK! But the description is too complex. I think blog.webdevsimplified.com is the best among the 3 for learning. It also has examples of chained .then. After going through it, going through its fetch API post: https://blog.webdevsimplified.com/2022-01/js-fetch-api/ , makes it easier to understand the latter. w3schools fetch tutorial page: https://www.w3schools.com/js/js_api_fetch.asp is just too minimal. https://blog.webdevsimplified.com/2021-11/async-await/ covers async/await well. w3c async/await page, https://www.w3schools.com/js/js_async.asp is somewhat confusing.

JavaScript Promises In 10 Minutes, https://www.youtube.com/watch?v=DHvZLI7Db8E , 11 mins. 30 secs, published on Jan. 17, 2019 by Web Dev Simplified

From async function, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.

For example, consider the following code:

async function foo() {
  return 1;
}

It is similar to:

function foo() {
  return Promise.resolve(1);
}

From Promise.resolve(), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

The Promise.resolve() static method “resolves” a given value to a Promise. If the value is a promise, that promise is returned; if the value is a thenable, Promise.resolve() will call the then() method with two callbacks it prepared; otherwise the returned promise will be fulfilled with the value.

…

From await, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

The await operator is used to wait for a Promise and get its fulfillment value. It can only be used inside an async function or at the top level of a module.

…

await is usually used to unwrap promises by passing a Promise as the expression. Using await pauses the execution of its surrounding async function until the promise is settled (that is, fulfilled or rejected). When execution resumes, the value of the await expression becomes that of the fulfilled promise.
If the promise is rejected, the await expression throws the rejected value.

Event Bubbling

Event Bubbling in JavaScript – How Event Propagation Works with Examples, https://www.freecodecamp.org/news/event-bubbling-in-javascript/

Event Loop

What is an event loop in JavaScript ?, https://www.geeksforgeeks.org/what-is-an-event-loop-in-javascript/

The event loop, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop

Object Prototypes

Object prototypes, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

A Beginner’s Guide to JavaScript’s Prototype, https://www.freecodecamp.org/news/a-beginners-guide-to-javascripts-prototype/

JavaScript Object Prototypes, https://www.w3schools.com/js/js_object_prototypes.asp

Prototype vs Class in JavaScript, https://www.turing.com/kb/prototype-vs-class-in-js

JSON

JSON.stringify(), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

(JavaScript) Response: json() method, https://developer.mozilla.org/en-US/docs/Web/API/Response/json, “The json() method of the Response interface takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.” .. “Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object.”

JSON viewer chrome extension: https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?pli=1

Nice online JSON editor: https://jsoneditoronline.org/ .

Fetch

Quite extensive info. on using fetch including posting form data or json data: Using the Fetch API, https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Handling res.ok being false errors in fetch is covered in these two posts:

Axios

Notes on using Axios on frontend/browser, https://raviswdev.blogspot.com/2024/03/notes-on-using-axios-on-frontendbrowser.html.

Seems worth checking out: Axios Tutorial – Part 1 | Axios Get Post Put Delete Example Tutorial | Axios Tutorial Node js (3 part video series), https://www.youtube.com/watch?v=WoUwtDGdF6k , 14 min. 17 secs., published on Dec. 22, 2022 by ARCTutorials.

Error Handling

Custom errors, extending Error, https://javascript.info/custom-errors

Additional Info

Interesting video for quick coverage of JavaScript along with one small game project and a web app project using HTML, CSS and JS: Notes on freeCodeCamp.org Full Stack Web Development for Beginners video, https://raviswdev.blogspot.com/2024/03/notes-on-freecodecamporg-full-stack-web.html.

JavaScript Programming – Full Course, https://www.youtube.com/watch?v=jS4aFq5-91M , 7 hrs. 44 mins, published Jun 21, 2021 by freeCodeCamp.org (Created by Per Harald Borgen). [Claims to be part of Front End Developer Learning Path ... https://github.com/scrimba/learn-javascript ...Projects in the video: Passenger counter app, Blackjack game, (build) Chrome extension

JavaScript Crash Course – Tutorial for Complete Beginners, https://www.youtube.com/watch?v=XIOLqoPHCJ4 , 1 hr. 20 mins, published Feb 6, 2022 by Codevolution

Advanced JavaScript Crash Course, https://www.youtube.com/watch?v=R9I85RhI7Cg , 1 hr. 4 mins, published Feb 13, 2022 by Codevolution

Asynchronous JavaScript Crash Course, https://www.youtube.com/watch?v=exBgWAIeIeg , 1 hr. 28 mins, published Feb 20, 2022 by Codevolution

JavaScript Full Course (2023) – Beginner to Pro – Part 1, https://www.youtube.com/watch?v=SBmSRK3feww , 11 hrs 57 mins, published Apr 3, 2023 by SuperSimpleDev ... https://github.com/SuperSimpleDev/javascript-course/tree/main/2-copy-of-code
At the beginning of the video, the teacher says, “In this course, we’re going to learn how to build complex websites using JavaScript from a beginner to a professional level, and by the end of this course, we’re going to build amazon.com.” and shows screenshots of that app.

JavaScript Full Course (2023) – Beginner to Pro – Part 2 Lesson 14, https://www.youtube.com/watch?v=2exKokkn8o0 , 1 hr. 28 mins.

Long (3.5 hrs) video tutorial to browse through for specific topics (e.g. Arrow function) or to have a detailed beginner view of JavaScript: Learn JavaScript – Full Course for Beginners, https://www.youtube.com/watch?v=PkZNo7MFNFg, 3 hrs. 26 mins, published on 10 Dec. 2018 by freeCodeCamp.org.

https://www.youtube.com/@WebDevSimplified/search?query=javascript%20projects : Link for search for javascript projects In Web Dev Simplified youtube channel which lists a few such project videos. I have not checked it out but they could be interesting as the teacher seems to be pretty good.

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. – IIFE, https://developer.mozilla.org/en-US/docs/Glossary/IIFE
OMBD#4: Quick Async One-Liners With Async Immediately Invoked Function Expressions, https://itnext.io/1-minute-to-become-a-better-developer-4-aeabd6586396

Node.js and Express.js

Node.js and Express.js – Full Course, https://www.youtube.com/watch?v=Oe421EPjeBE , 8 hrs. 16 mins, published on Apr 1, 2021 by freeCodeCamp.org. Code: https://github.com/john-smilga/node-express-course

Above Node.js and Express.js tutorial video has an audio lag (lagging behind video) issue. Put up the following comment on the video: “Great video. Many thanks. But I am facing an audio lag (of around 15 seconds behind the video). At times I don’t follow a video part due to the audio lag. Replaying that video part usually helps me understand the part. I could not figure out a way in youtube settings to fix this audio lag. Going by some comments, I think others have also faced this issue. Does anybody have any solution to it? Thanks.”

[Not setup as a regular tutorial but has some useful background info. about Node.js:] Learn Node.js®, https://nodejs.org/en/learn

Seems to be Reference pages: https://nodejs.org/docs/latest/api/

The Node.js Event Loop, Timers, and process.nextTick(), https://nodejs.org/en/guides/event-loop-timers-and-nexttick#what-is-the-event-loop

https://expressjs.com/

express.Router section (towards end of page) in Routing, https://expressjs.com/en/guide/routing.html

The John Smilga (freeCodeCamp.org) tutorial code uses require instead of import:

Following article gives some info. on usage of “node:xx” in require as against simply “xx”: What are the node:fs, node:path etc. modules? https://stackoverflow.com/questions/67554506/what-are-the-nodefs-nodepath-etc-modules . The key info. seems to be that node: prefix identifies the module as a core module and so bypasses the require cache.

Info. about underscore and lodash js libraries which use only _ (variable?) which is used around 2 hrs 0 min. point in above Node.js and Express.js – Full Course video:

Around 2 hrs, 5 mins in above video, git commands are used. As of now, it is not clear to me whether for my needs, these git commands have to be understood. The point being explained in this part of the video is that after cloning the project without node modules, npm install does the task of going through dependencies in package.json and installing them, thus making the cloned project complete (with node modules).

How To Use Nodemon With Node.js, https://vegibit.com/how-to-use-nodemon-with-node-js

If content-type is not shown in Chrome Inspect Network Response header, try checking “Disable Cache” in panel near top of Inspect window and refresh. For me, that worked (content-type was shown and as application/json).

https://react-projects.netlify.app/ and https://react-project-6-tabs.netlify.app/ are the urls to bring up pages mentioned in NodeJS tutorial around 5 hrs. 23 mins.

Hacker News algolia api, https://hn.algolia.com/api

Postman app: https://www.postman.com/downloads/

2nd in series: Node.js Projects, https://www.youtube.com/watch?v=rltfdjcXjmk , around 10 hrs, published on Sep. 21, 2021 by Coding Addict. [This video follows up on Node.js and Express.js tutorial video. It covers MongoDB and Mongoose in the first project (TASK MANAGER). This coverage is from beginning of video till around 3 hrs 7 mins after which the next project (STORE API) starts. More about this part of the video is covered in the MongoDB and Mongoose related section.]

Notes about asyncWrapper function, https://raviswdev.blogspot.com/2024/03/notes-about-asyncwrapper-function.html.

Error handling

How do I handle 404 responses? section in FAQ, https://expressjs.com/en/starter/faq.html

Error Handling, http://expressjs.com/en/guide/error-handling.html#error-handling

Writing error handlers, https://expressjs.com/en/guide/error-handling.html#writing-error-handlers

Additional Info

Node command line program - REPL (read-eval-print-loop) session,  https://raviswdev.blogspot.com/2024/03/node-command-line-program-repl-read.html

[Based on quick browse, following video seems to be worth checking out in detail:] Node.js and Express.js – Complete Course for Beginners | Learn Node.js in 6 Hours, https://www.youtube.com/watch?v=ekRpc5YgVZU , 6 hrs, published on Jul 20, 2023 by Dipesh Malvia.

Have not checked it out but may be worth checking out: Node.js Full Course for Beginners | Complete All-in-One Tutorial | 7 Hours, https://www.youtube.com/watch?v=f2EqECiTBL8, 6 hrs 50 mins, published on Dec 3, 2021 by Dave Gray

Learn CORS In 6 Minutes, https://www.youtube.com/watch?v=PNtFSVU-YTI, 6 min. 5 secs., published on May 22, 2021 by Web Dev Simplified. Associated blog post: CORS (Cross-Origin Resource Sharing), https://blog.webdevsimplified.com/2021-05/cors/ , May 3, 2021.

MongoDB and Mongoose

Getting Started with MongoDB Atlas – A Modern Database!, https://www.youtube.com/watch?v=bBA9rUdqmgY , 19 min. 55 secs, published on Sep. 20, 2022 by MongoDB

Getting Started with MongoDB & Mongoose ODM (Object Data Modeling) Library, https://www.youtube.com/watch?v=bALyYC10ABw, 21 mins., published on May 24, 2022 by MongoDB

As mentioned earlier, Node.js Projects, https://www.youtube.com/watch?v=rltfdjcXjmk , around 10 hrs, published on Sep. 21, 2021 by Coding Addict follows up on Node.js and Express.js tutorial video and covers MongoDb and Mongoose in the first project (TASK MANAGER). This coverage is from beginning of video till around 3 hrs 7 mins.

Get Started with Atlas, https://www.mongodb.com/docs/atlas/getting-started/
[Then choose Atlas UI.]
The user interface is significanly different from the Node projects video.
To get connection string of default created database in Atlas MongoDB:
1) Go to Project (Project 0 was auto created in my case)
2) In the left pane click DEPLOYMENT -> Database
3) In the main pane, click Cluster 0 -> Connect
4) In the dialog, click Drivers under Connect to your application
5) Step 3 shows the connection string with a copy button. 
Also note that “npm install mongodb” has to run before mongodb connection request is made.

mongoose: elegant mongodb object modeling for node.js, https://mongoosejs.com/
“npm install mongoose” seems to be optional but no harm in running it. I ran it and it reported it is ‘up to date’. I am not sure if any packages were installed when I ran it. Perhaps npm install mongodb installs mongoose too?

Notes-Log about mongoDB access via mongoose errors after installation,  https://raviswdev.blogspot.com/2024/03/notes-log-about-mongodb-access-via.html .

Aliases with JavaScript Destructuring, https://davidwalsh.name/destructuring-alias
Example of such alias usage in Node Express and MongoDB/Mongoose video:
const { id: taskID } = req.params
id is destructured from params, and assigned an alias of taskID. Later code can refer to id as taskID.

Tutorial video project’s front-end uses normalize.css from https://github.com/necolas/normalize.css . From the latter page: “A modern alternative to CSS resets”, “Preserves useful defaults, unlike many CSS resets.”, “Normalizes styles for a wide range of elements.”…

Setting env variable in integrated terminal of VSCode on Windows seems to be an issue. The Express tutorial gives the command which seems to be for Apple Macintosh. https://www.twilio.com/blog/working-with-environment-variables-in-node-js-html provides same/similar command – “PORT=9999 node server.js” [We have to use app.js instead of server.js.] This does not work on my VSCode integrated terminal on Windows 10. A simple solution is to use .env file. Details are covered in the node.js section of the post: Notes-log on changing default port for React and Node.js on Windows, https://raviswdev.blogspot.com/2024/03/notes-log-on-changing-default-port-for.html. 

Models

https://mongoosejs.com/docs/models.html
From the above: “Models are fancy constructors compiled from Schema definitions. An instance of a model is called a document. Models are responsible for creating and reading documents from the underlying MongoDB database.”

models\Task.js has this statement which confused me and still is not so clear to me. I have given below my current understanding of it:
module.exports = mongoose.model(‘Task’, TaskSchema)
Now my understanding is that what is returned by mongoose.model(‘Task’, TaskSchema) is what is exported.
But what does mongoose.model(‘Task’, TaskSchema) return?
https://mongoosejs.com/docs/models.html states, “When you call mongoose.model() on a schema, Mongoose compiles a model for you.”

https://mongoosejs.com/docs/5.x/docs/api/model.html states:
“A Model is a class that’s your primary tool for interacting with MongoDB. An instance of a Model is called a Document.
In Mongoose, the term “Model” refers to subclasses of the mongoose.Model class. You should not use the mongoose.Model class directly. The mongoose.model() and connection.model() functions create subclasses of mongoose.Model as shown below.”

model with lowercase ‘m’ is a method/function of mongoose module. Model with uppercase ‘M’ is a class (which should not be used directly).

https://mongoosejs.com/docs/validation.html

Model Queries (includes find methods)

The model function creates (and returns I presume) a subclass of Model which can be used to do operations like find (get all documents in a collection), findOne (get one document in a collection), create (insert new document(s) in a collection) etc. [Doc ref. links: https://mongoosejs.com/docs/api/model.html#Model.find(), https://mongoosejs.com/docs/api/model.html#Model.findOne(), https://mongoosejs.com/docs/api/model.html#Model.create() ].

findOne() needs to be chained to .exec(), but findOneAndDelete() does not have to be OR should not be chained to .exec(). It is not clear to me from mongoose docs why that is the case.

How to Use findOneAndUpdate() in Mongoose, https://mongoosejs.com/docs/tutorials/findoneandupdate.html

As per tutorial video, when we use PUT method, the corresponding controller code should use additional option of overwrite: true when using findOneAndUpdate(). But current mongoose version docs do not show that option (perhaps it has been removed now). https://www.mongodb.com/community/forums/t/overwrite-true-not-working-in-findoneandupdate-in-mongodb/217812/3 suggests that Model.findOneAndReplace(), https://mongoosejs.com/docs/api/model.html#Model.findOneAndReplace() could be used. I think the right thing to do is to use PATCH and not spend time, as of now at least, on trying out Model.findOneAndReplace(), as PATCH seems to be the recommended way as against PUT.

https://mongoosejs.com/docs/queries.html

From the above:
“Queries are Not Promises
Mongoose queries are not promises. Queries are thenables, meaning they have a .then() method for async/await as a convenience. However, unlike promises, calling a query’s .then() executes the query, so calling then() multiple times will throw an error.”

https://mongoosejs.com/docs/queries.html states in the context of an example of using mongoose queries, about what is returned “For findOne() it is a potentially-null single document, find() a list of documents, count() the number of documents, update() the number of documents affected, etc.”. https://mongoosejs.com/docs/api/model.html#Model.find() only mentions that find returns «Query» without giving details of what that Query object is. So the earlier quote from https://mongoosejs.com/docs/queries.html is helpful.
Some info. on Query class is given here: How find() Works in Mongoose, https://thecodebarbarian.com/how-find-works-in-mongoose.html .

JSON Web Token (JWT)

[Below two articles cover user registration, database schema for it, (one article covers basic and admin roles for users), JWT. They seem to be quite exhaustive with lot of code snippets.]

[Only on JWT]: All You Need To Know About JWT In Express JS, https://www.simplilearn.com/tutorials/nodejs-tutorial/jwt-in-express-js 

ReactJS

Do You Know Enough JavaScript To Learn React, https://www.youtube.com/watch?v=JR9wsVYp8RQ, 6 min. 27 secs., published on Dec 14, 2021 by Web Dev Simplified

How to run React JS app in Visual studio code tutorial | Download and install react in VS Code 2023, https://www.youtube.com/watch?v=zuyH4QUuTZk, 11 mins.

How to Install React App In VsCode 2023, https://medium.com/@chauhanomprakash7206/how-to-install-react-app-in-vscode-2023-7cf3eb057a3c

React installation on Windows: Fixing npm ERR! enoent ENOENT,  https://raviswdev.blogspot.com/2024/03/react-installation-on-windows-fixing.html .

The main React tutorial (Dave Gray tutorial given below) I have used, uses Create React App (CRA). But ... Create React App is Officially DEAD!, https://www.youtube.com/watch?v=KhBj0g9DNzY , 5 min. 33 secs. Even if it is 'dead', Create React App can still be used, and I used it a lot while going through not only the Dave Gray tutorial but also some other React tutorials.

The alternative is Vite. I have used it and found it to be good. For more on it, see Vite, Console Ninja, https://raviswdev.blogspot.com/2024/03/vite-console-ninja.html . However while going through the tutorials using CRA, I chose to mainly use CRA. 

Notes on JSX, https://raviswdev.blogspot.com/2024/03/jsx.html

The Best Guide to Know What Is React, https://www.simplilearn.com/tutorials/reactjs-tutorial/what-is-reactjs

React JS Full Course for Beginners | Complete All-in-One Tutorial | 9 Hours, https://www.youtube.com/watch?v=RVFAyFWO4go , 8 hr 49 min, published on Sep 10, 2021 by Dave Gray. Source code: https://github.com/gitdagray/react_resources

Update video: React Router v6 in 20 Minutes | RRv6 Upgrade & Refactor Tutorial, https://www.youtube.com/watch?v=XBRLVRjZ3CQ , 21 min, published on Dec 7, 2021 by Dave Gray. [Source code for update too, is provided in above main video link.]

Procedure to build React tutorial project from its source files,  https://raviswdev.blogspot.com/2024/03/procedure-to-build-react-tutorial.html.

Building React Router part of Dave Gray tutorial, https://raviswdev.blogspot.com/2024/03/building-react-router-part-of-dave-gray.html

Tutorial on React: https://react.dev/learn


The 2023 guide to React debugging, https://raygun.com/blog/react-debugging-guide/

Notes on React useState, useRef, useContext hooks; custom hooks ...,  https://raviswdev.blogspot.com/2024/03/react-hooks.html

Notes on React useEffect, https://raviswdev.blogspot.com/2024/02/notes-on-react-useeffect.html



Usage of async await in Dave Gray’s react_fetch_api_data-main code,  https://raviswdev.blogspot.com/2024/03/usage-of-async-await-in-dave-grays.html

How to Use Axios in React [Beginners Guide 2023], https://www.upgrad.com/blog/axios-in-react/
A log on trying to build and run Axios chapter source code which uses React Router v5 is provided in Logs section of: Procedure to build React tutorial project from its source files,  https://raviswdev.blogspot.com/2024/03/procedure-to-build-react-tutorial.html .
Notes on a useAxios custom hook provided in a (Dave Gray tutorial) React tutorial video, https://raviswdev.blogspot.com/2024/02/notes-on-useaxios-custom-hook-in-react.html .

Trying out variations of code in TicTacToe app. in react tutorial,  https://raviswdev.blogspot.com/2024/03/trying-out-variations-of-code-in.html


React tutorial blog app: react_router_v6-main, react_axios_requests-main, export default axios.create,  https://raviswdev.blogspot.com/2024/03/react-tutorial-blog-app-reactrouterv6.html



Deploying React tutorial Grocery List app on Netlify,  https://raviswdev.blogspot.com/2024/03/deploying-react-tutorial-grocery-list.html

Deploying React tutorial Grocery List app to Github pages,  https://raviswdev.blogspot.com/2024/03/deploying-react-tutorial-grocery-list_21.html

Notes on copying local storage data to file and restoring it from file, https://raviswdev.blogspot.com/2024/02/notes-on-copying-local-storage-data-to.html .

Notes on possibility of using online JSON servers/bins instead of localhost json-server, https://raviswdev.blogspot.com/2024/02/notes-on-possibiity-of-using-online.html .

Deploying my variation of React tutorial Blog app using Local Storage on Netlify,  https://raviswdev.blogspot.com/2024/03/deploying-my-variation-of-react.html

...

Using robocopy to copy folder without node_modules subfolder(s) and using WinMerge and TreeSize to check, https://raviswdev.blogspot.com/2024/03/using-robocopy-to-copy-folder-without.html

Notes on Jio 4G Mobile Internet in Puttaparthi blocking some blog and software development related websites; Tests with Proxy, VPN and web cache, https://raviswdev.blogspot.com/2024/03/notes-on-jio-4g-mobile-internet-in.html

Additional Info

Overall, I am finding the series of videos given below, ‘ReactJS Tutorial – n – xxx’, published by Codevolution 4 years ago, to be quite appropriate, even if it is sometimes slow paced, for online learning of React. In most of these videos, I used 1.5 Playback speed and could understand the video at that speed.
React 18 Fundamentals Crash Course, https://www.youtube.com/watch?v=jLS0TkAHvRg , 1 hr. 50 mins, published Apr 10, 2022 by Codevolution

React Course – Beginner’s Tutorial for React JavaScript Library [2022], https://www.youtube.com/watch?v=bMknfKXIFA8 , around 12 hours, published on Jan 10, 2022 by freeCodeCamp.org. Description states, “Learn React by building eight real-world projects …”. The projects mentioned in the description details (time & segment) are: Digital Business Card, AirBnb Experiences Clone, Meme Generator, Notes app and Tenzies Game

Notes on wrapping content of HTML pre tag, and on finding out which HTML elements cause horizontal scrolling, https://raviswdev.blogspot.com/2024/02/notes-on-wrapping-content-of-html-pre.html

Why Is React a Library and Next.js a Framework?, https://builtin.com/software-engineering-perspectives/react-framework

Git

Git, GitHub, & GitHub Desktop for beginners, https://www.youtube.com/watch?v=8Dd7KRpKeaE , 22 min. 15 secs. More details

git init, git add ., git commit and git push are the key commands ... To add files to local git repo, commit and push to Github repo, see: Steps to deploy React app on Netlify and push later changes,  https://raviswdev.blogspot.com/2024/03/steps-to-deploy-react-app-on-netlify.html . This post also covers how to add changed files to staging area, commit and push to Github.

2.2 Git Basics - Recording Changes to the Repository, https://git-scm.com/book/en/v2/Git-Basics-Recording-Changes-to-the-Repository

'git status' lists the changed files (staged and not staged).

'git add .' seems to add only the modified files (and perhaps new files though I have not tested it with new file case) to staging area as afterwards, git status shows the modified files under "Changes to be committed" (before 'git add .', it shows them under "Changes not staged for commit").

Besides 'git status', 'git log', 'git log --stat' and 'git remote -v' are useful commands to inspect a local repo. [On my PC, "cawv-1406-blog-netlify-deploy-info\info-log.txt" file captures the output of such inspection of a local repo.]

'git diff' seems to show difference between current project code and last committed git local repo code.  Ref. page: https://git-scm.com/docs/git-diff uses somewhat different language (index, staging area etc.) but I think it means the same. When I used the command, the output showed differences between current project code and last committed git local repo code.

To scroll through the output:

Space : next page
Enter: next line
Up arrow, Down arrow: scroll up/down one line
Page Up, Page Downw: scroll up/down one page
Mouse wheel can be used to scroll up and down
Q: to quit
---------- 

I changed README.MD of BlogTutAPI directly on Github and committed the change. Running git status on PC did not report that BlogTutAPI was not in sync! Don't know why. Then I had to use git pull to sync. the local repo with Github. https://www.atlassian.com/git/tutorials/syncing/git-pull . After I saw that local git status was not reflecting the change, I tried to rollback the commit I had made on Github. But it seems such rollback is not recommended or something like that. So I opted for git pull which seems to have worked as expected.

Github

[Repeat of above entry:] Git, GitHub, & GitHub Desktop for beginners, https://www.youtube.com/watch?v=8Dd7KRpKeaE , 22 min. 15 secs. More details

Using Git and GitHub from Visual Studio Code

Using Git with Visual Studio Code (Official Beginner Tutorial), https://www.youtube.com/watch?v=i_23KUAEtUM, 6 min. 55 secs. More details

Clone and use a GitHub repository in Visual Studio Code, https://learn.microsoft.com/en-us/azure/developer/javascript/how-to/with-visual-studio-code/clone-github-repository

MERN Full Stack mini-project

MERN stands for MongoDB, Express, React.js and Node and applications (apps) created using these technologies is a full stack application (app). Ref: https://www.mongodb.com/mern-stack

Notes on rapid development of simple backend API server,  https://raviswdev.blogspot.com/2024/02/notes-on-rapid-development-of-simple.html

Notes-log on changing default port for React and Node.js on Windows, https://raviswdev.blogspot.com/2024/03/notes-log-on-changing-default-port-for.html. 

Notes on creating Node Express & MongoDB (simple) Blog API and refactoring React tutorial Blog App to use it, https://raviswdev.blogspot.com/2024/03/notes-on-creating-node-express-mongodb.html

How does Mongoose/MongoDB handle properties with undefined value when creating or updating document?, https://raviswdev.blogspot.com/2024/03/how-does-mongoosemongodb-handle.html

Notes on Node Express tutorial Blog API deployment attempts and eventual successful deployment on Cyclic.sh, https://raviswdev.blogspot.com/2024/03/log-of-node-express-tutorial-blog-api.html

Notes on simple authentication feature of Cyclic.sh Node Express App. Hosting service,  https://raviswdev.blogspot.com/2024/03/notes-on-simple-authentication-feature.html

Notes on Node.js related authentication and JSON Web Token (JWT),  https://raviswdev.blogspot.com/2024/03/notes-on-nodejs-related-authentication.html

Steps to deploy React app on Netlify and push later changes,  https://raviswdev.blogspot.com/2024/03/steps-to-deploy-react-app-on-netlify.html

Notes on using MongoDB command line tools to export/import MongoDB collections,  https://raviswdev.blogspot.com/2024/03/notes-on-using-mongodb-command-line.html

Notes on React blog app on Android mobile Chrome browser,  https://raviswdev.blogspot.com/2024/03/notes-on-react-blog-app-on-android.html

Notes on adding authentication to blog tutorial app on frontend and backend,  https://raviswdev.blogspot.com/2024/03/notes-on-adding-authentication-to-blog.html

Using WinMerge: To compare local project folder with Github repo; Modify one version of project to partially sync with another version, https://raviswdev.blogspot.com/2024/03/using-winmerge-to-compare-local-project.html

Upskilling to MERN web developer: Finished 2nd round of Roadmap to Learning Full Stack Web Development, https://raviswdev.blogspot.com/2024/03/upskilling-to-mern-web-developer.html

Comments

Post a Comment

Archive