Make an OS with ReactJS & Next.js - System Components

Channel:
Canada Dustin Brett
Subscribers:
13,800
Published on ● Video Link: https://www.youtube.com/watch?v=o6Q8gF-zwL0


Duration: 2:27:09
1,358 views
44

I'll be rebuilding my browser "OS" project over a series of many streams. For this project I will continue to use React & Next.js written in TypeScript. I plan to make it collaborative and involve the community.

In this stream I am going to work on the process loader and window components. I'll also be doing some improvements to the Styled Components and Jest configurations. And if we have time I want to run some more lighthouse and w3c tests on the full built code, to see what kind of ratings we get.

Chapters:
0:00 Stream Starts
1:27 Introduction
3:42 Episode 3 Recap
12:55 NPM Updates
17:46 Renamed Unnecessary TSX
19:17 Refactor Process Types
25:35 Refactor Process Context State
37:47 Added Styled Components Theme Types
44:54 Move Jest Import To Config
48:44 Process Loader
53:23 Session Context
1:23:04 Window Component
1:46:13 Build & Lighthouse/W3C Testing
1:50:40 Fix Text Contrast (Accessibility FAIL)
2:01:22 Discuss CSS "fixes"
2:09:25 Discuss Background Component
2:20:06 Next Stream
2:22:22 Conclusion

Stream Notes:
https://github.com/DustinBrett/daedalOS/tree/main/public/Users/Public/Documents/Stream%20Notes/01-23-21.md

Code Repository:
https://github.com/DustinBrett/daedalOS

Demo:
https://dustinbrett.com

#coding #programming #reactjs



Other Videos By Dustin Brett


2021-03-21Make an OS with React & Next.js - Styling & Planning
2021-03-14Make an OS with React & Next.js - Windows (Drag, Resize, Min, Max)
2021-03-07Make an OS with React & Next.js - File Manager
2021-02-28Building a Web Desktop Environment with React - Taskbar & Processes
2021-02-21Building an OS with React - Clock & File System
2021-02-18My EXTREME Programmer PC Build - Ryzen 9 3900X
2021-02-14Building an OS with React - Taskbar
2021-02-07Building Windows 10 with React - Wallpaper, Taskbar & Refactoring
2021-01-31Make an OS with ReactJS & Next.js - Wallpaper & Taskbar
2021-01-26The Best Programming Language to Learn First in 2021
2021-01-24Make an OS with ReactJS & Next.js - System Components
2021-01-2215 Tips On How to Become a Self-Taught Software Developer
2021-01-17Make an OS with ReactJS & Next.js - Contexts & Refactoring
2021-01-15My Ultimate Programmer Desk Setup for Productivity in 2021
2021-01-10Make an OS with ReactJS & Next.js - More Setup & Testing
2021-01-06How I Became a Software Engineer (No Degree, No Bootcamp)
2021-01-03Make an OS with ReactJS & Next.js - Project Goals & Setup
2021-01-02Dustin Brett Live Stream


Tags:
next js
react js
nextjs
reactjs
next.js
react.js
react next.js
react jsx
nextjs tutorial
next js tutorial
jsx
react context
react hooks
react components
typescript
javascript
styled components
styled components react
css
os
operating system
eslint
stylelint
jest
prettier
github actions
git hooks
lint-staged
code refactoring
refactoring
git commit
programming projects