Create an Instagram Clone with React, Tailwind CSS, Firebase – Tutorial
By freeCodeCamp.org
Published: Apr 19, 2021“
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]”
Tag: scripting
[#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“
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.
Derek Morgan created this course. Check out more of his courses at: https://morethancertified.com
- LinkedIn: https://linkedin.com/in/derekm1215
- Twitter: https://twitter.com/derekm1215
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“
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…MCONTENTS:
- (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“
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…
Code Samples
- https://github.com/joyb0218/intro_to_…
- https://github.com/joyb0218/intro_to_…
- https://github.com/joyb0218/intro_to_…
- https://github.com/joyb0218/intro_to_…
- https://github.com/joyb0218/intro_to_…
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“
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/h0tPlug1nContents
- (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“
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“
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
Code:
- Word Association: https://github.com/kubowania/word-association-vanilla-javascript
- Jeopardy: https://github.com/kubowania/jeopardy-vanilla-javascript
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“
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“
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.
Check out the collection I made:
- https://codecats.xyz
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
SOURCE CODE
- GitHub Repo: https://github.com/codeSTACKr/nft-lan…
OTHER VIDEOS
- How To Create An ENTIRE NFT Collection (10,000+) & MINT for FREE: https://youtu.be/AaCgydeMu64
- Create LAYERS for your 10,000 NFT Collection for FREE: https://youtu.be/k72aCI1VyKM
- 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
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
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
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
[#Script #Coding] Taxes for Freelance Developers – Full Course
Taxes for Freelance Developers – Full Course
By freeCodeCamp.org
Published: Mar 23, 2022“
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_CicilianoNote: 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
Resources:
- Intuit Payroll: https://quickbooks.intuit.com/payroll/
- Form 1040-ES: https://www.irs.gov/pub/irs-pdf/f1040…
Suggested Reading:
- Business Adventures by John Brooks: https://www.amazon.com/Business-Adven…
- Unshakeable by Tony Robins: https://www.amazon.com/Unshakeable-Yo…
Luke’s Prior Videos:
- Guide to being a successful freelance developer: https://youtu.be/4TIvB8zDFio
- Getting clients as a freelance developer: https://youtu.be/Z63TxAJotgQ
”
