SkillPies
Introduction
🍰 Player
Full Stack Development
Full Stack Development for Node.JS
Modified 19 Dec 2024
You do not need to enrol, please select one of the sections below
Description
No description provided
Course Outline
Introduction
Lecture
What is full stack development? Why do I want to become a full-stack developer?
🍰 Player
Lecture
Explore the revolutionary features of SkillPies.com,.
Setup
Software Installation
Lecture
Let's set up your class environment with Github classroom!
Project Setup
Lecture
Setting up our first assignment
Running and Testing
Lecture
Instructions on how to run and test your project
React and ReactDOM
Lecture
Introduction to React and ReactDOM packages
💡 Assignment 1: Welcome Message
ExternalProject
Your first assignment, in which you create a landing page for your app.
Submissions
Lecture
Let's talk about Git and Github and different processes involved in this 101 session.
React
JSX and Components
Lecture
What is JSX, and how can we combine javascript code and HTML to create reusable interactive components?
Props
Lecture
Learn how to pass values to React components and see how to handle mandatory or optional variables.
👾 Exercise: Props
Code
A short exercise to practice your Props skills
CSS Styles
Lecture
Learn how to apply styles and classes to your react project
useState and Hooks
Lecture
Learn about react hooks and how they can help you to build genuinely reactive components!
👾 Exercise: useState
Code
Test your skills creating a reactive card component.
Conditional Rendering
Lecture
We explore how you can conditionally render your UI based on values of props, states or variables.
Lists
Lecture
You will render lists of component content from array variables.
👾 Exercise: Lists
Code
Test your skills of using lists and conditions in your React app
Forms and Events
Lecture
Learn how to create event handlers and use them to create custom forms for data collection.
👾 Exercise: Forms
Code
Test your skills in developing forms and add the possibility to add a custom todo.
💡 Assignment 2: Front End
ExternalProject
Second assignment where you need to update react ui.
Advanced React
Pure Components - memo
Lecture
Optimise your component rendering with memo
Lifecycle - useEffect
Lecture
Learn about React component lifecycle and how to perform actions in different stages
Expensive? - useMemo
Lecture
Optimise the rendering of your component using the useMemo hook to cache expensive computations
DOM Interactions - useRef
Lecture
Learn how to interact with DOM using useRef
forwardRef
Lecture
Learn how to use forwardRef or ref to access html elements in your child component!
useImperativeHandle
Lecture
Use this hook to boost developer experience for your application
👾 useImperativeHandle
Code
Test your skills in creating a custom dropdown component and using useImperativeHandle
Context
Lecture
Let's learn about the React Context, a convenient way of sharing common states or configurations.
useCallback
Lecture
Learn about further optimisations with using useCallback
useId
Lecture
Learn how to correctly handle ids in Forms with useId
useReducer
Lecture
Learn a different way of managing complex states using the useReducer
Testing React
Infrastructure
Database
Lecture
NextAuth and Github Authentication
Lecture
Prisma and ORM
Lecture
Project Setup
Lecture
Project Authentication
Lecture
APIs
APIs
Lecture
APIs - Slides
Presentation
Rest APIs
Lecture
Rest APIs - Express.js
Lecture
ReastAPIs - Next.js
Lecture
Securing APIs
Lecture
Securing APIs - NextAuth
Lecture
tRPC
tRPC
Lecture
tRPC - Routers
Lecture
tRPC - Server Rendering
Lecture
tRPC - Client Rendering
Lecture
Persisting Data
Lecture
Assignment 3: APIs
Lecture
Testing Full Stack Applications
CI/CD
Course Outline
Full Stack Development
Introduction
🍰 Player
Setup
Software Installation
Project Setup
Running and Testing
React and ReactDOM
💡 Assignment 1: Welcome Message
Submissions
React
JSX and Components
Props
👾 Exercise: Props
CSS Styles
useState and Hooks
👾 Exercise: useState
Conditional Rendering
Lists
👾 Exercise: Lists
Forms and Events
👾 Exercise: Forms
💡 Assignment 2: Front End
Advanced React
Pure Components - memo
Lifecycle - useEffect
Expensive? - useMemo
DOM Interactions - useRef
forwardRef
useImperativeHandle
👾 useImperativeHandle
Context
useCallback
useId
useReducer
Testing React
Infrastructure
Database
NextAuth and Github Authentication
Prisma and ORM
Project Setup
Project Authentication
APIs
APIs
APIs - Slides
Rest APIs
Rest APIs - Express.js
ReastAPIs - Next.js
Securing APIs
Securing APIs - NextAuth
tRPC
tRPC
tRPC - Routers
tRPC - Server Rendering
tRPC - Client Rendering
Persisting Data
Assignment 3: APIs
Testing Full Stack Applications
CI/CD