Home

Awesome

full-stack-todo-rust-course

Course Plan

Yew

Video / Lesson TitleRecordedSectionDescriptionVideo URI
Hype Trailerxhttps://youtu.be/A0wabjmYRZ0
TrailerxTrailerhttps://youtu.be/5PB9UDOIuGk
Introduction to the CoursexIntroductionhttps://youtu.be/w0R1fE3qU5c
PrequisitesxIntroductionWhat you need to know or have to get the most out of this coursehttps://youtu.be/KrEtdI2KIRc
Join the communityxIntroductionWe have a community where we can ask questions, and give/receive helphttps://youtu.be/Hp8_-YF_lEw
Setting up RustxSetting UpWe're installing rust and some nice Cargo packageshttps://youtu.be/o0se4Erg_g0
Installing Wasm Bindgen CLIxSetting UpWasm Bindgen CLI is required to run Trunk without errorshttps://youtu.be/1rXiwVmw0kk
Hello World in RustxFirst StepsOur first Rust programhttps://youtu.be/NQ5q7LgpzMQ
Hello World in Yew.rsxFirst StepsNow that we have a working Rust program, let's create our first Yew.rs programhttps://youtu.be/uFUpC8yj6TQ
A better Hello World architecturexFirst StepsHaving everything in main.rs isn't ideal, let's set up a basic architecture that will work with ushttps://youtu.be/k-gVqe3HgwY
Logging to the ConsolexFirst StepsLogging to the console is one of the best ways to debug in browsershttps://youtu.be/NFOBWILWb1o
HTML in Rustxhtmlhttps://youtu.be/NeClBLl6uYk
HTML Conditionalsxhtmlhttps://youtu.be/sBXnesJGiHM
HTML Loopsxhtmlhttps://youtu.be/VmZLpP0jUGc
Introduction to stylistxstylingWe will be using a crate called stylist to apply css to our componentshttps://youtu.be/IQS6tWQWeYY
Inline stylesxstylingThe first and simplest of adding styles is to directly style the htmlhttps://youtu.be/qj_mBAcaSaE
Separate CSS filexstylingWe don't have to give up our editors helping with with css, we can use a separate css file!https://youtu.be/RosdwpfOZU4
Passing properties into componentsxpropertiesComponents that can't receive data are boringhttps://youtu.be/ure8M6FO-PA
enum propertiesxpropertiesSometimes we want more advanced propertieshttps://youtu.be/Gv7N468f-WE
CallbacksxpropertiesWe use callbacks so that we can communicate up to parent componentshttps://youtu.be/4yOf0_5r_wg
creating a formxhandling events and hooksWe'll be creating a form so that we can explore handling DOM eventshttps://youtu.be/Y37wK1lMZws
handling text field eventsxhandling events and hooksLet's add a event handler to the text fieldhttps://youtu.be/BRlt_hrHUfE
use statexhandling events and hooksReact style hooks exist in Yew.rs! this maens we can set and use state in functional components!https://youtu.be/LtZWzP4XVxs
multiple statesxhandling events and hookshttps://youtu.be/0lspzbYC1Zw
one complicated statexhandling events and hookshttps://youtu.be/cdsHbA-mY5s
Simplifying Complicated State Updatesxhandling events and hookshttps://youtu.be/R3Bdpb9z43Y
handling form submit eventsxhandling events and hooksIt can be nice to handle form submit events rather than just a click listener on buttonshttps://youtu.be/2JNw-ftN6js
Use Context Hookxhandling events and hooksaccess context state without needing prop drill many levels downhttps://youtu.be/4XP8ZSgqqLI
Use Effect Hookxhandling events and hooksuse effect allows us to hook into the event lifecycle and run code on first launch, every refresh, and shut down.https://youtu.be/xdzmMiT6K5E
Setting up Yew RouterxrouterWe can set up a frontend router so that we don't have to touch the server when navigating pageshttps://youtu.be/ijogSYDzwiE
Linking to Pagesxrouterhttps://youtu.be/twl8rl_m2pE
Programatic Linking to Pagesxrouterhttps://youtu.be/kEbfqmfbC_w
Struct Componentsxstruct componentsStruct components are similar to Class-based components in React or Vue.jshttps://youtu.be/eG6eKNh2YdI
styling struct componetsxstruct componentsStyling is pretty much the same, the only real difference is where to store the stylesheethttps://youtu.be/KC7HCxr6OCE
struct propertiesxstruct componentsThe props are stored in the context objecthttps://youtu.be/qIIWv9oB_hU
struct lifecycle methodsxstruct componentsThese methods are available on the impl of the component structhttps://youtu.be/HKAM6p34aIA
struct messagesxstruct componentsSaving state in a struct component uses message passinghttps://youtu.be/skvKGK9wzsg
Setting up YewduxxstoresYewdux is very similar to Redux for state managementhttps://youtu.be/-aHUoxHShS8
Using Yewdux to Store Form DataxstoresWe want to create a form and save it's data to the Yewdux storehttps://youtu.be/cfxiv37bgxQ
Yewdux Functionalxstoreshttps://youtu.be/mn3tRwXr22g
Persistent StatexstoresTo handle staying logged in between page refreshes we can store our internal state, or at least the user information to local storagehttps://youtu.be/rL7W_Jw5beo
Installing DockerxSetting UpA server and database has been created to help us focus on front end dev, we can use Docker to set that up easilyhttps://youtu.be/Lg0R5q0S7QY
Starting the Todo ServerxSetting UpA crash course on using Docker and Docker-Domposehttps://youtu.be/RyOAa7KIyd4
HTTP GET RequestsxhttpWebsites are boring unless we can get data from other locationshttps://youtu.be/P6p5Qzxva1s
HTTP post requestsxhttpWe want to be able to create things in the database, this is usually done with a post requesthttps://youtu.be/2uvZDZoR_1c
Other HTTP requestsxhttpUpdating resources uses either put or patchhttps://youtu.be/Fo8wRW4Cjtk
Dynamically Setting the API_URIxhttpWe want to have one API URI for dev, and one for productionhttps://youtu.be/p07ALGFIWjo
Set TimeoutxMiscellaneousBeing able to run arbitrary code after a short delay is great for having animations runhttps://youtu.be/yAFOgUQ9ChU
Introducing the ProjectxIntroducing the ProjectGetting the backend up and running and exploring the APIhttps://youtu.be/Y_51NHzr4Pk
Project Solution Live Code - 1xLive coding the projectuploaded
Project Solution Live Code - 2xLive coding the projectuploaded
Project Solution Live Code - 3xLive coding the projecthttps://youtu.be/1J6U5m_ZB1w
Project Solution Live Code - 4xLive coding the projecthttps://youtu.be/w6q6anvdisc
Project Solution Live Code - 5xLive coding the projecthttps://youtu.be/RZQOnLMac24
Project Solution Live Code - 6xLive coding the projectuploaded
Project Solution Live Code - 7xLive coding the projecthttps://youtu.be/bNT90-GRjPc
Project Solution Live Code - 8xLive coding the projecthttps://youtu.be/_du6EBaGh5s
Project Solution Live Code - 9xLive coding the projecthttps://youtu.be/bUn3Dvvi9Lk
Project Solution Live Code - 10xLive coding the projecthttps://youtu.be/SHu2qSo0eEI
Edit Text Input: Solution Live Code - 11xLive coding the projecthttps://youtu.be/eXsfThJ3ubI
Editing Task Description: Solution Live Code - 12xLive coding the projecthttps://youtu.be/cx9yVyQ-DJo
Editing Task Priority: Solution Live Code - 13xLive coding the projecthttps://youtu.be/rgo25StmDoA
Editing Task Completed: Solution Live Code - 14xLive coding the projecthttps://youtu.be/XquRqHv9qjo
Editing Task Save: Solution Live Code - 15xLive coding the projecthttps://youtu.be/UOyB7cylfMg
Fixing Text Inputs: Solution Live Code - 16xLive coding the projecthttps://youtu.be/qjDd6Gs-M_g
Fixing Textarea: Solution Live Code - 17xLive coding the projecthttps://youtu.be/dINYVnoMbI8
Fixing Completed Checkbox: Solution Live Code - 18xLive coding the projecthttps://youtu.be/XNY8zg6S2F8
Load Tasks on Refresh: Solution Live Code - 19xLive coding the projecthttps://youtu.be/HA_XO8z349I
Updating Tasks: Solution Live Code - 20xLive coding the projecthttps://youtu.be/zqXgsLHMkMg
Sucessfully Updating Tasks: Solution Live Code - 21xLive coding the projecthttps://youtu.be/F7QIS_dgTQc
Updating the Task in Yedux: Solution Live Code - 22xLive coding the projecthttps://youtu.be/CspsMzHyPJg
Deleting the Task: Solution Live Code - 23xLive coding the projecthttps://youtu.be/0SptFxxyJYM
Cancelling Editing: Solution Live Code - 24xLive coding the projecthttps://youtu.be/aQ3jWNX7gCg
Creating a New Task: Solution Live Code - 25xLive coding the projecthttps://youtu.be/2MfPTwHi27g
Displaying New Task: Solution Live Code 26xLive coding the projecthttps://youtu.be/otEpS0Pz8UQ
Completing the Task: Solution Live Code 27xLive coding the projecthttps://youtu.be/IbVyxRAvjT0
Filter and Sort: Solution Live Code 28xLive coding the projecthttps://youtu.be/Swtsb7xXFsE
Logging Out: Solution Live Code 29xLive coding the projecthttps://youtu.be/y6PKFuuS3b8
Creating the Error Message: Solution Live Code 30xLive coding the projecthttps://youtu.be/cLUMn5TzNq4
Passing the Error Tests: Solution Live Code 31xLive coding the projecthttps://youtu.be/FGeS4CU5EF4
Animating the Error Message: Solution Live Code 32xLive coding the projecthttps://youtu.be/aES2WT_tfyE
Cleaning Up: Solution Live Code 33xLive coding the projcethttps://youtu.be/sAETo8lG72g
Next StepsxConclusionWhere do you go from herehttps://youtu.be/yw_VcwYd-6E
Deploying The AppxAddendumLet's deploy the project to the internet!https://youtu.be/Grk4_tbBCsc
Handling Static FilesxAddendumAuto copying CSS, images, or other static assets to the dist folderhttps://youtu.be/IZodpoPVCQM
Bootstrap CSSxAddendumhttps://youtu.be/3VJIPLGOPEU