### Chapter

* 00:00 GitHub Copilot
* 01:14 First Look in VS Code
* 04:38 The Truth about AI Programming
* 07:20 Replace Developers with AI

<h3 id="chapter">Chapter</h3>
<ul>
<li>00:00 GitHub Copilot</li>
<li>01:14 First Look in VS Code</li>
<li>04:38 The Truth about AI Programming</li>
<li>07:20 Replace Developers with AI</li>
</ul>


The Truth about Github Copilot

### Chapters

* 00:00 Google Sheets Database?
* 00:35 Pros & Cons
* 01:15 Create a Spreadsheet
* 01:49 Create Next.js App
* 02:40 Ways to Authenticate Google APIs
* 03:34 GCP Service Account
* 04:36 Next Env Variables
* 05:07 Google API Auth
* 06:07 Query the Speadsheet



<h3 id="chapters">Chapters</h3>
<ul>
<li>00:00 Google Sheets Database?</li>
<li>00:35 Pros &amp; Cons</li>
<li>01:15 Create a Spreadsheet</li>
<li>01:49 Create Next.js App</li>
<li>02:40 Ways to Authenticate Google APIs</li>
<li>03:34 GCP Service Account</li>
<li>04:36 Next Env Variables</li>
<li>05:07 Google API Auth</li>
<li>06:07 Query the Speadsheet</li>
</ul>


Google Sheets as Database


* 00:00 Intro
* 00:35 1. VS Code CLI
* 01:03 2. Release the Mouse
* 01:45 3. Command Palette Ctrl+P
* 02:10 4. Run Commands
* 02:25 5. Quokka
* 02:43 6. Find Symbols with @
* 03:14 7. Find symbols with #
* 03:36 8. Move Around Quickly
* 04:07 9. Multiline Editing
* 04:23 10. Auto Rename Tag
* 04:47 11. Delete or move a line
* 05:16 12. Highlight & Comment Lines
* 05:39 13. JS Doc Extension
* 06:07 14. Better Comments
* 06:20 15. Integrated Terminal
* 07:14 16. Tasks
* 07:38 17. Git Source Control
* 08:26 18. Git Lens Extension
* 08:40 19. Remote Repositories
* 09:14 20. Remote SSH & Containers
* 09:31 21. Custom Snippets
* 10:01 22. Community Snippets
* 10:13 23. Auto-create directories
* 10:29 24. Paste as JSON
* 10:50 25. Rename Symbol


<ul>
<li>00:00 Intro</li>
<li>00:35 1. VS Code CLI</li>
<li>01:03 2. Release the Mouse</li>
<li>01:45 3. Command Palette Ctrl+P</li>
<li>02:10 4. Run Commands</li>
<li>02:25 5. Quokka</li>
<li>02:43 6. Find Symbols with @</li>
<li>03:14 7. Find symbols with #</li>
<li>03:36 8. Move Around Quickly</li>
<li>04:07 9. Multiline Editing</li>
<li>04:23 10. Auto Rename Tag</li>
<li>04:47 11. Delete or move a line</li>
<li>05:16 12. Highlight &amp; Comment Lines</li>
<li>05:39 13. JS Doc Extension</li>
<li>06:07 14. Better Comments</li>
<li>06:20 15. Integrated Terminal</li>
<li>07:14 16. Tasks</li>
<li>07:38 17. Git Source Control</li>
<li>08:26 18. Git Lens Extension</li>
<li>08:40 19. Remote Repositories</li>
<li>09:14 20. Remote SSH &amp; Containers</li>
<li>09:31 21. Custom Snippets</li>
<li>10:01 22. Community Snippets</li>
<li>10:13 23. Auto-create directories</li>
<li>10:29 24. Paste as JSON</li>
<li>10:50 25. Rename Symbol</li>
</ul>


25 VS Code Productivity Tips and Speed Hacks

Learn how Hasura can instantly turn your SQL database into a GraphQL API. 

[Github Hasura](https://github.com/hasura/graphql-engine)

Hasura is a privately held software technology company that builds developer tooling products, including open source tools, backend as a service and platform as a service products. 

The Hasura GraphQL Engine provides GraphQL APIs over new or existing Postgres databases.

<p>Learn how Hasura can instantly turn your SQL database into a GraphQL API. </p>
<p><a href="https://github.com/hasura/graphql-engine">Github Hasura</a></p>
<p>Hasura is a privately held software technology company that builds developer tooling products, including open source tools, backend as a service and platform as a service products. </p>
<p>The Hasura GraphQL Engine provides GraphQL APIs over new or existing Postgres databases.</p>


Hasura in 100 Seconds

GUN is a decentralized graph database (or graph synchronization protocol) . Learn how to use the GUN JavaScript API and start writing data to your own peer-to-peer network. 

[Github Gun](https://github.com/amark/gun)

[Gun Website](https://gun.eco/)

<p>GUN is a decentralized graph database (or graph synchronization protocol) . Learn how to use the GUN JavaScript API and start writing data to your own peer-to-peer network. </p>
<p><a href="https://github.com/amark/gun">Github Gun</a></p>
<p><a href="https://gun.eco/">Gun Website</a></p>


GUN Decentralized Graph DB

Hey there everyone today I have another special project. We will be building a nice looking application that is able to load data from our own backend coded in Node, Express and MongoDB and into our frontend using React to
display, filter and sort data in a nice looking UI using Material UI. 

With this project I will also show you how to properly handle error in your express API and how to do some advanced API querying features with express and mongoose. 

[MongoDB Atlas](https://www.mongodb.com/cloud/atlas)

[React Docs](https://reactjs.org/)

[Axios](https://www.npmjs.com/package/axios)
[Dotenv](https://www.npmjs.com/package/dotenv)
[Express](https://www.npmjs.com/package/express)
[Material UI](https://material-ui.com/)

[Github Starter](https://github.com/LloydJanseVanRensburg/mern-filtering-tutorial/tree/starting-files)
[Github Full Project](https://github.com/LloydJanseVanRensburg/mern-filtering-tutorial/tree/master)

### Content

* 00:00:00 Intro & Demo
* 00:02:53 Project Folder Layout and Boilerplate
* 00:10:35 Setting Up Database Connection
* 00:15:07 Atlas Cluster Setup
* 00:20:09 Setting Up Routes and Controllers
* 00:26:17 Creating Routes in Postman
* 00:29:11 Creating Bootcamp Model
* 00:33:55 Setting up Global Error Handler
* 00:47:49 Finishing CRUD operations on Bootcamps
* 00:56:13 Handling Filtering on Backend
* 01:09:15 Handling Sorting on Backend
* 01:16:03 Frontend Routing and Navbar
* 01:21:44 Starting on Bootcamps Page
* 01:24:06 Getting Data from API
* 01:20:01 Displaying Bootcamp Cards
* 01:42:28 Filtering part of UI
* 01:53:06 Managing state and using useEffect to watch changes
* 02:06:00 Return ui values from api
* 02:22:00 Updating UI after refresh
* 02:31:53 Clear Button & Outro Demo

<p>Hey there everyone today I have another special project. We will be building a nice looking application that is able to load data from our own backend coded in Node, Express and MongoDB and into our frontend using React to
display, filter and sort data in a nice looking UI using Material UI. </p>
<p>With this project I will also show you how to properly handle error in your express API and how to do some advanced API querying features with express and mongoose. </p>
<p><a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a></p>
<p><a href="https://reactjs.org/">React Docs</a></p>
<p><a href="https://www.npmjs.com/package/axios">Axios</a>
<a href="https://www.npmjs.com/package/dotenv">Dotenv</a>
<a href="https://www.npmjs.com/package/express">Express</a>
<a href="https://material-ui.com/">Material UI</a></p>
<p><a href="https://github.com/LloydJanseVanRensburg/mern-filtering-tutorial/tree/starting-files">Github Starter</a>
<a href="https://github.com/LloydJanseVanRensburg/mern-filtering-tutorial/tree/master">Github Full Project</a></p>
<h3 id="content">Content</h3>
<ul>
<li>00:00:00 Intro &amp; Demo</li>
<li>00:02:53 Project Folder Layout and Boilerplate</li>
<li>00:10:35 Setting Up Database Connection</li>
<li>00:15:07 Atlas Cluster Setup</li>
<li>00:20:09 Setting Up Routes and Controllers</li>
<li>00:26:17 Creating Routes in Postman</li>
<li>00:29:11 Creating Bootcamp Model</li>
<li>00:33:55 Setting up Global Error Handler</li>
<li>00:47:49 Finishing CRUD operations on Bootcamps</li>
<li>00:56:13 Handling Filtering on Backend</li>
<li>01:09:15 Handling Sorting on Backend</li>
<li>01:16:03 Frontend Routing and Navbar</li>
<li>01:21:44 Starting on Bootcamps Page</li>
<li>01:24:06 Getting Data from API</li>
<li>01:20:01 Displaying Bootcamp Cards</li>
<li>01:42:28 Filtering part of UI</li>
<li>01:53:06 Managing state and using useEffect to watch changes</li>
<li>02:06:00 Return ui values from api</li>
<li>02:22:00 Updating UI after refresh</li>
<li>02:31:53 Clear Button &amp; Outro Demo</li>
</ul>


MERN stack project (Advance Filtering, Error Handling, Material-UI)

Async Await is heaven... until error handling comes into play. Learn how to avoid try/catch hell when writing async JavaScript code. 

<p>Async Await is heaven... until error handling comes into play. Learn how to avoid try/catch hell when writing async JavaScript code. </p>


Async Await try-catch hell

The stack you will use: React (custom hooks, context, portals), Firebase (Firestore/auth), Compound & Styled components!

In this React Tutorial, we will build a Netflix clone! This React project has multiple pages: 

* Home
* Browse (which uses Firebase authentication)
* Sign in
* Sign up. 

The sign in will connect to `Firebase` when a user tries to sign in, and when a user signs up, we will use `Firebase` auth to store the user in the `Firebase` auth database. I built this app using `React` and uses `Styled Components` for all the styling we implement. 

You will need knowledge of `React` (useEffect, useState, useContext) and you will need JavaScript knowledge for using higher order functions such as map, filter, reduce, and find. We will use `Fuse.js` for live search, and we will test all our components using `React` Testing Library. And of course we will use `React router` for navigation!

⌛Timestamps

* 00:00:00 - Overview/demo
* 00:04:30 - Architecture
* 00:08:08 - Project dependencies
* 00:10:30 - Installing create react app
* 00:13:03 - Project cleanup
* 00:21:41 - Yarn/npm port tip
* 00:24:35 - Creating files/folders
* 00:29:54 - Creating the Jumbotron component
* 00:55:19 - Styled components GlobalStyles
* 00:57:51 - Implementing Normalize.css
* 00:58:55 - Installing ESLint, Prettier
* 01:01:33 - Item component
* 01:03:59 - Item component direction prop
* 01:05:20 - Container derivative component
* 01:07:22 - Modules, errors
* 01:12:00 - Footer component
* 01:30:28 - Accordion component
* 01:34:37 - useContext for Compound Components
* 01:43:29 - VSCode tip for importing
* 01:55:59 - Accordion component body
* 02:00:07 - Accordion component review
* 02:04:14 - Opt-form component creation
* 02:16:55 - Opt-form component review
* 02:22:06 - Constants - routes
* 02:28:57 - Pages: Home, Browse, SignIn, SignUp
* 02:31:04 - Creating React Router Routes
* 02:33:23 - Header component
* 03:09:10 - Template review
* 03:10:16 - Firebase connection
* 03:24:14 - React Context for Firebase
* 03:28:56 - SignIn Page
* 03:54:52 - Firebase top level authentication
* 03:58:56 - Firebase console authentication
* 04:00:25 - Debugging error auth (if user is in the db or not)
* 04:01:51 - SignUp Page
* 04:09:22 - Registration page, routes debugging
* 04:14:42 - Navigation
* 04:16:00 - Helpers: routes (React router auth)
* 04:26:21 - Protect routes
* 04:36:24 - Creating an auth listener (custom hook)
* 04:40:00 - Tip around authentication state changing
* 04:44:19 - Helpers routes review
* 04:47:18 - Browse page (categories films & series) component
* 04:49:32 - Custom hook:browse page
* 04:58:02 - Utils directory and setup
* 05:05:39 - Browse container
* 05:07:19 - Profiles container
* 05:12:34 - Profiles component
* 05:22:06 - Loading profile component
* 05:31:54 - Spinner review
* 05:43:19 - Header profile
* 06:10:50 - Header profile: dropdown, chevron
* 06:15:45 - Header search styling
* 06:29:55 - Header play button style
* 06:35:00 - Card list (categories, slides) - films & series logic
* 06:55:33 - Entities logic start
* 06:58:18 - Player component and Card component styling
* 07:00:58 - Movie recommendations
* 07:01:01 - Feature component (showing)
* 07:03:49 - Passing props into our Feature (item obj)
* 07:06:16 - More styling on the card style
* 07:20:17 - Debugging the slides
* 07:30:18 - Debugging play button and card
* 07:33:07 - Player component
* 07:48:25 - Review player video
* 07:49:00 - Live search using Fuse.js
* 07:53:09 - Review our project!
* 07:56:44 - Testing setup
* 08:02:39 - Player test
* 08:16:04 - Footer test
* 08:20:19 - Accordion test
* 08:27:44 - Card test
* 08:37:24 - Feature test
* 08:41:24 - Form test
* 08:49:24 - Opt form test
* 08:52:04 - Player test
* 08:52:39 - Loading test
* 08:57:09 - Profile test
* 09:01:29 - Jumbotron test
* 09:06:04 - Header test
* 09:23:19 - Home page test
* 09:32:44 - Profiles test
* 09:34:24 - Adding test-ids to Profiles
* 09:35:39 - Selection filter test
* 09:45:24 - SignIn Test
* 09:55:49 - SignUp Test
* 09:59:29 - We are done! Review and sign off!

🖥️  Technologies used

* JavaScript
* React
* React Hooks
* React Testing Library
* Styled Components
* The design pattern of Compound Components.

<p>The stack you will use: React (custom hooks, context, portals), Firebase (Firestore/auth), Compound &amp; Styled components!</p>
<p>In this React Tutorial, we will build a Netflix clone! This React project has multiple pages: </p>
<ul>
<li>Home</li>
<li>Browse (which uses Firebase authentication)</li>
<li>Sign in</li>
<li>Sign up. </li>
</ul>
<p>The sign in will connect to <code>Firebase</code> when a user tries to sign in, and when a user signs up, we will use <code>Firebase</code> auth to store the user in the <code>Firebase</code> auth database. I built this app using <code>React</code> and uses <code>Styled Components</code> for all the styling we implement. </p>
<p>You will need knowledge of <code>React</code> (useEffect, useState, useContext) and you will need JavaScript knowledge for using higher order functions such as map, filter, reduce, and find. We will use <code>Fuse.js</code> for live search, and we will test all our components using <code>React</code> Testing Library. And of course we will use <code>React router</code> for navigation!</p>
<p>⌛Timestamps</p>
<ul>
<li>00:00:00 - Overview/demo</li>
<li>00:04:30 - Architecture</li>
<li>00:08:08 - Project dependencies</li>
<li>00:10:30 - Installing create react app</li>
<li>00:13:03 - Project cleanup</li>
<li>00:21:41 - Yarn/npm port tip</li>
<li>00:24:35 - Creating files/folders</li>
<li>00:29:54 - Creating the Jumbotron component</li>
<li>00:55:19 - Styled components GlobalStyles</li>
<li>00:57:51 - Implementing Normalize.css</li>
<li>00:58:55 - Installing ESLint, Prettier</li>
<li>01:01:33 - Item component</li>
<li>01:03:59 - Item component direction prop</li>
<li>01:05:20 - Container derivative component</li>
<li>01:07:22 - Modules, errors</li>
<li>01:12:00 - Footer component</li>
<li>01:30:28 - Accordion component</li>
<li>01:34:37 - useContext for Compound Components</li>
<li>01:43:29 - VSCode tip for importing</li>
<li>01:55:59 - Accordion component body</li>
<li>02:00:07 - Accordion component review</li>
<li>02:04:14 - Opt-form component creation</li>
<li>02:16:55 - Opt-form component review</li>
<li>02:22:06 - Constants - routes</li>
<li>02:28:57 - Pages: Home, Browse, SignIn, SignUp</li>
<li>02:31:04 - Creating React Router Routes</li>
<li>02:33:23 - Header component</li>
<li>03:09:10 - Template review</li>
<li>03:10:16 - Firebase connection</li>
<li>03:24:14 - React Context for Firebase</li>
<li>03:28:56 - SignIn Page</li>
<li>03:54:52 - Firebase top level authentication</li>
<li>03:58:56 - Firebase console authentication</li>
<li>04:00:25 - Debugging error auth (if user is in the db or not)</li>
<li>04:01:51 - SignUp Page</li>
<li>04:09:22 - Registration page, routes debugging</li>
<li>04:14:42 - Navigation</li>
<li>04:16:00 - Helpers: routes (React router auth)</li>
<li>04:26:21 - Protect routes</li>
<li>04:36:24 - Creating an auth listener (custom hook)</li>
<li>04:40:00 - Tip around authentication state changing</li>
<li>04:44:19 - Helpers routes review</li>
<li>04:47:18 - Browse page (categories films &amp; series) component</li>
<li>04:49:32 - Custom hook:browse page</li>
<li>04:58:02 - Utils directory and setup</li>
<li>05:05:39 - Browse container</li>
<li>05:07:19 - Profiles container</li>
<li>05:12:34 - Profiles component</li>
<li>05:22:06 - Loading profile component</li>
<li>05:31:54 - Spinner review</li>
<li>05:43:19 - Header profile</li>
<li>06:10:50 - Header profile: dropdown, chevron</li>
<li>06:15:45 - Header search styling</li>
<li>06:29:55 - Header play button style</li>
<li>06:35:00 - Card list (categories, slides) - films &amp; series logic</li>
<li>06:55:33 - Entities logic start</li>
<li>06:58:18 - Player component and Card component styling</li>
<li>07:00:58 - Movie recommendations</li>
<li>07:01:01 - Feature component (showing)</li>
<li>07:03:49 - Passing props into our Feature (item obj)</li>
<li>07:06:16 - More styling on the card style</li>
<li>07:20:17 - Debugging the slides</li>
<li>07:30:18 - Debugging play button and card</li>
<li>07:33:07 - Player component</li>
<li>07:48:25 - Review player video</li>
<li>07:49:00 - Live search using Fuse.js</li>
<li>07:53:09 - Review our project!</li>
<li>07:56:44 - Testing setup</li>
<li>08:02:39 - Player test</li>
<li>08:16:04 - Footer test</li>
<li>08:20:19 - Accordion test</li>
<li>08:27:44 - Card test</li>
<li>08:37:24 - Feature test</li>
<li>08:41:24 - Form test</li>
<li>08:49:24 - Opt form test</li>
<li>08:52:04 - Player test</li>
<li>08:52:39 - Loading test</li>
<li>08:57:09 - Profile test</li>
<li>09:01:29 - Jumbotron test</li>
<li>09:06:04 - Header test</li>
<li>09:23:19 - Home page test</li>
<li>09:32:44 - Profiles test</li>
<li>09:34:24 - Adding test-ids to Profiles</li>
<li>09:35:39 - Selection filter test</li>
<li>09:45:24 - SignIn Test</li>
<li>09:55:49 - SignUp Test</li>
<li>09:59:29 - We are done! Review and sign off!</li>
</ul>
<p>🖥️  Technologies used</p>
<ul>
<li>JavaScript</li>
<li>React</li>
<li>React Hooks</li>
<li>React Testing Library</li>
<li>Styled Components</li>
<li>The design pattern of Compound Components.</li>
</ul>


Netflix Clone - React Tutorial - Styled Components - Firebase (Firestore & Auth)

Learn how to get started and get proficient with Next.js. 

⚠️ Minor error in course- At [5:15](https://www.youtube.com/watch?v=1WmNXEVia8I&t=315s), to get to that Next.js starting point, please do the following:
1. Run the command: `npx create-next-app next-recipe-app`, let that build
2. Go into the folder: `cd next-recipe-app`
3. Open in your code editor of choice!

Through building a full-stack recipe app with Next.js, Sanity.io, and Vercel, you'll learn how to set up dynamic routing, pre-render, pull content from external APIs, set up serverless functions, offer real-time content previews, and deploy your app on the web.

✏️ Your instructor for this course is Kapehe, devrel specialist at Sanity.io.
🔗 Kapehe's website: [https://kapehe.io](https://kapehe.io)
🎥 On YouTube: [https://www.youtube.com/c/BetterDevs](https://www.youtube.com/c/BetterDevs)

💻 Code: [Github](https://github.com/sanity-io/next-recipe-app)

🔗  Sign up for Sanity.io here: [https://www.sanity.io/](https://www.sanity.io/)

⭐️ Course Contents ⭐️
* (0:00:00) Introduction 
* (0:02:52) What is Next.js
* (0:04:05) Tools: Node.js, VS Code, and the command line
* (0:05:15) Setting up Next.js
* (0:10:02) Setting the Sanity Studio CMS
* (0:53:12) Connecting Next.js with your content lake
* (1:04:54) Making a simple navigation bar in _app.js
* (1:10:45) Making your first page template in index.js
* (1:30:15) Setting up dynamic routes with [slug].js
* (1:36:14) Diving into data fetching and pre-rendering with getStaticPaths & getStaticProps 
* (2:01:36) Create a like button with API routes and serverless functions
* (2:16:46) Adding live real-time preview with Sanity.io's content lake
* (2:25:11) Set up automatic deployment with GitHub and Vercel
* (2:35:18) Summary: What you have learned and next steps

<p>Learn how to get started and get proficient with Next.js. </p>
<p>⚠️ Minor error in course- At <a href="https://www.youtube.com/watch?v=1WmNXEVia8I&amp;t=315s">5:15</a>, to get to that Next.js starting point, please do the following:</p>
<ol>
<li>Run the command: <code>npx create-next-app next-recipe-app</code>, let that build</li>
<li>Go into the folder: <code>cd next-recipe-app</code></li>
<li>Open in your code editor of choice!</li>
</ol>
<p>Through building a full-stack recipe app with Next.js, Sanity.io, and Vercel, you&#39;ll learn how to set up dynamic routing, pre-render, pull content from external APIs, set up serverless functions, offer real-time content previews, and deploy your app on the web.</p>
<p>✏️ Your instructor for this course is Kapehe, devrel specialist at Sanity.io.
🔗 Kapehe&#39;s website: <a href="https://kapehe.io">https://kapehe.io</a>
🎥 On YouTube: <a href="https://www.youtube.com/c/BetterDevs">https://www.youtube.com/c/BetterDevs</a></p>
<p>💻 Code: <a href="https://github.com/sanity-io/next-recipe-app">Github</a></p>
<p>🔗  Sign up for Sanity.io here: <a href="https://www.sanity.io/">https://www.sanity.io/</a></p>
<p>⭐️ Course Contents ⭐️</p>
<ul>
<li>(0:00:00) Introduction </li>
<li>(0:02:52) What is Next.js</li>
<li>(0:04:05) Tools: Node.js, VS Code, and the command line</li>
<li>(0:05:15) Setting up Next.js</li>
<li>(0:10:02) Setting the Sanity Studio CMS</li>
<li>(0:53:12) Connecting Next.js with your content lake</li>
<li>(1:04:54) Making a simple navigation bar in _app.js</li>
<li>(1:10:45) Making your first page template in index.js</li>
<li>(1:30:15) Setting up dynamic routes with [slug].js</li>
<li>(1:36:14) Diving into data fetching and pre-rendering with getStaticPaths &amp; getStaticProps </li>
<li>(2:01:36) Create a like button with API routes and serverless functions</li>
<li>(2:16:46) Adding live real-time preview with Sanity.io&#39;s content lake</li>
<li>(2:25:11) Set up automatic deployment with GitHub and Vercel</li>
<li>(2:35:18) Summary: What you have learned and next steps</li>
</ul>


Next.js for Beginners - Full Course

🚨 IMPORTANT:

Learn React Today Course: [Web Dev Simplified](https://courses.webdevsimplified.com/learn-react-today)

Writing code is easy. Writing clean code, though, is much harder. In this video I take a look at three different React code examples from a beginner, intermediate, and advanced web developer. The goal of this is to show you how a senior developer will think while programming and how they will structure their code to be as clean and well-written as possible.

🧠 Concepts Covered:

* How senior developers think
* How to use React state properly
* How to use React useEffect properly
* What to think about when programming
* The differences between senior and junior developers

<p>🚨 IMPORTANT:</p>
<p>Learn React Today Course: <a href="https://courses.webdevsimplified.com/learn-react-today">Web Dev Simplified</a></p>
<p>Writing code is easy. Writing clean code, though, is much harder. In this video I take a look at three different React code examples from a beginner, intermediate, and advanced web developer. The goal of this is to show you how a senior developer will think while programming and how they will structure their code to be as clean and well-written as possible.</p>
<p>🧠 Concepts Covered:</p>
<ul>
<li>How senior developers think</li>
<li>How to use React state properly</li>
<li>How to use React useEffect properly</li>
<li>What to think about when programming</li>
<li>The differences between senior and junior developers</li>
</ul>


How To Write Better Code As A Web Developer

Today we will be building and deploying a React Project. This project will be covering all of the basic knowledge needed in react. We will be working with an API to pull out data into our app.

Things we will be learning in this app:
* Routing in react
* Working with different hooks (useState, useEffect, useReducer, useContext)
* Working with Axios to make AJAX request
* Making request to and API
* Setting up our global state with the Context API
* Doing some basic CSS styling and CSS Variables
* Deploying to web server

API Link:

[https://www.tvmaze.com/api](https://www.tvmaze.com/api)

Github Link:

[Lloyd Github](https://github.com/LloydJanseVanRensburg/TV_SHOW_APP)

<p>Today we will be building and deploying a React Project. This project will be covering all of the basic knowledge needed in react. We will be working with an API to pull out data into our app.</p>
<p>Things we will be learning in this app:</p>
<ul>
<li>Routing in react</li>
<li>Working with different hooks (useState, useEffect, useReducer, useContext)</li>
<li>Working with Axios to make AJAX request</li>
<li>Making request to and API</li>
<li>Setting up our global state with the Context API</li>
<li>Doing some basic CSS styling and CSS Variables</li>
<li>Deploying to web server</li>
</ul>
<p>API Link:</p>
<p><a href="https://www.tvmaze.com/api">https://www.tvmaze.com/api</a></p>
<p>Github Link:</p>
<p><a href="https://github.com/LloydJanseVanRensburg/TV_SHOW_APP">Lloyd Github</a></p>


Build a TV Show React App and Deploy It

* [Introduction](https://www.youtube.com/watch?v=yU0Gh9T7sq8&t=0s)
* [ForEach](https://www.youtube.com/watch?v=yU0Gh9T7sq8&t=111s)
* [Map](https://www.youtube.com/watch?v=yU0Gh9T7sq8&t=382s)
* [Filter](https://www.youtube.com/watch?v=yU0Gh9T7sq8&t=552s)
* [Break](https://www.youtube.com/watch?v=yU0Gh9T7sq8&t=725s)
* [Reduce](https://www.youtube.com/watch?v=yU0Gh9T7sq8&t=755s)
* [Final Words](https://www.youtube.com/watch?v=yU0Gh9T7sq8&t=1043s)

---

GitHub Gists

ForEach:
[ForEach Gist](https://gist.github.com/SimonHoiberg/fbffccff4116d14d80eaad8fbf7c8ef0)

Map:
[Map Gist](https://gist.github.com/SimonHoiberg/e284bce68aab658d5ae40df2025a2172)

Filter:
[Filter Gist](https://gist.github.com/SimonHoiberg/e82a40a1ebc2d251f7d0dce6e394bc9e)

Reduce:
[Reduce Gist](https://gist.github.com/SimonHoiberg/1857fc8e012ebffc4c0a84601b873a4b)


<ul>
<li><a href="https://www.youtube.com/watch?v=yU0Gh9T7sq8&amp;t=0s">Introduction</a></li>
<li><a href="https://www.youtube.com/watch?v=yU0Gh9T7sq8&amp;t=111s">ForEach</a></li>
<li><a href="https://www.youtube.com/watch?v=yU0Gh9T7sq8&amp;t=382s">Map</a></li>
<li><a href="https://www.youtube.com/watch?v=yU0Gh9T7sq8&amp;t=552s">Filter</a></li>
<li><a href="https://www.youtube.com/watch?v=yU0Gh9T7sq8&amp;t=725s">Break</a></li>
<li><a href="https://www.youtube.com/watch?v=yU0Gh9T7sq8&amp;t=755s">Reduce</a></li>
<li><a href="https://www.youtube.com/watch?v=yU0Gh9T7sq8&amp;t=1043s">Final Words</a></li>
</ul>
<hr>
<p>GitHub Gists</p>
<p>ForEach:
<a href="https://gist.github.com/SimonHoiberg/fbffccff4116d14d80eaad8fbf7c8ef0">ForEach Gist</a></p>
<p>Map:
<a href="https://gist.github.com/SimonHoiberg/e284bce68aab658d5ae40df2025a2172">Map Gist</a></p>
<p>Filter:
<a href="https://gist.github.com/SimonHoiberg/e82a40a1ebc2d251f7d0dce6e394bc9e">Filter Gist</a></p>
<p>Reduce:
<a href="https://gist.github.com/SimonHoiberg/1857fc8e012ebffc4c0a84601b873a4b">Reduce Gist</a></p>


Create your own Array Methods

> Async/Await is the extension of promises which we get as a support in the language.

### Async

It simply allows us to write promises based code as if it was synchronous and it checks that we are not breaking the execution thread. It operates asynchronously via the event-loop. Async functions will always return a value. It makes sure that a promise is returned and if it is not returned then javascript automatically wraps it in a promise which is resolved with its value.

```javascript
const getData = async() => {
    var data = "Hello World";
    return data;
}
  
getData().then(data => console.log(data));
// Output: Hello World
```

### Await

Await function is used to wait for the promise. It could be used within the async block only. It makes the code wait until the promise returns a result. It only makes the async block wait.

```javascript
const getData = async() => {
    var y = await "Hello World";
    console.log(y);
}
  
console.log(1);
getData();
console.log(2);
// Output: 
// 1
// 2
// Hello World
```

Several reference to understand async/await more: 

* [GeeksForGeeks](https://www.geeksforgeeks.org/async-await-function-in-javascript/)
* [Javascript Info](https://javascript.info/async-await)

There is an interesting explanation from JSConf video on youtube explaining `event loop` an important topic to understand async/await deeper.

[Jake Archibald: In The Loop - JSConf.Asia](https://www.youtube.com/watch?v=cCOL7MC4Pl0)

<blockquote>
<p>Async/Await is the extension of promises which we get as a support in the language.</p>
</blockquote>
<h3 id="async">Async</h3>
<p>It simply allows us to write promises based code as if it was synchronous and it checks that we are not breaking the execution thread. It operates asynchronously via the event-loop. Async functions will always return a value. It makes sure that a promise is returned and if it is not returned then javascript automatically wraps it in a promise which is resolved with its value.</p>
<pre><code class="language-javascript">const getData = async() =&gt; {
    var data = &quot;Hello World&quot;;
    return data;
}
  
getData().then(data =&gt; console.log(data));
// Output: Hello World
</code></pre>
<h3 id="await">Await</h3>
<p>Await function is used to wait for the promise. It could be used within the async block only. It makes the code wait until the promise returns a result. It only makes the async block wait.</p>
<pre><code class="language-javascript">const getData = async() =&gt; {
    var y = await &quot;Hello World&quot;;
    console.log(y);
}
  
console.log(1);
getData();
console.log(2);
// Output: 
// 1
// 2
// Hello World
</code></pre>
<p>Several reference to understand async/await more: </p>
<ul>
<li><a href="https://www.geeksforgeeks.org/async-await-function-in-javascript/">GeeksForGeeks</a></li>
<li><a href="https://javascript.info/async-await">Javascript Info</a></li>
</ul>
<p>There is an interesting explanation from JSConf video on youtube explaining <code>event loop</code> an important topic to understand async/await deeper.</p>
<p><a href="https://www.youtube.com/watch?v=cCOL7MC4Pl0">Jake Archibald: In The Loop - JSConf.Asia</a></p>


The Async Await Promised

## Performance Benchmarking

You may see a clear benchmarking between i9 and M1 on Alexander YT Channel below : 

[M1 VS Intel Benchmark](https://www.youtube.com/watch?v=m-xvjDVNgrQ)

## Best Dev Stack for M1

Javascript, SwiftUI, OpenCV and Xcode are taking the most benefits from M1 cpu. You may see Alexander videos about this below :

* [Javascript](https://www.youtube.com/watch?v=aa--J-wscOk)
* [SwitftUI](https://www.youtube.com/watch?v=-vEOVHuK08c)
* [OpenCV](https://www.youtube.com/watch?v=1f_ahSt_UI0)
* [Xcode](https://www.youtube.com/watch?v=dM_bP_8aPaU)

## Worst Dev Stack for M1

Android is the worst for M1 cpu right now. Take a look at Alexander video below :

[Why is this worst!](https://www.youtube.com/watch?v=YjUCXGGJu7E)

## Summary

Overall, M1 is really put a boost on may workflows and eventually gaming. 

<h2 id="performance-benchmarking">Performance Benchmarking</h2>
<p>You may see a clear benchmarking between i9 and M1 on Alexander YT Channel below : </p>
<p><a href="https://www.youtube.com/watch?v=m-xvjDVNgrQ">M1 VS Intel Benchmark</a></p>
<h2 id="best-dev-stack-for-m1">Best Dev Stack for M1</h2>
<p>Javascript, SwiftUI, OpenCV and Xcode are taking the most benefits from M1 cpu. You may see Alexander videos about this below :</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=aa--J-wscOk">Javascript</a></li>
<li><a href="https://www.youtube.com/watch?v=-vEOVHuK08c">SwitftUI</a></li>
<li><a href="https://www.youtube.com/watch?v=1f_ahSt_UI0">OpenCV</a></li>
<li><a href="https://www.youtube.com/watch?v=dM_bP_8aPaU">Xcode</a></li>
</ul>
<h2 id="worst-dev-stack-for-m1">Worst Dev Stack for M1</h2>
<p>Android is the worst for M1 cpu right now. Take a look at Alexander video below :</p>
<p><a href="https://www.youtube.com/watch?v=YjUCXGGJu7E">Why is this worst!</a></p>
<h2 id="summary">Summary</h2>
<p>Overall, M1 is really put a boost on may workflows and eventually gaming. </p>


Apple Silicon M1 vs Intel i9

## Feature Parity

|Feature|Supabase|Firebase|
|-------|---------|---------|
|database|v|v|
|auth|v|v|
|storage|v|v|
|function|-|v|
|hosting|-|v|
|analytics|-|v|
|crashlytics|-|v|
|ML|-|v|
|push notifications|-|v|
|remote config|-|v|

## Vendor Lock In

Supabase is based on open source, so it won't be a problem. You may host supabase on your own hosting and even using docker. Meanwhile, Firebase is based on Google. So it seems you will be locked by google.

## Authentication

Both of them using the same method. 

## Database

Supabase is using PostgreSQL (Relational Database), while Firebase is using Cloud Firestore (NoSQL Database)

## Pricing

For Supabase you may see this [pricing](https://supabase.io/pricing), for Firebase you may see this [Pricing](https://firebase.google.com/pricing)

<h2 id="feature-parity">Feature Parity</h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Supabase</th>
<th>Firebase</th>
</tr>
</thead>
<tbody><tr>
<td>database</td>
<td>v</td>
<td>v</td>
</tr>
<tr>
<td>auth</td>
<td>v</td>
<td>v</td>
</tr>
<tr>
<td>storage</td>
<td>v</td>
<td>v</td>
</tr>
<tr>
<td>function</td>
<td>-</td>
<td>v</td>
</tr>
<tr>
<td>hosting</td>
<td>-</td>
<td>v</td>
</tr>
<tr>
<td>analytics</td>
<td>-</td>
<td>v</td>
</tr>
<tr>
<td>crashlytics</td>
<td>-</td>
<td>v</td>
</tr>
<tr>
<td>ML</td>
<td>-</td>
<td>v</td>
</tr>
<tr>
<td>push notifications</td>
<td>-</td>
<td>v</td>
</tr>
<tr>
<td>remote config</td>
<td>-</td>
<td>v</td>
</tr>
</tbody></table>
<h2 id="vendor-lock-in">Vendor Lock In</h2>
<p>Supabase is based on open source, so it won&#39;t be a problem. You may host supabase on your own hosting and even using docker. Meanwhile, Firebase is based on Google. So it seems you will be locked by google.</p>
<h2 id="authentication">Authentication</h2>
<p>Both of them using the same method. </p>
<h2 id="database">Database</h2>
<p>Supabase is using PostgreSQL (Relational Database), while Firebase is using Cloud Firestore (NoSQL Database)</p>
<h2 id="pricing">Pricing</h2>
<p>For Supabase you may see this <a href="https://supabase.io/pricing">pricing</a>, for Firebase you may see this <a href="https://firebase.google.com/pricing">Pricing</a></p>


Video on TD