[#Script #Coding] Create an Instagram Clone with React, Tailwind CSS, Firebase – Tutorial

Create an Instagram Clone with React, Tailwind CSS, Firebase – Tutorial

By freeCodeCamp.org
Published: Apr 19, 2021


freeCodeCamp.org Learn how to create an Instagram clone with React and JavaScript! This project uses React (custom hooks, useContext, useState, useEffect, useRef), Firebase (Firestore/auth), Tailwind CSS, LoadTest, Lighthouse, Vercel, React Testing Library and Cypress E2E Testing.

This React project has multiple pages: login, sign up, dashboard (to view/like/comment on photos), and user profiles. The sign-in page connects to Firebase when a user tries to sign in, and when a user signs up, Firebase auth is used to store the user in the Firebase auth database. After the application is built you will learn how to deploy it to Vercel.

Course created by Karl Hadwen. Check out his channel: https://www.youtube.com/c/CognitiveSurge

Code: https://github.com/karlhadwen/instagram

    Course Contents

  • (0:00:00) Introduction
  • (0:05:37) Showcase
  • (0:15:28) Create React App (yarn)
  • (0:18:22) Project Folder Structure
  • (0:20:26) Installing Dependencies
  • (0:22:47) Refactoring unnecessary files, refactoring code
  • (0:29:18) Install ESLint
  • (0:33:06) Creating Folder Structure & Architecture
  • (0:43:05) Setup Firebase
  • (0:44:22) Firestore
  • (0:46:44) Firestore Rules
  • (0:48:43) Firestore (Collections & Docs)
  • (0:51:00) Firebase Authentication
  • (0:53:59) Realtime Database (Explanation)
  • (0:54:45) createContext in firebase.js
  • (1:02:34) Creating App in Firebase
  • (1:09:15) Start working on Login Page
  • (1:10:17) Install React Router Dom
  • (1:18:15) Create Routes
  • (1:21:51) Continue working on Login Page (Part 2)
  • (1:26:35) Tailwind.css Introduction
  • (1:31:34) Continue working on Login Page (Part 3)
  • (1:32:35) Install more dependencies
  • (1:36:30) Change how all scripts work
  • (1:40:21) yarn add postcss -D
  • (1:40:57) Create components folder
  • (1:34:19) Tailwind.css setup
  • (1:35:51) Completed Tailwind Setup, Continue working on Login Page (Part 4)
  • (1:39:28) Interjection: Field Value
  • (1:41:56) Continue working on Login Page
  • (2:01:47) Tailwind.config
  • (2:06:05) Login Functionality (with Firebase)
  • (2:11:12) Signup Page
  • (2:22:53) Check for user created is a duplicate
  • (2:54:49) Not Found & Dashboard Page
  • (3:01:11) Created Timeline Component
  • (3:01:28) Created Sidebar Component
  • (3:01:47) Created Header Component
  • (3:04:14) use-auth-listener.js Hook
  • (3:11:23) users.js UserContext
  • (3:15:38) Back to Header Component
  • (3:42:21) Working on Dashboard Page
  • (3:45:59) Working on Sidebar Component
  • (3:46:15) use-user.js hook
  • (4:04:20) In user.js ? Introduction to prop types
  • (4:25:03) Created Timeline.js
  • (4:25:43) Explanation on useMemo
  • (4:27:45) Add WhyDidYouRender
  • (4:29:53) Struggling with some issues
  • (4:42:42) Finally Figuring out some problems with WhyDidYouRender
  • (4:50:41) Working on suggestion.js (sidebar completed)
  • (4:59:20) Get suggested profiles
  • (5:16:28) Functionality: Remove followed user from suggestion
  • (5:23:12) Functionality: Update user’s following & followers
  • (5:34:18) Overview on Timeline
  • (5:40:47) Creating Post Component
  • (5:42:57) Creating more custom hooks (usePhotos)
  • (6:04:16) Rendering out the photos (using React skeleton)
  • (6:10:55) Start work on Post Component
  • (6:15:18) Components within Post
  • (6:16:03) Header Component
  • (6:20:56) Image & Actions
  • (6:27:32) Service call in Firebase
  • (6:42:44) Show Comments
  • (6:51:13) Add Comments
  • (7:12:26) Adding Protected Routes
  • (7:27:13) Profile
  • (7:30:20) Lazy load explanation
  • (7:45:23) Continue working on Profile Page
  • (7:58:48) Header Component in Profile Page
  • (8:02:14) Profile Specific Header
  • (8:18:00) Get User Photos
  • (8:37:52) Continue working on header
  • (9:20:31) Information in header
  • (9:37:09) Photos Component in Profile Page
  • (9:50:07) Recap of everything we’ve done
  • (9:52:55) Start of Review
  • (9:55:33) Not found header
  • (9:57:04) Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute
  • (9:58:35) Review of contexts: firebase.js and user.js
  • (9:58:57) Review of Routes & Posts
  • (10:01:31) loadtest (Npm install -g loadtest)
  • (10:15:27) Create a production build
  • (10:38:28) Deployment to Vercel done but with issues
  • (10:51:47) Issues fixed
  • (10:52:19) Lighthouse
  • (11:02:27) Wrapping up
  • (11:04:13) Changes and Refactoring (Fixing Bugs)
  • (11:48:50) Quick Look at Paid Version
  • (11:49:59) Cypress
  • (11:54:08) Signing Off

[READ MORE]

[#Script #Coding] Learn Terraform (and AWS) by Building a Dev Environment – Full Course for Beginners

Learn Terraform (and AWS) by Building a Dev Environment – Full Course for Beginners

By freeCodeCamp.org
Published: Apr 11, 2022


freeCodeCamp.org Learn Terraform basics as you utilize Visual Studio Code (On Windows, Mac, or Linux!) to deploy AWS resources and an EC2 instance that you can SSH into to have your own redeployable environment.

    Course Contents

  • Welcome and Setup (0:00)
  • What We’re Going to Build
  • AWS IAM Setup
  • Local Environment Setup
  • Let’s Build! (7:22)
  • AWS Provider and Terraform Init
  • A VPC and Terraform Apply
  • The Terraform State
  • Terraform Destroy
  • A Subnet and Referencing
  • An IGW and Terraform fmt
  • A Route Table
  • A Route Table Association
  • A Security Group
  • An AMI Datasource
  • A Key Pair
  • An EC2 Instance
  • Userdata and the File Function
  • SSH Config Scripts
  • The Provisioner and Templatefile
  • The Deployment and Replace
  • Variables
  • Variable Precedence
  • Conditional Expressions
  • Outputs
  • Conclusion

[#Script #Coding] Design a Scalable Mobile App With Figma Variants

Design a Scalable Mobile App With Figma Variants

By freeCodeCamp.org
Published: Apr 07, 2022


freeCodeCamp.org Learn how to use Figma Variants to design a scalable mobile app. Variants can streamline your frontend design process by allowing you to group and organize similar components into a single container.

Ahmet Efeoglu developed this course. Check out his channel: https://www.youtube.com/channel…

Tutorial file link: https://www.figma.com/file/FrLR3t9jZ9…
Homework file link: https://www.figma.com/file/8js2feuv6L…M

    CONTENTS:

  • (0:00:18) Intro
  • (0:02:13) Accessing Tutorial and Homework Files
  • (0:04:24) Project Overview
  • (0:05:27) Recommending Personal and freeCodeCamp Channel
  • (0:06:25) Basics Overview
  • (0:08:22) Learning The Frame Functionality
  • (0:10:25) Learning The Autolayout Functionality
  • (0:14:39) Learning The Component Functionality
  • (0:18:55) Learning The Variant Functionality
  • (0:21:42) Creating The Type System
  • (0:28:41) Creating The Color Palette/System
  • (0:35:54) Creating The Icon Set
  • (0:41:34) Creating Input Variants
  • (0:52:23) Creating Large Button Variant
  • (1:00:47) Designing Sign Up and Login Screen
  • (1:18:46) Creating Status Bar Variant
  • (1:23:14) Creating The Filter Variant
  • (1:27:40) Creating Bottom Navigation Variant
  • (1:35:02) Creating Image Card Variant
  • (1:49:27) Updating Input Variant
  • (1:57:31) Designing The Discover Screens
  • (2:15:20) Creating Large Avatar Variant
  • (2:24:05) Creating Small Button Variant
  • (2:32:45) Creating The Benefit Card Variant
  • (2:46:45) Designing Details Screen

Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news

[#Script #Coding] Algorithms in Python – Full Course for Beginners

Algorithms in Python – Full Course for Beginners

By freeCodeCamp.org
Published: Sep 22, 2022


freeCodeCamp.org In this Introduction to Algorithms in Python course, you’ll learn about algorithm basics like recursion and then go all the way to working with concepts like dynamic programming.

The 5 main course segments include simple recursive algorithms, data structures, divide & conquer, greedy algorithms, and dynamic programming.

Joy Brock developed this course in collaboration with realtoughcandy.io. Check out Joy’s channel: https://www.youtube.com/c/PythonLearn…

Sign up for the RealToughCandy newsletter and get a free ebook plus coding challenges, exclusive promo codes and more delivered directly to your inbox. https://realtoughcandy.com/newsletter…


    Course Contents

  • (0:00:00) Intro & course overview
  • (0:07:07) Factorials refresher
  • (0:10:04) CODING CHALLENGE: Factorial program using iteration, recursion
  • (0:14:57) What is a permutation?
  • (0:16:34) CODING CHALLENGE: Recursive permutation
  • (0:20:13) Iterative permutation example
  • (0:22:17) 8/N queens problem: theory & explanation
  • (0:23:57) Real world example of permutations
  • (0:24:49) Lesson recap
  • (0:26:11) What are data structures?
  • (0:27:53) What is a one-dimensional array?
  • (0:29:01) Search & sort
  • (0:30:39) CODING CHALLENGE: Linear search
  • (0:31:00) Binary search
  • (0:32:06) CODING CHALLENGE: Iterative binary search
  • (0:33:31) Coding a recursive binary search
  • (0:34:47) Bubble sort
  • (0:36:42) CODING CHALLENGE: Bubble sort
  • (0:38:02) Insertion sort
  • (0:39:24) CODING CHALLENGE: Insertion sort
  • (0:40:36) Linked lists
  • (0:44:01) CODING CHALLENGE: Linked list (traverse, search, add, delete, header, nodes, tail)
  • (0:52:12) Hash tables
  • (0:56:27) Lesson recap
  • (0:57:42) Divide & conquer algorithm paradigm: uses, benefits and more
  • (1:00:43) Merge sort
  • (1:02:48) CODING CHALLENGE: An efficient merge sort
  • (1:05:48) Getting judged mercilessly on LeetCode
  • (1:06:47) Getting Python to do the work for us with sorted()
  • (1:07:33) Matrix multiplication
  • (1:10:06) CODING CHALLENGE: Matrix multiplication
  • (1:11:20) Strassen algorithm
  • (1:14:45) CODING CHALLENGE: Strassen algorithm
  • (1:16:27) Lesson recap
  • (1:17:21) What is a greedy algorithm?
  • (1:19:20) Assign mice to holes conceptual overview
  • (1:21:45) CODING CHALLENGE: Assign mice to holes
  • (1:23:10) Fractional knapsack
  • (1:23:36) Understanding the fractional knapsack problem with a (light-hearted) dystopian apocalypse example
  • (1:25:54) Coding challenge prep
  • (1:27:13) CODING CHALLENGE: Fractional knapsack
  • (1:31:49) Egyptians fractions
  • (1:34:03) CODING CHALLENGE: Egyptian fractions
  • (1:37:06) Lesson recap
  • (1:38:15) What is dynamic programming (also called DP)?
  • (1:41:55) What is the principle of optimality?
  • (1:42:20) The 3-step process to solving a problem with optimal substructure
  • (1:43:55) Introduction to “ugly numbers”
  • (1:47:19) CODING CHALLENGE: Ugly numbers
  • (1:51:41) Traveling salesman problem (TSP)
  • (1:55:49) CODING CHALLENGE: Traveling salesman problem
  • (1:59:52) Palindromic matrix paths
  • (2:03:11) CODING CHALLENGE: Palindromic matrix paths
  • (2:08:37) Lesson recap
  • (2:10:03) Course wrap up (and the importance of coding every day)
[READ MORE]

[#Script #Coding] Command Line Hacking – Over The Wire Bandit Walkthrough (CTF Wargame)

Command Line Hacking – Over The Wire Bandit Walkthrough (CTF Wargame)

By freeCodeCamp.org
Published: Nov 09, 2022


freeCodeCamp.org Improve your cybersecurity and Linux skills by solving challenges in the Bandit Wargame from OverTheWire. This video is a walk through of how to solve the challenges—but make sure to try each on your own before watching the solution!

Start the game here: https://overthewire.org/wargames/bandit/

Tutorial from Sabyasachi Paul. Check out his channel: https://www.youtube.com/channel/UCF6D…
Sabyasachi’s Linktree: https://linktr.ee/h0tPlug1n

    Contents

  • (0:00:00) Introduction
  • (0:02:11) Level 0
  • (0:04:06) Level 0 – Level 1
  • (0:05:11) Level 1 – Level 2
  • (0:06:18) Level 2 – Level 3
  • (0:07:56) Level 3 – Level 4
  • (0:09:11) Level 4 – Level 5
  • (0:11:57) Level 5 – Level 6
  • (0:14:51) Level 6 – Level 7
  • (0:17:06) Level 7 – Level 8
  • (0:18:37) Level 8 – Level 9
  • (0:21:08) Level 9 – Level 10
  • (0:22:45) Level 10 – Level 11
  • (0:24:10) Level 11 – Level 12
  • (0:27:11) Level 12 – Level 13
  • (0:35:22) Level 13 – Level 14
  • (0:37:01) Level 14 – Level 15
  • (0:38:45) Level 15 – Level 16
  • (0:41:35) Level 16 – Level 17
  • (0:50:46) Level 17 – Level 18
  • (0:53:07) Level 18 – Level 19
  • (0:55:28) Level 19 – Level 20
  • (0:58:23) Level 20 – Level 21
  • (1:02:33) Level 21 – Level 22
  • (1:07:47) Level 22 – Level 23
  • (1:11:54) Level 23 – Level 24
  • (1:26:39) Level 24 – Level 25
  • (1:32:53) Level 25 – Level 26
  • (1:43:25) Level 26 – Level 27
  • (1:47:18) Level 27 – Level 28
  • (1:52:10) Level 28 – Level 29
  • (1:56:36) Level 29 – Level 30
  • (2:00:17) Level 30 – Level 31
  • (2:05:31) Level 31 – Level 32
  • (2:10:34) Level 32 – Level 33
  • (2:14:45) Level 33 – Level 34

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

[#Script #Coding] User Authentication in Web Apps (Passport.js, Node, Express)

User Authentication in Web Apps (Passport.js, Node, Express)

By freeCodeCamp.org
Published: Mar 16, 2021


freeCodeCamp.org In this full course for beginners, you will learn how to implement user authentication from scratch in your web apps. You will learn how to use Passport.js in a Node / Express app.

Course created by Zach Gollwitzer. Check out his channel: https://www.youtube.com/zachgollwitzer

    Course Contents

  • (0:00:00) Introduction
  • (0:04:04) Topics and Prerequisites
  • (0:16:43) Intro to HTTP Headers and Cookies
  • (0:34:23) Intro to Express Middleware
  • (1:05:04) Intro to Express Sessions
  • (1:31:10) Implementation of Passport Local Strategy
  • (2:50:21) Intro to Public Key Cryptography
  • (3:34:31) How do JWTs work?
  • (4:16:58) Implementation of Passport JWT Strategy
  • (5:17:29) Implementing a Custom JWT Auth Solution
  • (5:46:20) JWT Strategy in Angular Front-End App

[#Script #Coding] JavaScript Tutorial – Build 2 Word Games!

JavaScript Tutorial – Build 2 Word Games!

By freeCodeCamp.org
Published: Jul 05, 2022


freeCodeCamp.org In this tutorial for beginners, you will improve your JavaScript skills by coding two word games.

Ania Kubow developed this course. Check out her channel: https://www.youtube.com/aniakubow


    Course Contents

  • (0:00) Introduction
  • (1:30) Word Association Game
  • (49:51) Jeopardy Game

[#Script #Coding] Unreal Engine & C++ Tutorial – 1st Person Shooter Game

Unreal Engine & C++ Tutorial – 1st Person Shooter Game

By freeCodeCamp.org
Published: Nov 11, 2021


freeCodeCamp.org Learn how to use Unreal Engine and C++ to create monster shooter game.

Course created by Fahir from Awesome Tuts. Check out his channel: https://www.youtube.com/channel/UC5c-DuzPdH9iaWYdI0v0uzw
More tutorials from Fahir: https://awesometuts.com/

Assets and Code: https://cdn.fs.teachablecdn.com/HVnF0XHHS3C8GxModarr

    Course Contents

  • (0:00:00) Game Preview
  • (0:02:43) Creating The Player Character
  • (0:22:17) Creating The Character Blueprint
  • (0:29:23) Player Movement
  • (0:37:41) The Projectile Class
  • (0:47:54) Shooting The Projectile
  • (1:02:41) Creating The Enemy And Enemy Animations
  • (1:11:59) AI Perception Component Setup
  • (1:27:58) Detecting The Player With Sight
  • (1:44:34) Animating Enemy’s Movement
  • (1:49:05) Dealing Damage To The Player And Enemy
  • (1:57:27) Gameplay UI
  • (2:04:55) Displaying Countdown Timer
  • (2:20:04) Enemy Health UI
  • (2:26:21) The Door Script
  • (2:34:43) Creating The Level

[#Script #Coding] How to create an NFT website landing page & Deploy for FREE (Complete tutorial | EASY!)

How to create an NFT website landing page & Deploy for FREE (Complete tutorial | EASY!)

By codeSTACKr
Published: Jan 26, 2022


codeSTACKr In this video, I’m going to show you how to create your own custom landing page for your NFT project. Including a countdown timer and MetaMask integration. We’ll even deploy it for FREE on Netlify.


Join my Discord developer community: https://discord.gg/A9CnsVzzkZ


    OTHER VIDEOS

  1. How To Create An ENTIRE NFT Collection (10,000+) & MINT for FREE: https://youtu.be/AaCgydeMu64
  2. Create LAYERS for your 10,000 NFT Collection for FREE: https://youtu.be/k72aCI1VyKM
  3. List & Reveal An ENTIRE NFT Collection (10,000+): https://youtu.be/Iy1n_LxUwZs

Become A VS Code SuperHero Today: https://vsCodeHero.com


  • HTML Crash Course: https://youtu.be/XiQ9rjaa2Ow
  • CSS Crash Course: https://youtu.be/Tfjd5yzCaxk
  • JavaScript Crash Course: https://youtu.be/d5ob3WAGeZE


    Timestamps

  • 00:00 – Intro
  • 01:05 – Project Set Up
  • 02:39 – Customize the Landing Page
  • 06:58 – MetaMask Landing Page Integration
  • 09:06 – Commit & Sync Changes with GitHub
  • 09:38 – Deploy Site with Netlify for FREE



[#Script #Coding] Taxes for Freelance Developers – Full Course

Taxes for Freelance Developers – Full Course

By freeCodeCamp.org
Published: Mar 23, 2022


freeCodeCamp.org A discussion of why proper tax management is crucial for freelancers and self-employed developers who wish to get ahead financially. This video discusses core tax concepts, the taxation of various business structures, deductions, making one’s payments, as well as state and local taxation. The advice is mainly applicable to people in the United States.

Course developed by Luke Ciciliano.
– Luke’s website: https://www.modern-website.design/
– Luke on Twitter: https://twitter.com/Luke_Ciciliano

Note: Neither Luke Ciciliano or freeCodeCamp are holding themselves out as tax professionals. The information in this video is a matter of personal opinion and should not be seen as tax or investment advice. Any decisions regarding taxation and investments should be discussed with a licensed professional.

    Course Contents

  • (0:00) Introduction
  • (4:56) Why You Must Be Mindful Of Your Taxes
  • Discussion of how taxes impact your financial standing
  • Discussion of how most people aren’t mindful of tax management
  • (9:32) Core Tax Concepts
    • Differences between “revenue” and “income”
    • How individuals & different business entities are taxed – Overview
    • Levels of taxation – federal, state, local
    • The difference between taxes paid, and taxes paid in during the year
  • (25:49) How Different Business Structures Are Taxed
    • Understanding the Qualified Business Income Deduction – QBI
    • Taxation of sole proprietorships
    • Taxation of Limited Liability Companies
    • Taxation of S Corporations
  • (37:34) Understanding & Maximizing Tax Deductions
    • Understanding deductions
    • Common deductions
    • Deductions commonly missed
    • Tax benefits of retirement savings
  • (56:33) Making Tax Payments During The Year
    • Making estimated tax payments
    • Problems with “overpaying” during the year
  • (1:03:25) Where You Live Impacts Your Tax Bill
    • State & local tax considerations

    Proudly powered by WordPress
    Creative Commons License
    EricBrooks.Com® is licensed under a Creative Commons License.

    Disclaimer: The views expressed herein are solely those of Eric Brooks. They do not necessarily reflect those of his employers, friends, contacts, family, or even his pets (though my cat, Puddy, seems to agree with me on many key issues.). In accordance to my terms of use, you hereby acknowledge my right to psychoanalyze you, practice accupuncture, and mock you incessantly with every visit. As the user, you also acknowledge that the author has been legally declared a "Problem Adult" by the Commonwealth of Pennsylvania, and is therefore not responsible for any of his actions. ALSO, the political views and products advertised on this site may/may not reflect the views of Puddy or myself, so please don't take them as an endorsement. We just need to eat.



    Connect