A fullstack project course that teaches you how to build a backend and frontend from scratch then deploy it. 

Includes the follow technologies:

- React
- TypeScript
- GraphQL
- URQL/Apollo
- Node.js
- PostgreSQL
- MikroORM/TypeORM
- Redis
- Next.js
- TypeGraphQL
- Chakra

Code: https://github.com/benawad/lireddit

Links from video:
Learn vim: https://benawad.com/vim
How to install PostgreSQL: https://www.google.com/search?q=how+to+install+postgresql
How to install Redis: https://www.google.com/search?q=how+to+install+redis
Argon2 vs bcrypt: https://security.stackexchange.com/questions/193351/in-2018-what-is-the-recommended-hash-to-store-passwords-bcrypt-scrypt-argon2
React snippets: https://gist.github.com/benawad/1e9dd01994f78489306fbfd6f7b01cd3#file-snippets-typescriptreact-json
Simple pagination: https://github.com/FormidableLabs/urql/blob/main/exchanges/graphcache/src/extras/simplePagination.ts
Node.js Docker: https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
Next Apollo: https://github.com/adamsoffer/next-apollo/blob/master/src/withApollo.js

0:00:00 Intro
0:02:02 Node/TypeScript Setup
0:11:29 MikroORM Setup
0:39:50 Apollo Server Express Setup
0:47:32 MikroORM TypeGraphQL Crud
1:09:23 Register Resolver
1:23:27 Login Resolver
1:41:11 Session Authentication
2:03:06 Sessions Explained
2:08:24 Next.js + Chakra
2:32:36 URQL Basics
2:46:07 GraphQL Code Generator
2:53:16 Register Error Handling
3:10:57 NavBar
3:26:21 URQL Cache Updates
3:39:33 Logout
3:50:11 Next.js URQL SSR
4:12:34 Forgot Password
4:35:31 Change Password
5:22:14 Why Switching to TypeORM
5:25:27 Switching to TypeORM
5:50:44 Many to One
6:02:26 Global Error Handling
6:24:15 Next.js Query Params
6:31:26 URQL Pagination Start
6:50:02  Adding Mock Data
7:01:19 Chakra Styling
7:12:37 More URQL Pagination
7:32:07 Fix Mock Data
7:40:41 URQL Pagination Has More
8:00:53 GraphQL Fetching Relationships
8:18:43 GraphQL Field Permissions
8:23:16 Many to Many
8:46:46 Invalidate Queries
9:00:49 Upvote UI
9:23:11 Change Vote
9:31:57 Write Fragments
9:39:00 Vote Status
9:51:57 SSR Cookie Forwarding
10:04:08 Single Post
10:21:55 Delete Post
10:38:19 Edit Post
11:09:23 DataLoader
11:40:06 Cache Reset
11:43:55 Deploy Backend
11:52:56 Docker
12:03:29 Environment Variables
12:14:55 DB Migrations
12:21:40 Docker Hub
12:28:23 DNS
12:36:39 Deploy Frontend
12:57:28 Fix Cookie
13:03:07 Switch to Apollo

#benawad #fullstack #tutorial

----
Checkout my side projects:

If you're into cooking: https://www.mysaffronapp.com/

----
Join the Discord:  https://discord.gg/Vehs99V

----
Patreon: https://www.patreon.com/benawad

----
Follow Me Online Here:

Twitter: https://twitter.com/benawad
Medium: https://medium.com/@benawad
GitHub: https://github.com/benawad
Twitch: https://www.twitch.tv/benawad
Facebook: https://www.facebook.com/benawad97/
LinkedIn: https://www.linkedin.com/in/benawad/
Instagram: http://instagram.com/benawad97
TikTok: https://www.tiktok.com/@benawad ​
​
----
Follow me online: https://voidpet.com/benawad
#benawad

Fullstack React GraphQL TypeScript Tutorial

Learn the basics of Three.js - a tool for building amazing 3D graphics with JavaScript. In this tutorial, we create an animated 3D scrolling animation for a portfolio website https://github.com/fireship-io/threejs-scroll-animation-demo

#3D #webdev #js

🔗 Resources

Three.js Docs https://threejs.org/
WebGL Overview https://youtu.be/f-9LEoYYvE4
Inspiration https://atelier.net/virtual-economy/
Scrolling Animation with Three.js

📚 Chapters

00:00 Mindblowing 3D Websites
00:42 What we’re building
01:19 What is Three.js
02:12 Project Setup
03:35 Scene
03:52 Camera
04:28 Renderer
05:07 Geometry
05:28 Material
06:02 Mesh
06:16 Animation Loop
07:13 Lighting
08:45 Three.js Helpers
09:17 Orbit Controls
09:56 Random Generation
11:05 Scene Background
11:37 Texture Mapping
12:57 Scroll Animation
14:36 CSS Grid 

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial

In this coding challenge, I code a p5.js version of the Snake Game. Code: https://thecodingtrain.com/challenges/3-snake-game

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/avh_VGx69

🎥 Previous video: https://youtu.be/LG8ZK-rRkXo?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/KkyIDI6rQJI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🌐 Snake Game on Wikipedia: https://en.wikipedia.org/wiki/Snake_(video_game)

Live Stream Archive:
🔴 Coding Train Live 32: https://youtu.be/yUO2bWfBgN8?t=578

Related Coding Challenges:
🚂 #32 Agar.io: https://youtu.be/JXuxYMGe4KI
🚂 #72 Frogger: https://youtu.be/giXV6xErw0Y
🚂 #173 AppleSoft Basic Snake Game: https://youtu.be/7r83N3c2kPw
🚂 #115 Snake Game Redux: https://youtu.be/OMoVcohRgZA

Timestamps:
0:00 Creating a Snake object
3:00 Adding keyboard control
5:20 Grid and World Constraints
8:00 Adding Food!
11:00 Eating The Food!
13:05 Getting Longer When Eating
17:40 Fixing Mistakes
21:48 Game Over State
25:55 Coding Challenge Complete Choo Choo!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#snake #game #vectors #arrays #p5js #javascript

Coding Challenge #3: The Snake Game

In this multi-part coding challenge, I attempt an implementation of the A* Pathfinding Algorithm to find the optimal path between two points in a 2D grid. Code: https://thecodingtrain.com/challenges/51-a-pathfinding-algorithm

💻 Github Repo: https://github.com/CodingTrain/AStar
🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/ehLjdFpat

Other Parts of this Challenge:
📺 A* Algorithm - Part 2: https://youtu.be/EaZxUCWAjb0
📺 A* Algorithm - Part 3: https://youtu.be/jwRT4PCT6RU

🎥 Previous video: https://youtu.be/QHEQuoIKgNE?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/l__fEY1xanY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
📘 Artificial Intelligence: A Modern Approach: http://aima.cs.berkeley.edu/
🗄 A* Search Algorithm on Wikipedia: https://en.wikipedia.org/wiki/A*_search_algorithm
💻 Online demo: https://codingtrain.github.io/AStar/

Live Stream Archive:
🔴 Live Stream #72: https://www.youtube.com/watch?v=S4yQYiAECnM&t=34m50s

Related Coding Challenges:
🚂 #10 Maze Generator: https://youtu.be/HyK_Q5rrcr4
🚂 #162 Self Avoiding Walk: https://youtu.be/m6-cm6GZ1iw

Timestamps:
0:00:00 Introduction
0:01:26 A* Pathfinder
0:09:39 Coding a Grid
0:13:09 A* Pathfinder Algorithm
0:22:07 Choosing Best Available Path
0:27:05 Finding New Nodes
0:38:30 Adding Heuristic
0:41:50 Tracing Back
0:46:49 Using Better Heuristics

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#aalgorithm #pathfinding #heuristic #p5js #javascript

Coding Challenge 51.1: A* Pathfinding Algorithm - Part 1

In this viewer submitted coding challenge, I attempt to code a Purple Rain Simulator in Processing. Code: https://thecodingtrain.com/challenges/4-purple-rain

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/5C07OcK6A

🎥 Previous video: https://youtu.be/AaGK-fj-BAM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/biN3v3ef-Y0?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

🔴 Coding Train Live 34: https://youtu.be/r8QMcI5qxQM?t=3919s

Related Coding Challenges:
🚂 #1 Starfield in Processing: https://youtu.be/17WoOqgXsRM
🚂 #27 Fireworks: https://youtu.be/CKeyIbT3vXI
🚂 #169 Pi in the Sky Game: https://youtu.be/_H9JIwWP7HQ

Timestamps:
00:00 Introduction to the challenge
00:37 Setup the sketch
01:08 Create a Drop class
02:45 Set initial values and create a Drop object
03:23 Create an array of drops
04:27 Randomize initial values
05:30 Reset raindrop location when offscreen
06:11 Few more improvements
06:56 Add gravity
08:26 Add z value for 3d illusion
11:29 Final Version!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#purplerain #processing

Coding Challenge #4: Purple Rain in Processing

This is the first in a new series of videos. In this video I attempt to program a "star field" or "warp speed" visualization in Processing. Code: https://thecodingtrain.com/challenges/1-starfield

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/1wLHIck3T

🎥 Next video: https://youtu.be/LG8ZK-rRkXo?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🔴 Coding Train Live 30: https://youtu.be/JljMBn69fZM?t=760s

References:
🌟 Inspiration: https://cs.brynmawr.edu/gxk2013/examples/transformations/starfield/

Related Coding Challenges:
🚂 #27 Fireworks: https://youtu.be/CKeyIbT3vXI
🚂 #46 Asteroids: https://youtu.be/hacZU523FyM

Timestamps:
0:00 Welcome to a 10 minute coding challenge
0:59 Let's create a star class
2:10 Make an array of stars
3:17 Write the update() and show() functions
3:43 Make the stars move!
5:37 Translate to the middle of the canvas
6:17 Add more stars
7:40 Start to tweak size and speed of stars
9:02 Add trails to stars
10:31 Bonus two minutes!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#space #processing

Coding Challenge #1: Starfield in Processing

This is a beginner-friendly challenge where I attempt to code a basic version of the game Tic-Tac-Toe using JavaScript and the p5.js library. Code: https://thecodingtrain.com/challenges/149-tic-tac-toe

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/5JngATm3c

🎥 Previous video: https://youtu.be/YNyULRrydVI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/vEetoBuHj8g?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Videos:
🔴 Livestream Archive: https://youtu.be/Y6cMTh2BODY

Related Coding Challenges:
🚂 #77 Recursion: https://youtu.be/jPsZwrV9ld0
🚂 #154 Tic Tac Toe AI with Minimax Algorithm: https://youtu.be/trKjYdBASyQ
🚂 #163 Bézier Curves: https://youtu.be/enNfb6p3j_g

Timestamps:
0:00 Welcome!
0:54 Start coding
3:50 Drawing X and O
5:00 Let's diagram this!
8:46 Randomly choose the first player at the start of round
10:18 Drawing the grid
10:58 Each player places their symbol on a random spot
15:00 Check for a winner
18:44 Checking for equality of three elements
19:50 More bugs
21:01 Final Working Version! Show the winner
22:34 Thanks for watching!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#beginners #tictactoe #games #p5js

Coding Challenge #149: Tic Tac Toe

In this video we will build a clean coded responsive mobile friendly HTML5 website for a fictional web design company. We will go over semantic HTML tags like header and footer as well as the basics of HTML and CSS. This is a great project for beginners.

Like this? Check out my 21 hour HTML/CSS course:
https://www.udemy.com/course/modern-html-css-from-the-beginning/?referralCode=EB0470C43F3C3E9AA306

CODE DOWNLOAD:
http://www.traversymedia.com/downloads/acme_website.zip

SUGGESTED VIDEOS: 
HTML Crash Course For Absolute Beginners - 
https://www.youtube.com/watch?v=UB1O30fR-EE
Product Landing Page (CSS Grid) - https://www.youtube.com/watch?v=61R5kn_kYwY&feature=youtu.be

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia

NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia