Pie LogoSkillPies
Introduction
Generative AI
0%
0%

Full Stack Development
Full Stack Development with Node.JS, Next.JS, Playwright, Vitest, Github Actions and Vercel
Modified 23 Apr 2025

You are not enrolled to this course

Description

Welcome to Full Stack Development, an exciting, hands-on course designed to take you from frontend to backend with React, Next.js, databases, authentication, APIs, DevOps, and more! This isn’t just another theory-heavy course—it’s highly interactive, filled with practical examples, engaging exercises, and fun challenges to solidify your learning.

🔥 What to Expect?

We start with the fundamentals, where you’ll get familiar with React—learning JSX, components, props, and hooks—before moving on to more advanced topics like memorisation, state management, and context API. You’ll build interactive UIs, style them with CSS, and master event handling through real-world exercises and mini-projects.

Once you have a strong foundation in React, we level up by exploring Next.js, a powerful framework for building fast and scalable applications. You’ll dive into server-side rendering, dynamic routing, API routes, authentication, and database integration with Prisma. By this stage, you’ll be developing a full-stack blog, connecting frontend and backend seamlessly.

But we’re not stopping there! Security, testing, and DevOps are essential for modern web development, so you’ll also learn how to secure APIs, set up authentication with NextAuth, write unit and integration tests, and deploy applications with CI/CD pipelines.

🎯 Hands-on Assignments & Projects

This course is all about learning by doing. Each module includes exercises, quizzes, and coding challenges that reinforce key concepts. You’ll build real-world applications, culminating in a major project where you’ll develop, test, and deploy a full-stack application.

📌 Course Breakdown

✅ React & ReactDOM – Master JSX, components, hooks, state, props, and forms.

✅ Advanced React – Optimize performance with memoisation, useEffect, useMemo, and useRef.

✅ Next.js & Backend Development – Dive into routing, API development, authentication, and databases.

✅ APIs & Security – Learn REST, tRPC, authentication, authorisation, and securing APIs.

✅ Testing & DevOps – Implement testing with Playwright & Vitest, and automate CI/CD.

✅ Final Project – Combine all your skills to build a fully functional full-stack application.

🚀 Why This Course?

• Highly Interactive – You’ll never just watch—every concept comes with an exercise!

• Fun & Engaging – Learn through practical examples and exciting projects.

• Industry-Relevant – Gain skills used in real-world full-stack applications.

• Step-by-Step Guidance – From beginner to advanced, we’ve got you covered!

By the end of this course, you’ll have mastered full-stack development and be ready to build and deploy production-ready applications. So, are you ready to become a full-stack developer? Let’s build something amazing together! 🎉💻

Tutors

Name
Details
Actions
Tutor provided no detail about themselves

Course Outline

What is full stack development? Why do I want to become a full-stack developer?
Learn about generative AI opportunities and limitations in full-stack development.
Lecture
Explore the revolutionary features of SkillPies.com,.
Check out the Skillpies code editor and all its possibilities.

Setup

Let's set up your class environment with Github classroom!
Setting up our first assignment
Instructions on how to run and test your project
Introduction to React and ReactDOM packages
Test your skills of React and ReactDOM.
Test your knowledge of React and ReactDOM
Your first assignment, in which you create a landing page for your app.
Let's talk about Git and Github and different processes involved in this 101 session.

React Fundamentals
10 points

What is JSX, and how can we combine javascript code and HTML to create reusable interactive components?
Test your knowledge of JSX and Components
Learn how to pass values to React components and see how to handle mandatory or optional variables.
A short exercise to practice your Props skills
Test your knowledge of props
Second assignment where you need to update react ui.
Learn how to apply styles and classes to your react project
Test your knowledge of using CSS styles in Next.js
Learn about react hooks and how they can help you to build genuinely reactive components!
Test your skills creating a reactive card component.
Test your knowledge of useState and Hooks
We explore how you can conditionally render your UI based on values of props, states or variables.
Test your knowledge of conditional rendering
You will render lists of component content from array variables.
Test your skills of using lists and conditions in your React app
Test your knowledge of React lists
Learn how to create event handlers and use them to create custom forms for data collection.
Test your skills in developing forms and add the possibility to add a custom todo.
Test your knowledge of forms and events
Storybook is like a workshop for your React components! Build and test UI elements in isolation, ensuring consistency and reusability. Create "stories" to showcase different component states, making development and documentation a breeze.
This bonus assignment os for those who like a challenge and wish to implement the backend for the Get Things Done Assignment.
Check how you track in quizzes among your colleagues

Next.js
10 points

   Overview of popular full-stack frameworks and our decision why we chose Next.js
Learn about monorepos and how to use them to efficiently structure your project.
Your second assignment towards your tutorial work, this time starting to develop a CMS system.
Learn how to structure your Next.js apps with layouts and pages! This lesson covers file-system routing, creating shared UI with layouts, dynamic routing for blog posts, and navigation with the <Link> component. Build a well-organized blog and master the fundamentals of Next.js app architecture.
Choose the best answer for each multiple-choice question
Practice your knowledge of layouts and pages.
Learn to optimise images and fonts in Next.js for a blazing-fast blog! We'll cover handling static assets, using the <Image> component for size optimisation and lazy loading, and leveraging next/font for self-hosting Google and local fonts. Boost your blog's performance and UX!
Test your knowledge of Fonts and Images in Next.js
Practice knowledge of fonts and images
Styling is the magic that transforms a plain website into a visually engaging experience. In Next.js, we have a variety of powerful tools at our disposal, from localised CSS Modules that prevent style clashes to global CSS for site-wide consistency. We'll explore these different approaches.
Test your knowledge of Fonts and Images
Practice your styling.
Server Components: born on the server, blazing fast, SEO stars. Client Components: party in the browser, interactive rockstars. Next.js lets them team up for killer web apps. Data? Server. Clicks? Client. Boom.
Test your skills of server and client components
Test your knowledge of server and client components.
Want a website that loads faster than a caffeinated kangaroo? We're diving into rendering startegies! Think pre-building pages (static!), whipping them up on demand (dynamic!)? Ready to build a blazing-fast blog? Let's go!
Test your knowledge of static and dynamic rendering
Leaderboards for Next.js section

Advanced React

Optimise your component rendering with memo
Test your knowledge of pure components
Apply your skills with React.memo.
Learn about React component lifecycle and how to perform actions in different stages
Test your knowledge of useEffect
Practice useEffect
Optimise the rendering of your component using the useMemo hook to cache expensive computations
Practice your useMemo skills
Test your knowledge of useMemo
Learn how to interact with DOM using useRef
Practice your skills with useRef
Test your knowledge of useRef
Learn about handling component errors in React.
Practice your knowledge of Error Boundaries
Test your knowledge of Error Boundaries
Let's learn about the React Context, a convenient way of sharing common states or configurations.
Apply your skills with Context API and create a themable API.
Test your knowledge of the Context API
Leaderboards for quizzes in the Advanced React section

Databases
10 points

Unlock the secrets to blazing-fast Next.js apps! This lesson covers data fetching & caching, from server-side rendering to client-side updates and TanStack Query. Reuse data, fetch in parallel, and secure sensitive info with the Taint API. Build high-performance, secure Next.js applications!
Test your knowledge of data fetching
Dive into SQL vs. NoSQL databases in our Full-Stack course! Learn when to use each with a blogging app example—filter posts by date or tag, and manage them as an admin. We’ll query both in TypeScript with Next.js, tackling real-world problems to see what fits best. Let’s build and explore!
Practice your skills in accessing data from databases using native drivers.
Test your knowledge of SQL vs NoSQL
Unlock the power of Prisma in our Full-Stack course! LEarn how to filter posts by tags or dates. Learn to set up Prisma, run queries, and simplify database work with TypeScript—making coding fun and fast!
Test your skills of working with Prisma
Test your knowledge of Prisma and ORM
Learn to manage your blog app’s database with Prisma.js! Seed data to populate posts and use migrations to evolve your schema. Explore migrate dev for structured updates and db push for quick syncs. Build a dynamic app with tags, dates, and more—master these tools to keep your data ready and robust!
Test your knowledge of seeding and migration
Follow the lecture text to implement paging, search and infinite scroll in your posts.
Learn how to save your data on the server or from the client
Check how you can call server mutations from client using @tanstack/query
Learn how to validate your data in APIs and server functions and correctly send and handle errors client side
Create frontend for the admin side

React Hooks

Learn how to use forwardRef or ref to access html elements in your child component!
Use this hook to boost developer experience for your application
Test your knowledge of useImperativeHandle hook
Test your skills in creating a custom dropdown component and using useImperativeHandle
Learn about further optimisations with using useCallback
Test your knowledge of useCallback
Learn how to correctly handle ids in Forms with useId
Learn a different way of managing complex states using the useReducer
Test your knowledge of useReducer
Optimise your UI with useTransition, when user interactions take preference to expensive computations.
Furthe optimise performance of your application with useDeferredValue
Test your knowledge of useTransition and seDeferredValue

Authentication and Authorisation
10 points

Dive into cookies—key to web memory! Learn how they track users and secure logins in our Blog app, using Next.js and client-side tricks.
Test your knowledge of cookies
Explore web storage beyond cookies! Compare local storage, session storage, and IndexedDB in our Blog app—save prefs, drafts, and more. Weigh pros like size and cons like security, and see how they stack up to cookies for a smarter, user-friendly app!
Test your knowledge of storage approaches in client web applications.
Learn about different approaches to authentication, from cookie-based, db-authentication, JWT tokes or enterprise-grade SAML or OAUTH cycles.
Practice your knowledge of cookies and storage
Learn how to set-up Github Authentication with Next Auth package.
Learn how to set up Google authentication
Leran how to set up your assignment,
Test your knowledge of authentication
Create a backend for your Blog management system

APIs

Learn what APIs are and how to use them to create robust and scalable architectures.
Test your knowledge of APIs
Learn about the most popular API protocol REST. Many other protocols are built on top of this technology.
Practice creation of APIs with Express.js.
Learn how you can create APIs in Next.js
Test your knowledge of REST APIs
Let's explore another alternative to creating API's, specifically crafted for your NextJS or React apps.
Practice your knowledge of tRPC
Learn about general approaches to securing APIs
Practice ways of securing you NextJS API endpoints with NextAuth (AuthJS).

CI/CD and DevOps

Ever wondered how apps like Medium catch bugs before they crash? Join us for an exciting dive into CI/CD! In this lecture, we’ll automate testing with GitHub Actions and see why teamwork needs a safety net. Get ready to code smarter, not harder—let’s make mistakes a thing of the past!
Test your knowledge of CI
You’ve built an awesome blogging app, but deploying new features feels like a chore. What if every code push went live instantly, safely? Welcome to Continuous Deployment! In this lecture, we’ll make our app shine with auto-deploys, previews, and more—let’s get your code to the world, fast!
Test your knowledge of CD.
Imagine your blogging app goes viral—thousands of users flood in! Deployment makes it happen, and serverless is the key: no server hassle, auto-scaling magic. But is it flawless? Join us to explore Lambda and edge functions, uncover pitfalls, and deploy our app like pros! Ready to launch?
Test your knowledge of serverless architectures
Practice your knowledge of CI/CD pipelines!
Part one of the major assignment

Testing React

Get ready to master testing! We’ll explore unit, integration, and E2E tests using Next.js, TypeScript, and React in our blogging app. Learn what to test, when, and how it fits CI/CD. With Vitest, Playwright, and React Testing Library, we’ll ensure our app shines—bug-free and user-ready!
Test your knowledge of testing
Get ready to supercharge your testing skills! In our blogging app, we’ll master component & integration testing with Vitest & React Testing Library. Dive into React 19’s async components, learn spying & mocking, and set it all up in Next.js. Let’s make our app bulletproof—bugs beware!
Get ready to master spying and mocking with Vitest! In our blogging app, spies will catch every function call, while mocks fake databases for lightning-fast tests. Say goodbye to flaky dependencies and hello to reliable code—let’s dive into testing like pros!
Picture launching your blogging app, only to find broken filters or a faulty admin login. Frustrating, right? End-to-End testing with Playwright saves the day, ensuring every click works perfectly. Let’s dive in and learn how to make your app flawless for users and admins alike!
Practice your knowledge of testing

Advanced Topics

Want your blog app to top Google searches? SEO is the key! In this lecture, we’ll use Next.js’s App Router to optimise our blogging app’s posts and filtered routes. Learn metadata, headers, and more to boost rankings—let’s make “Next.js Tips” a search star!
Imagine your blogging app thriving—until a hacker slips in, stealing data via XSS or CSRF. Don’t panic! We’ll lock it down with NextJS tools, squash threats, and test like pros. Let’s make your app a fortress, keeping users safe and trust intact!
Imagine your blogging app crashes when a post goes viral! Monitoring and logging are your lifeline, ensuring uptime, speed, and quick fixes. Join us to explore how these tools keep your app running smoothly, using real-world examples to make your full-stack app reliable and user-friendly!
Imagine planning a study session in a group chat, but messages lag. Frustrating, right? Real-time apps like WhatsApp solve this with instant updates. In this lecture, we’ll build a chat app using Next.js and explore WebSockets, SSE, and push notifications. Let’s make apps feel alive and responsive!
Boost your blogging app’s speed with code splitting and tree shaking! Split JS into chunks for faster loads and trim unused code to shrink bundles. Learn dynamic imports, React.lazy, and ES modules with real examples. Debunk myths, optimize like a pro, and make your app lightning-fast!
Everyone should be able to read your blog, even Sarah, who relies on a screen reader, or John, navigating by keyboard. Web accessibility ensures inclusivity, meets legal standards, and boosts user experience. Let’s debunk myths and build an accessible app together!
Course Outline
Chat
Full Stack Development
Introduction
Generative AI
🍰 Player
💼 Editor
Setup
Software Installation
Project Setup
Running and Testing
React and ReactDOM
Assignment 1.1: Welcome Message
Submissions
React Fundamentals
10 points
JSX and Components
Props
Assignment 1.2: Front End
CSS Styles
useState and Hooks
Conditional Rendering
Lists
Forms and Events
Storybook
Assignment 1.3: Bonus - Backend
Leaderboards
Next.js
10 points
Why Next.js?
Next.js Introduction
Monorepos
Turborepo
Assignment 2.1: Blog - Client
Layouts and Pages
Fonts and Images
Styling
Server vs Client Components
Static and Dynamic Rendering
Leaderboards
Advanced React
Pure Components - memo
Lifecycle - useEffect
Expensive? - useMemo
DOM Interactions - useRef
Error Boundaries
Context
Leaderboards
Databases
10 points
Fetching Data
SQL vs No-SQL Databases
Prisma and ORM
Seeding and Migrations
Search and Pagination
Server Actions
Client-Side Mutations
Validations and Error Handling
Assignment 2.2: Blog - Admin
React Hooks
forwardRef
useImperativeHandle
useCallback
useId
useReducer
useTransition
useDeferredValue
Authentication and Authorisation
10 points
Cookies
Storage
Authentication Approaches
Assignment 2.3: Blog - Backend
APIs
APIs
Rest APIs
tRPC
Securing APIs
CI/CD and DevOps
Continuous Integration (CI)
Continuous Deployment (CD)
Server-less Architectures
Exercise: CI/CD
Major Assignment
Testing React
Introduction to Testing
Component Testing with React Testing Library
Spying and Mocking
Component Testing with Playwright
End to End testing with Playwright
Exercise: Testing
Advanced Topics
SEO
Security
Monitoring and Logging
Real-Time Apps
Code Splitting
Accessibility