Full-Stack Development For Beginner: React, Next.Js, Node.Js

Become a Full-Stack Web Developer and Build 5 Real Projects with React, Next.js, Node.js, REST API, AI Integration, more

What you'll learn

Build a Products List App – React core (JSX, Components, Props, State, Hooks), project structure, component organization, styling approaches.

Build a Todo List App – Forms with React-Hook-Form & Yup, validation, error handling, API calls with fetch/Axios, CRUD operations.

Build an AI Chatbot App – Integrate ChatGPT, Gemini, DeepSeek, Claude & Grok APIs for real-time conversations.

Build a Contacts List App – Next.js basics: setup, Pages & Layouts, Navigation, Dynamic Routes, data fetching (Server/Client), Suspense, debugging.

Build a Movies REST API – Node.js fundamentals, Event Loop, Async/Await, modules, HTTP core, REST routes (GET/POST/PUT/DELETE), query filters.

And much more to enhance your skills as a Full Stack developer.

Requirements

Basic knowledge of HTML/CSS

Basic knowledge of JavaScript (we provide reading materials for those who are not familiar with JavaScript)

Description

Become a Full-Stack Developer by building real-world projects with React, Next.js, Node.js, and REST APIs. In this course, you’ll learn modern web development step by step — from frontend basics to backend APIs.You will start by mastering React fundamentals (JSX, Virtual DOM, Components, Props, State, Hooks, Events, Effects, Styling).Next, you’ll build apps with Next.js (Pages, Layouts, Routing, Navigation, Dynamic Segments, Server/Client Data Fetching, Suspense, Loading states).Finally, you’ll use Node.js to create REST APIs (HTTP core, Modules, Async/Await) and connect them to your frontend.By the end of this course, you will know how to:Build Frontend Apps with ReactConnect to third-party APIs including AI APIsDevelop Full-Stack projects with Next.jsCreate REST APIs with Node.jsWhat's in this course?REACT BASIC ModuleLearn the Core Skills of React. Work through Practical Examples.Understand React key concepts: JSX, DOM, Virtual DOM, Component-Based Architecture.Set up development environment (Browser, VS Code Editor, Node.js, npm).Debug React applications using Developer Tools.Create Components and write JSX markup. Import & Export Components.Share Data between Components via Props and Events. Conditional rendering.Styling components via Inline Styles, CSS Files and CSS Modules. Alternative Approaches.Understand Component Life-Cycle. Props vs State vs Variables.REACT FORMS & API ModulesBuild a functional To-Do List using Forms, Data Validation & API Integration.Set up React application via Vite.Handle Form Submission, store Form Data in the Component State.Render Lists in React. Controlled and Uncontrolled Components.Implement Filtering, Editing and Deleting List Items. Handle Input Fields Changes.Form Data Validation, Errors Handling via react-hook-form and yup libraries.API interaction via fetch and axios library. HTTP methods (GET, POST, PUT, DELETE).Organizing of API calls. Handle API error mesages. Add Loading Spinner.Create and using of React Custom Hooks. Using useEffect hook.AI CHATBOT ModuleBuild a real-time AI Chatbot with React.js, ChatGPT, Gemini AI & DeepSeek.Generative AI and Pricing Models for popular AI API’s.Create and style Chatbot Layout. Handle Chat Interactions via Component State.Overview of Popular AI Models. Getting API keys for AI API’s.Connect ChatGPT, Gemini and DeepSeek AI Models the for Chatting.Implement Streaming Messages. Handle and Debug API’s Errors.Add support of Dark Mode, Markdown, Messages Auto-Scrolling and Auto-Resizable Inputs.Build a Responsive Sidebar to Display All Chats with ability to Switch Between Them and Start New Chat Conversations.NEXTJS BASIC ModuleBuild server-side Contacts App with Next.js.Learn what Next.js is, why it’s popular, and how to set up your first project.Explore project structure, clean up starter code, and style your application.Build Pages, Layouts, add Navigation, including Nested Pages and Layouts.Work with Dynamic Routes and Search Params to create flexible web apps.Understand how Server and Client Components work together in Full-Stack apps.Fetch data in Server Components with Loading states and in Client Components with Suspense.NODEJS BASIC ModuleBuild REST API for Movies with Node.js.Learn what Node.js is, why it’s popular, and how to set up your first projectInitialize a project with NPM and understand the difference between Node.js and the BrowserExplore the Event Loop, work with Promises, and use Async/Await for asynchronous codeUnderstand ES and CommonJS modules with practical code examplesWork with the HTTP core module, REST APIs, URLs, Query Strings, and Environment VariablesBuild complete REST API routes with GET, POST, PUT, DELETE, and filtering by queryThis Course includesTheory and Practice: Lectures with many practical examples (3-10 min lessons duration).Source Code Examples: Full access to source code for all projects and exercises (practice on your own).Udemy Certificate: which you will receive after completing the course.Support: If you have any questions, we will always be willing to answer them.Meet your instructor!Dmytro Vasyliev - Senior Front-end Engineer with more than 10 years of professional experience in developing complex Web Applications. I have extensive experience with React and other frameworks, having used it in various projects to build dynamic and efficient user interfaces.Do you need to be concerned?This course comes with a 30-day money-back guarantee.Join our course today to learn how to build your first application in React!

Overview

Section 1: Introduction

Lecture 1 Course Requirements

Lecture 2 How to Study on Udemy

Lecture 3 How to Use Code Examples from Github

Lecture 4 GitHub Source Code Examples

Section 2: REACT BASIC: Getting Started

Lecture 5 Introduction

Lecture 6 What is React

Lecture 7 Environment Setup

Lecture 8 Creating React Application

Lecture 9 Application Structure

Lecture 10 Cleaning Up Application

Lecture 11 Developer Tools

Section 3: REACT BASIC: Creating Component

Lecture 12 Introduction

Lecture 13 Your First Component

Lecture 14 Importing and Exporting Components

Lecture 15 Writing Markup with JSX

Lecture 16 Using Variables in JSX

Section 4: REACT BASIC: Adding Interactivity

Lecture 17 Introduction

Lecture 18 Passing Props to a Component

Lecture 19 Component Props Manipulations

Lecture 20 Responding to Events

Lecture 21 Rendering List

Lecture 22 Fragment Component

Lecture 23 Conditional Rendering

Section 5: REACT BASIC: Styling in React

Lecture 24 Introduction

Lecture 25 Using Inline Styles

Lecture 26 Using CSS Files

Lecture 27 Using CSS Modules

Lecture 28 Using Global CSS Styles

Lecture 29 Alternative Styling Options

Section 6: REACT BASIC: Managing State

Lecture 30 Introduction

Lecture 31 Component life-cycle and state

Lecture 32 Component state vs local variables

Lecture 33 Using useState hook

Lecture 34 Batch updating of useState

Section 7: REACT BASIC: Managing Complex State

Lecture 35 Introduction

Lecture 36 Updating Objects in State

Lecture 37 Adding/Deleting items in Array State

Lecture 38 Updating items in Array State

Section 8: REACT FORMS: Working with Form Controls

Lecture 39 Setting Up New Application via Vite

Lecture 40 Create Application Layout for To-Do List

Lecture 41 Creating a Form to Add New To-Do’s

Lecture 42 Structuring and Styling Form Fields

Lecture 43 Handling Form Submission with onSubmit

Lecture 44 Storing Form Data in the State

Section 9: REACT FORMS: Displaying To-Do List

Lecture 45 Expanding/Collapsing Additional Form Fields

Lecture 46 Creating and Displaying To-Do List

Lecture 47 Structuring and Styling To-Do List

Lecture 48 Move Static Data about Priorities into Variables

Lecture 49 Updating To-Do Status with Controlled Components

Section 10: REACT FORMS: Advancing To-Do List Functionality

Lecture 50 Preparing Components for Editing functionality

Lecture 51 Displaying an Edit Form for To-Do’s

Lecture 52 Allowing User to Edit Items in a List

Lecture 53 Adding Delete Functionality to Remove Items

Lecture 54 Display Filtering Options for To-Do List

Lecture 55 Move Static Data about Filters into Variables

Lecture 56 Allowing User to Filter Items in List

Section 11: REACT FORMS: Validating Form Data

Lecture 57 Getting Started with Form Validation

Lecture 58 Using React Hook Form Library

Lecture 59 Displaying Validation Error Messages

Lecture 60 Styling Validation Error Messages

Lecture 61 Creating Validation Rules with Yup

Lecture 62 Provide Custom Validation for Deadline with Yup

Section 12: REACT FORMS: Manipulating Data via API

Lecture 63 Understanding REST APIs and Their Methods

Lecture 64 Learning Promises and Async/Await

Lecture 65 Getting API key for MockAPI tool

Lecture 66 Setting Up a Fake API with MockAPI tool

Lecture 67 Fetching Todo’s via API using fetch and useEffect

Lecture 68 Creating, Updating and Deleting Todo via API Call

Lecture 69 Filtering Todo’s via API Call

Section 13: REACT FORMS: Advanced Techniques for API usage

Lecture 70 Organizing API Calls in Separate Files

Lecture 71 Simplifying HTTP Requests with Axios

Lecture 72 Handle API Errors with Try…Catch and Async/Await

Lecture 73 Use React Custom Hook to organise API Calls

Lecture 74 Display API Error Messages in the Alert Banner

Lecture 75 Implementing Spinners During API Calls

Section 14: AI CHATBOT: Getting Started with AI Chatbot

Lecture 76 Project Overview

Lecture 77 Introduction to Generative AI

Lecture 78 AI APIs Pricing Model

Lecture 79 Setting Up Environment

Lecture 80 Creating React Application

Lecture 81 Cleaning Up Application

Section 15: AI CHATBOT: Building Chatbot UI

Lecture 82 Building the App Layout

Lecture 83 Displaying Chat Messages

Lecture 84 Adding Text Input and Send Button

Lecture 85 Handling Messages in the Chat

Section 16: AI CHATBOT: Implementing Chat with AI

Lecture 86 Overview of Popular AI APIs

Lecture 87 Getting API Key for Google AI

Lecture 88 Connect Google AI (Gemini) for Chatting

Lecture 89 Isolating Google AI logic for Reusability

Lecture 90 Getting API Key for Open AI

Lecture 91 Connect Open AI (ChatGPT) for Chatting

Section 17: AI CHATBOT: Improving User experience with Chat

Lecture 92 Displaying Loading State

Lecture 93 Adding Markdown Support to Messages

Lecture 94 Making Text Field Auto-Resizable

Lecture 95 Disable Chat Controls during Loading

Lecture 96 Applying Auto-Focus to Text Field

Lecture 97 Adding Auto-Scrolling to Bottom

Lecture 98 Improving Auto-Scrolling Behaviour

Lecture 99 Adding Dark Mode Support

Section 18: AI CHATBOT: Streaming Messages with AI

Lecture 100 Connect Google AI

Lecture 101 Enabling Real-Time Chat Streaming

Lecture 102 Connect Open AI (ChatGPT) for Streaming

Section 19: AI CHATBOT: DeepSeek API Integration

Lecture 103 Overview of DeepSeek R1 and V3 Models

Lecture 104 Getting API Key for DeepSeek

Lecture 105 Connect DeepSeek (R1 and V3) for Chatting

Section 20: AI CHATBOT: Dealing with Issues when using API

Lecture 106 Usage and Rate Limits of AI API’s

Lecture 107 Code Not Working? Learn How to Debug

Lecture 108 Dealing with API Errors from AI Services

Lecture 109 Using New Google AI (Gemini) Library

Lecture 110 Handle and Display Friendly Error Messages

Section 21: AI CHATBOT: Anthropic (Claude) API Integration

Lecture 111 Overview of Anthropic (Claude) Models

Lecture 112 Getting API Key for Anthropic (Claude)

Lecture 113 Connect Anthropic (Claude) for Chatting

Section 22: AI CHATBOT: xAI (Grok) API Integration

Lecture 114 Overview of xAI (Grok) Models

Lecture 115 Getting API Key for xAI (Grok)

Lecture 116 Connect xAI (Grok) for Chatting

Section 23: AI CHATBOT: AI Assistant Selection and Chatbot Enhancements

Lecture 117 Switching Between AI Assistants in a Chatbot Interface

Lecture 118 Extend Chatbot to Support More AI Models

Lecture 119 Add Light/Dark Theme Picker to Chatbot UI

Section 24: AI CHATBOT: Building the Sidebar with Chats

Lecture 120 Overview of the New Sidebar for Managing Multiple Chats

Lecture 121 Create a Sidebar Layout to Display All Chats

Lecture 122 Make Sidebar as a Hamburger Menu on Mobile

Lecture 123 Extract Messages Logic from App Component

Lecture 124 Enable Chat Switching from a Sidebar

Lecture 125 Show Full Message History for Active Chat

Lecture 126 Update Existing Chats with New Messages

Section 25: AI CHATBOT: Building the Sidebar with Chats

Lecture 127 Add a “New Chat” Button to Start New Conversations

Lecture 128 Prevent the Creation of Multiple Empty Chats

Lecture 129 Auto-Generate Chat Titles from User Input

Lecture 130 Support Separate History for Each Chat (Google AI Specific)

Lecture 131 Keep Responding while Switching Between Chats

Lecture 132 Remove Fake Chats Data and Fix Welcome Screen

Lecture 133 Handle Code Blocks and Improve Formatting

Section 26: NEXTJS BASIC: Getting Started

Lecture 134 What is Next.js

Lecture 135 Environment Setup

Lecture 136 Creating Next.js Application

Lecture 137 Project Structure

Lecture 138 Understand of Next.js Component Hierarchy

Lecture 139 Several Ways to Style Next.js App

Lecture 140 Cleaning Up Application

Section 27: NEXTJS BASIC: Pages and Layouts

Lecture 141 Understand of Pages and Layout

Lecture 142 Creating Pages and Root Layout

Lecture 143 Linking Between Pages and Showing Active Links

Lecture 144 Creating Nested Pages and Nested Layouts

Section 28: NEXTJS BASIC: Dynamic Segments and Search Params

Lecture 145 Displaying a List of Contact Links in the Sidebar

Lecture 146 Making Menu and Menu Link More Reusable

Lecture 147 Creating a Dynamic Segment

Lecture 148 Rendering Page with Search Params

Section 29: NEXTJS BASIC: Fetching Data

Lecture 149 Understanding of Server and Client Components

Lecture 150 Setting Up a Fake API Server

Lecture 151 Fetching Data in Server Components

Lecture 152 Adding a Loading State in Server Components

Lecture 153 Fetching Data in Client Components with Suspense

Section 30: NODEJS BASIC: Getting Started

Lecture 154 What is Node.js

Lecture 155 Environment Setup

Lecture 156 Initializing Project with NPM

Lecture 157 Node.js vs Browser

Section 31: NODEJS BASIC: Learning Event Loop & Modules

Lecture 158 Understanding the Event Loop

Lecture 159 Learning Promises and Async/Await

Lecture 160 Exploring ES & CommonJS Modules

Lecture 161 Code Examples for ES & CommonJS Modules

Section 32: NODEJS BASIC: Working with HTTP Server

Lecture 162 Understanding REST APIs and Methods

Lecture 163 Exploring the HTTP Core Module

Lecture 164 Code Examples for HTTP Core Module

Lecture 165 Working with URLs and Query Strings

Lecture 166 Code Examples for URLs and Query Strings

Lecture 167 Сonfiguring Environment Variables

Section 33: NODEJS BASIC: Building REST API Routes

Lecture 168 Getting All Items with GET

Lecture 169 Getting Item by ID with GET

Lecture 170 Creating a New Item with POST

Lecture 171 Updating an Item with PUT

Lecture 172 Deleting an Item with DELETE

Lecture 173 Filtering Items by Query with GET

Section 34: GITHUB COPILOT: Introduction to Github Copilot

Lecture 174 Introduction: Why You Should Use Github Copilot

Lecture 175 Overview of GitHub Copilot

Lecture 176 Popular Use Cases of GitHub Copilot for Developers

Lecture 177 Github Copilot Payment Plans & Limitations

Lecture 178 Understand Github Copilot Data Privacy

Section 35: GITHUB COPILOT: Getting Started with GitHub Copilot

Lecture 179 Setting Up Github Copilot and VS Code

Lecture 180 Quick Start with GitHub Copilot in VS Code

Lecture 181 Learn more about Code Completions

Lecture 182 Use Inline Chat for Editor and Terminal

Lecture 183 Github Copilot Smart Actions

Lecture 184 Use of Github Copilot Chat Interface

Section 36: GITHUB COPILOT: Understand Copilot Chat Modes and Context

Lecture 185 Using Copilot Chat – Ask Mode

Lecture 186 Editing Code with Copilot – Edit Mode

Lecture 187 Automate Tasks with Copilot – Agent Mode

Lecture 188 Using Chat Context for Better Responses

Section 37: CURSOR AI: Introduction to Cursor AI

Lecture 189 Introduction: Why You Should Use Cursor

Lecture 190 Overview of Cursor AI

Lecture 191 Popular Use Cases of Cursor AI for Developers

Lecture 192 Cursor AI Payment Plans & Limitations

Lecture 193 Understand Cursor AI Data Privacy

Section 38: CURSOR AI: Getting Started with Cursor AI

Lecture 194 Setting Up Cursor AI Code Editor

Lecture 195 Quick start with Cursor AI

Lecture 196 Learn more about Tab Completions

Lecture 197 Use Inline Chat for Editor and Terminal

Lecture 198 Use of Cursor AI Chat Interface

Section 39: CURSOR AI: Understand Cursor Chat Modes and Context

Lecture 199 Using Cursor Chat – Ask Mode

Lecture 200 Editing Code with Cursor – Manual Mode

Lecture 201 Automate Tasks with Cursor – Agent Mode

Lecture 202 Using Chat Context for Better Responses

Section 40: WINDSURF: Introduction to Windsurf

Lecture 203 Introduction: Why You Should Use Windsurf

Lecture 204 Overview of Windsurf

Lecture 205 Popular Use Cases of Windsurf for Developers

Lecture 206 Windsurf Payment Plans & Limitations

Lecture 207 Understand Windsurf Data Privacy

Section 41: WINDSURF: Getting Started with Windsurf

Lecture 208 Setting Up the Windsurf Editor

Lecture 209 Quick start with Windsurf

Lecture 210 Learn more about Tab & Supercomplete

Lecture 211 Use In-line Command for Quick Questioons

Lecture 212 Windsurf Codelenses for Quick Actions

Lecture 213 Use of Windsurf Cascade (Chat Interface)

Section 42: WINDSURF: Understand Windsurf Chat Modes and Context

Lecture 214 Using Windsurf Cascade – Chat Mode

Lecture 215 Editing Code with Cascade – Write Mode

Lecture 216 Plan your App with Cascade - Plan Mode

Lecture 217 Using Chat Context for Better Responses

Section 43: Summary

Lecture 218 How to leave a review

Lecture 219 How to get a certificate

Students who want to learn modern Full-Stack Web Development with React, Next.js, and Node.js.,Beginners who already know JavaScript or React and want to become Full-Stack Developers.,Frontend developers who want to add Backend Skills, build Full-stack apps with Next.js, and create REST APIs.,Developers from other frameworks (Nuxt.js, Angular, Vue, Django) who want to explore React & Next.js.