Repository for the Full Stack Development Bootcamp
| Lecture No. | Title | Section | GitHub Link | Presentation |
|---|---|---|---|---|
| Welcome To The Course | Course Orientation | |||
| Access Course Resources | Course Orientation | |||
| Is This Course For You? | Course Orientation | |||
| How to Take This Course - Learning Paths | Course Orientation | |||
| Unconventional Advice | Course Orientation | |||
| How To Get Help When You Are Stuck | Course Orientation | |||
| Are Programmers Doomed? Is AI Taking Over? | Course Orientation | |||
| How To Use AI To Your Advantage | Course Orientation | |||
| How To Work On Coding Exercises | Course Orientation | |||
| Understanding A Computer | Basics Of Computing | |||
| How CPU Works? Binary, ASCII | Basics Of Computing | |||
| What is the Internet | Basics Of Computing | |||
| Servers And DNS | Basics Of Computing | |||
| Port Numbers and Request Response Lifecycle | Basics Of Computing | |||
| Understanding A Website | Basics Of Computing | |||
| Setting Up the Development Environment | Basics Of Computing | |||
| Introduction To HTML | HTML Basics | |||
| Basics of HTML Document | HTML Basics | |||
| Using Live Server For HTML | HTML Basics | |||
| Elements Vs Tags in HTML | HTML Basics | |||
| Heading and Paragraph Elements | HTML Basics | |||
| HTML Comments | HTML Basics | |||
| Text Formatting Using HTML | HTML Basics | |||
| Quotations In HTML | HTML Basics | |||
| Tags and Attributes | HTML Basics | |||
| Linking Pages With Anchor Tag | HTML Basics | |||
| img Tag For Images | HTML Basics | |||
| Widely Used Image Formats | HTML Basics | |||
| Head Element - Favicon and Page Title | HTML Basics | |||
| Google Chrome Developer Tools | HTML Basics | |||
| Practice: HTML Basics | HTML Basics | |||
| Solution: HTML Basics | HTML Basics | |||
| Block Vs. Inline Elements | HTML Structure | |||
| Container Elements div and span | HTML Structure | |||
| HTML Entities And Symbols | HTML Structure | |||
| Introduction To List Items | HTML Structure | |||
| Unordered Lists | HTML Structure | |||
| Ordered Lists | HTML Structure | |||
| Description Lists | HTML Structure | |||
| Practice: HTML Structure One | HTML Structure | |||
| Solution: HTML Structure One | HTML Structure | |||
| Understanding Semantics | HTML Structure | |||
| Practical Semantic Elements | HTML Structure | |||
| Practice: Semantic HTML | HTML Structure | |||
| Solution: Semantic HTML | HTML Structure | |||
| What is Version Control? | Git and GitHub | |||
| Understanding Git and GitHub | Git and GitHub | |||
| Installing Git, Github Desktop | Git and GitHub | |||
| Graphical User Interface Command Line Interface | Git and GitHub | |||
| First Git Repository and Commits | Git and GitHub | |||
| Understanding Branches | Git and GitHub | |||
| Working With Branches | Git and GitHub | |||
| Understanding Merge | Git and GitHub | |||
| Git Merge Practical Example | Git and GitHub | |||
| Understanding A Conflict | Git and GitHub | |||
| How To Resolve Conflicts | Git and GitHub | |||
| What is GitHub? Why Use it? | Git and GitHub | |||
| Setting Up a Git Repository | Git and GitHub | |||
| Git push, pull and fetch | Git and GitHub | |||
| Browsing a Repository On GitHub | Git and GitHub | |||
| What is CSS? Cascading Style Sheets | CSS Basics | |||
| Understanding Colors in CSS | CSS Basics | |||
| Color, Background and Border | CSS Basics | |||
| Text Formatiing - Alignment and Decoration | CSS Basics | |||
| Text Transformation and Spacing | CSS Basics | |||
| Common Units Of Measurement | CSS Basics | |||
| Using Different Units of Measurement | CSS Basics | |||
| Overview of CSS Selectors | CSS Selectors | |||
| Internal Styles And External Stylesheets | CSS Selectors | |||
| Id, Class and Universal Selectors | CSS Selectors | |||
| Combinator Selectors | CSS Selectors | |||
| Introduction To Pseudo-Classes | CSS Selectors | |||
| Practice: Create a Simple Tootip | CSS Selectors | |||
| Solution: Create a Simple Tootip | CSS Selectors | |||
| More Pseudo-Classes | CSS Selectors | |||
| CSS Pseudo Elements | CSS Selectors | |||
| CSS Attribute Selectors | CSS Selectors | |||
| Practice: Advanced Selectors | CSS Selectors | |||
| Solution: Advanced Selectors | CSS Selectors | |||
| Understanding Fonts | Styling Elements Using CSS | |||
| Working With Fonts | Styling Elements Using CSS | |||
| Deep Dive Into Font Properties | Styling Elements Using CSS | |||
| Using Google Fonts (Webfonts) | Styling Elements Using CSS | |||
| Using Google Material Icons | Styling Elements Using CSS | |||
| Styling List Items | Styling Elements Using CSS | |||
| Practice: Fonts, Icons and Lists | Styling Elements Using CSS | |||
| Solution: Fonts, Icons and Lists | Styling Elements Using CSS | |||
| Working With Transitions | Styling Elements Using CSS | |||
| The Nuisance of Vendor Prefixes | Styling Elements Using CSS | |||
| Variables In CSS | Styling Elements Using CSS | |||
| Introduction To Box Model | The Box Model | |||
| Padding, Border and Margin Basics | The Box Model | |||
| Block, Inline and Inline-Block | The Box Model | |||
| Display None and Inherit | The Box Model | |||
| Understanding Collapsing Margins | The Box Model | |||
| Rounded Corners | The Box Model | |||
| Practice: Box Model | The Box Model | |||
| Solution: Box Model | The Box Model | |||
| The box-sizing Property | The Box Model | |||
| The Overflow Property | The Box Model | |||
| Max And Min Properties | The Box Model | |||
| Working With Floats | The Box Model | |||
| Positions In CSS | The Box Model | |||
| Layers and z-index | The Box Model | |||
| Practice: Layouts and Positioning | The Box Model | |||
| Solution: Layouts and Positioning | The Box Model | |||
| Understanding Inheritance In CSS | Inheritance and The Cascade | |||
| Working With Basic Inheritance | Inheritance and The Cascade | |||
| Understanding The Cascade | Inheritance and The Cascade | |||
| Source Order of Styles | Inheritance and The Cascade | |||
| Specificity in Detail | Inheritance and The Cascade | |||
| Importance With !important Flag | Inheritance and The Cascade | |||
| The Cascade Algorithm | Inheritance and The Cascade | |||
| Practice: Inheritance and Cascade | Inheritance and The Cascade | |||
| Solution: Inheritance and Cascade | Inheritance and The Cascade | |||
| What is Responsive Web Design | Responsive Web Design And Flexbox | |||
| All About Media Queries | Responsive Web Design And Flexbox | |||
| Media Queries in Separate Stylesheets | Responsive Web Design And Flexbox | |||
| Responsive Images | Responsive Web Design And Flexbox | |||
| Background Images With Responsive Design | Responsive Web Design And Flexbox | |||
| Introduction To Flexbox | Responsive Web Design And Flexbox | |||
| Flex Display and Direction | Responsive Web Design And Flexbox | |||
| Flex Wrap and Shorthand | Responsive Web Design And Flexbox | |||
| Distribute With justify-content | Responsive Web Design And Flexbox | |||
| align-items Along Vertical Axis | Responsive Web Design And Flexbox | |||
| Distribute Content Vertically align-content | Responsive Web Design And Flexbox | |||
| Adding gaps to Rows and Columns | Responsive Web Design And Flexbox | |||
| Items Properties: order, grow and shrink | Responsive Web Design And Flexbox | |||
| Using flex-basis For Widths | Responsive Web Design And Flexbox | |||
| What We Will Build | Layout Project | |||
| Introduction To Figma | Layout Project | |||
| Creating The HTML File | Layout Project | |||
| Working On The Header | Layout Project | |||
| CSS For The Header | Layout Project | |||
| Completing The Menu Items | Layout Project | |||
| Working On Search Input | Layout Project | |||
| Search Icon and Responsive Header | Layout Project | |||
| The Hero Section Image | Layout Project | |||
| Hero Section Article | Layout Project | |||
| Styling The Article Card Elements | Layout Project | |||
| Card Alignment and Responsive View | Layout Project | |||
| Structuring The Latest Posts Section | Layout Project | |||
| Styling Individual Posts | Layout Project | |||
| Creating View All Posts Button | Layout Project | |||
| Adding Footer | Layout Project | |||
| Introduction To Forms | Forms: HTML and CSS | |||
| Getting Started With Basic Fields | Forms: HTML and CSS | |||
| Validating Input Fields | Forms: HTML and CSS | |||
| Date and Time Fields | Forms: HTML and CSS | |||
| Select Dropdown Fields | Forms: HTML and CSS | |||
| Adding a Color Picker | Forms: HTML and CSS | |||
| Radio and Checkbox | Forms: HTML and CSS | |||
| Practice: Complete The Form On Blog Page | Forms: HTML and CSS | |||
| Solution: Complete The Form On Blog Page | Forms: HTML and CSS | |||
| Introduction to Tables | Tables: HTML and CSS | |||
| Creating Our First Table | Tables: HTML and CSS | |||
| Table Column And Row Styling | Tables: HTML and CSS | |||
| Vertical and Horizontal Headers | Tables: HTML and CSS | |||
| Merging Cells With rowspan and colspan | Tables: HTML and CSS | |||
| Practice: Tables | Tables: HTML and CSS | |||
| Solution: Tables | Tables: HTML and CSS | |||
| Introduction to JavaScript | Getting Started With JavaScript | |||
| Variables In JavaScript: var, let, const | Getting Started With JavaScript | |||
| Primitive Types In JavaScript | Getting Started With JavaScript | |||
| string, number and boolean | Getting Started With JavaScript | |||
| Escape Characters in Strings | Getting Started With JavaScript | |||
| Template Literals and String Interpolation | Getting Started With JavaScript | |||
| Special Primitive Values: null and undefined | Getting Started With JavaScript | |||
| BigInt and Symbol in JavaScript | Getting Started With JavaScript | |||
| Arithmetic Operators | Getting Started With JavaScript | |||
| Assignment Operators | Getting Started With JavaScript | |||
| Comparison Operators | Getting Started With JavaScript | |||
| Coding Exercise: Arithmetic, Assignment And Comparison Operators | Getting Started With JavaScript | |||
| Logical Operators | Getting Started With JavaScript | |||
| Introduction to Objects | Objects and Arrays | |||
| The new Object() | Objects and Arrays | |||
| Mutability and Spread Operator | Objects and Arrays | |||
| Nested Objects | Objects and Arrays | |||
| Coding Exercise: Objects | Objects and Arrays | |||
| Solution: Objects | Objects and Arrays | |||
| Introduction To Arrays | Objects and Arrays | |||
| Extracting Values From an Array | Objects and Arrays | |||
| new Array() and Adding Items | Objects and Arrays | |||
| Coding Exercise: Arrays | Objects and Arrays | |||
| Solution: Arrays | Objects and Arrays | |||
| Working with Maps | Objects and Arrays | |||
| Sets in JavaScript | Objects and Arrays | |||
| Coding Exercise: Maps and Sets | Objects and Arrays | |||
| Introduction To Conditional Statements | Control Flow: Conditionals and Loops in JavaScript | |||
| Switch Statements | Control Flow: Conditionals and Loops in JavaScript | |||
| Introducing Loops: The for Loop | Control Flow: Conditionals and Loops in JavaScript | |||
| The for Loop Continued | Control Flow: Conditionals and Loops in JavaScript | |||
| for in Loop | Control Flow: Conditionals and Loops in JavaScript | |||
| for of Loop | Control Flow: Conditionals and Loops in JavaScript | |||
| The while and do while Loop | Control Flow: Conditionals and Loops in JavaScript | |||
| Coding Exercises | Control Flow: Conditionals and Loops in JavaScript | |||
| Introduction To Functions | Functions and Methods | |||
| Introduction to Lexical Scopes | Functions and Methods | |||
| Understanding Variables Scopes | Functions and Methods | |||
| Function Declarations, Expression and Arrow Functions | Functions and Methods | |||
| Coding Execrcise: Function and Lexical Scope | Functions and Methods | |||
| Understanding Methods | Functions and Methods | |||
| Deeper Dive into this Keyword | Functions and Methods | |||
| Autoboxing and string Methods | Functions and Methods | |||
| number Methods | Functions and Methods | |||
| Array Methods | Functions and Methods | |||
| Math Object | Functions and Methods | |||
| Date Object | Functions and Methods | |||
| Coding Exercise: Methods | Functions and Methods | |||
| Solution: Methods | Functions and Methods | |||
| Constructor Functions | Functions and Methods | |||
| Javascript Built In Constructors and Objects | Functions and Methods | |||
| Coding Exercise: Contructor Functions | Functions and Methods | |||
| Solution: Constructor Functions | Functions and Methods | |||
| Spread Operator with Arrays | JavaScript Advanced Techniques | |||
| Spread Operator with Objects | JavaScript Advanced Techniques | |||
| Using Default Parameters | JavaScript Advanced Techniques | |||
| The Spread Operator in Function Calls | JavaScript Advanced Techniques | |||
| Rest Parameters | JavaScript Advanced Techniques | |||
| Destructuring Arrays | JavaScript Advanced Techniques | |||
| Destructuring Objects | JavaScript Advanced Techniques | |||
| Destructuring Function Parameters | JavaScript Advanced Techniques | |||
| Coding Exercise: Advanced Techniques | JavaScript Advanced Techniques | |||
| Solution: Advanced Techniques | JavaScript Advanced Techniques | |||
| Working With map() Method | JavaScript Advanced Techniques | |||
| Understanding The filter() Method | JavaScript Advanced Techniques | |||
| Introducing The reduce() Method | JavaScript Advanced Techniques | |||
| Coding Exercise: map(), filter(), reduce() | JavaScript Advanced Techniques | |||
| Solution: map(), filter(), reduce() | JavaScript Advanced Techniques | |||
| Introduction To The Document Object Model (DOM) | Working With The Document Object Model DOM | |||
| Render Blocking, Async And Defer Scripts | Working With The Document Object Model DOM | |||
| Selecting DOM Elements Using Selectors | Working With The Document Object Model DOM | |||
| querySelector and querySelectorAll | Working With The Document Object Model DOM | |||
| The InnerHtml() and Risks | Working With The Document Object Model DOM | |||
| The innerText and textContent Properties | Working With The Document Object Model DOM | |||
| Working with getAttribute and setAttribute | Working With The Document Object Model DOM | |||
| removeAttribute and hasAttribute | Working With The Document Object Model DOM | |||
| Setting Styles with .style and Classes | Working With The Document Object Model DOM | |||
| Coding Excercise: DOM Manipulation | Working With The Document Object Model DOM | |||
| Solution: DOM Manipulation | Working With The Document Object Model DOM | |||
| Difference Between Nodes and Elements | DOM Traversal | |||
| Selecting a Parent with parentNode vs parentElement | DOM Traversal | |||
| Selecting Elements with childNodes vs children | DOM Traversal | |||
| Selecting the First or Last Child/Element | DOM Traversal | |||
| Selecting a Sibling of Nodes in the DOM | DOM Traversal | |||
| nodeName and nodeType | DOM Traversal | |||
| Coding Excercise: DOM Traversal | DOM Traversal | |||
| Solution: DOM Traversal | DOM Traversal | |||
| Introduction To DOM Events | DOM Events | |||
| Three Ways to Register Events in JavaScript | DOM Events | |||
| Important Properties Of Event Object | DOM Events | |||
| this Keyword In Event Handlers | DOM Events | |||
| Working With Mouse Events | DOM Events | |||
| The Keyboard Events | DOM Events | |||
| Using Form Events | DOM Events | |||
| Working With Window Events | DOM Events | |||
| Event Bubbling, Capture and Stopping Propagation | DOM Events | |||
| Event Bubbling and Capture in Action | DOM Events | |||
| Event Delegation Using Event Bubbling | DOM Events | |||
| Coding Excercise: DOM Events | DOM Events | |||
| Solution: DOM Events | DOM Events | |||
| Introducing Browser Object Model (BOM) | Browser Object Model (BOM) | |||
| The Window Object | Browser Object Model (BOM) | |||
| The location Object | Browser Object Model (BOM) | |||
| Working With The alert Object | Browser Object Model (BOM) | |||
| Coding Excercise: BOM Objects | Browser Object Model (BOM) | |||
| Solution: BOM Objects | Browser Object Model (BOM) | |||
| Project Overview | JavaScript Calculator Project | |||
| Adding Number Values | JavaScript Calculator Project | |||
| Adding Functionality To Use Operators | JavaScript Calculator Project | |||
| Decimal And Reset | JavaScript Calculator Project | |||
| Understanding JavaScript Modules | JavaScript Modules | |||
| Named Exports and Imports (merged In next lecture) | JavaScript Modules | |||
| Named Vs Default Exports | JavaScript Modules | |||
| Understanding Live Bindings | JavaScript Modules | |||
| Module Scope and globalThis | JavaScript Modules | |||
| Modularizing The Calculator App | JavaScript Modules | |||
| Create a Module and Functions For Values | JavaScript Modules | |||
| Module For Selectors and addNumberValue | JavaScript Modules | |||
| Modules For useOperator and addDecimal | JavaScript Modules | |||
| Import Modules And Test | JavaScript Modules | |||
| Add Reset For Values | JavaScript Modules | |||
| Unix vs Unix-Like vs Windows | The Unix Command Line | |||
| Terminal Vs Shell Vs Kernel | The Unix Command Line | |||
| Why Use The Command Line? | The Unix Command Line | |||
| Using Terminal And Structure of Commands | The Unix Command Line | |||
| Navigating The File System | The Unix Command Line | |||
| Working With Files And Directories | The Unix Command Line | |||
| Copying and Moving Files | The Unix Command Line | |||
| Deleting Files and Directories | The Unix Command Line | |||
| Using Help, Man Pages and Flags | The Unix Command Line | |||
| Using zip For Compression and Archiving | The Unix Command Line | |||
| Understanding Execution Sequence | Async JavaScript | |||
| Callback Functions In JavaScript | Async JavaScript | |||
| Asynchronous Tasks | Async JavaScript | |||
| Working With Promises | Async JavaScript | |||
| Understanding Call Stack and Event Loop | Async JavaScript | |||
| Cleaner Code With fetch | Async JavaScript | |||
| Async and Await | Async JavaScript | |||
| Try and Catch | Async JavaScript | |||
| What is JSON (JavaScript Object Notation) | Async JavaScript | |||
| What is Node.js And Why We Need It? | Introduction To Node.js | |||
| Back-End And Front-End Working Together | Introduction To Node.js | |||
| What Are We Going To Build | Introduction To Node.js | |||
| Install Node.js and npm | Introduction To Node.js | |||
| Hello World in Node.js | Introduction To Node.js | |||
| Introducing Node Package Manager (npm) | Introduction To Node.js | |||
| Create a New Node.js Project | Introduction To Node.js | |||
| First npm Package | Introduction To Node.js | |||
| Node.js Module - fs (File System) | Introduction To Node.js | |||
| Understanding REST APIs | Getting Started With Express | |||
| Testing An API (httpYac Setup) | Getting Started With Express | |||
| What is Express | Getting Started With Express | |||
| Setting Up Express Server (Starting With Project) | Getting Started With Express | |||
| Using Nodemon For Development | Getting Started With Express | |||
| A Deeper Look Request and Response | Getting Started With Express | |||
| Getting Started With Routing | Getting Started With Express | |||
| Understanding Route Params and Query Params | Getting Started With Express | |||
| URL Path Patterns | Getting Started With Express | |||
| Using ECMAScript Modules In Node.js | Getting Started With Express | |||
| Creating The Tasks Router | Getting Started With Express | |||
| Understanding What is Middleware | Express Middleware | |||
| Middleware And Parsing Request Body | Express Middleware | |||
| Activity Logging With Morgan | Express Middleware | |||
| Understanding (CORS) Cross Origin Resource Sharing | Express Middleware | |||
| What is a Controller | The Controller | |||
| Creating Tasks Controller | The Controller | |||
| Response For GET Tasks Request | The Controller | |||
| Understanding HTTP Status Codes | The Controller | |||
| Using http-status-codes | The Controller | |||
| Creating Response Formatter Middleware | The Controller | |||
| Resources Not Found - Default 404 | The Controller | |||
| Creating auth Controllers | The Controller | |||
| Creating User Controllers | The Controller | |||
| Introduction To Databases SQL Vs. NoSQL | Getting Started With MongoDB | |||
| Advantages Of Using MongoDB | Getting Started With MongoDB | |||
| MongoDB Cloud, Shell and Compass | Getting Started With MongoDB | |||
| First Collection, BSON and JSON | Getting Started With MongoDB | |||
| Inserting Data in MongoDB | Getting Started With MongoDB | |||
| Finding Data in MongoDB | Getting Started With MongoDB | |||
| Updating Data in MongoDB | Getting Started With MongoDB | |||
| Deleting Data in MongoDB | Getting Started With MongoDB | |||
| Understanding What is Mongoose | Schema, Model and Mongoose | |||
| Working With Schema And Model | Schema, Model and Mongoose | |||
| Schema Types Overview In Mongoose | Schema, Model and Mongoose | |||
| Integrating Mongoose With Express | Schema, Model and Mongoose | |||
| Creating The First Schema | Schema, Model and Mongoose | |||
| Creating a Model | Schema, Model and Mongoose | |||
| Dividing Controllers into Providers | Schema, Model and Mongoose | |||
| Fetch Documents From The Database | Schema, Model and Mongoose | |||
| Updating a Task | Schema, Model and Mongoose | |||
| Deleting a Task | Schema, Model and Mongoose | |||
| Schema and Model For a New User | Schema, Model and Mongoose | |||
| New User Provider | Schema, Model and Mongoose | |||
| Why is Additional Validation Needed | Validation and Error Handling | |||
| Getting Started With express-validator | Validation and Error Handling | |||
| Validating Multiple Properties | Validation and Error Handling | |||
| Creating Validator Files | Validation and Error Handling | |||
| Getting Sanitized Data | Validation and Error Handling | |||
| Error Handle Database Interactions | Validation and Error Handling | |||
| Error Logging Using Winston | Validation and Error Handling | |||
| Auto Error Logging With express-winston | Validation and Error Handling | |||
| Specifically Logging Errors to error.log | Validation and Error Handling | |||
| Creating a Error Logger Helper | Validation and Error Handling | |||
| Validating Query Parameters | Validation and Error Handling | |||
| Validating Patch Request | Validation and Error Handling | |||
| Validating Delete Request | Validation and Error Handling | |||
| Validating Create User Route | Validation and Error Handling | |||
| Understanding the Node Environment | Node Environment and Configuration | |||
| Setting NODE_ENV | Node Environment and Configuration | |||
| .env Files For Environment Variables | Node Environment and Configuration | |||
| Moving Variables to Env Files | Node Environment and Configuration | |||
| Create a Configuration File | Node Environment and Configuration | |||
| Introduction to Pagination | Pagination and Filtering | |||
| Updating the Pagination Query | Pagination and Filtering | |||
| Building the Pagination Object | Pagination and Filtering | |||
| Setting Default Values | Pagination and Filtering | |||
| Sorting Final Data | Pagination and Filtering | |||
| Refactor Final Data | Pagination and Filtering | |||
| Filter And Count Based On Status | Pagination and Filtering | |||
| Introducing Relationships With Sub Documents | User Authentication And Relationships | |||
| Adding Relationship Between User and Tasks | User Authentication And Relationships | |||
| Introduction To User Authentication | User Authentication And Relationships | |||
| Hashing And Salting Passwords | User Authentication And Relationships | |||
| Using bCrypt for Hashing | User Authentication And Relationships | |||
| Check For Unique Email | User Authentication And Relationships | |||
| User Login Controller and Validator | User Authentication And Relationships | |||
| Comparing Password To Hash | User Authentication And Relationships | |||
| Understanding (JWTs) JSON Web Tokens | User Authentication And Relationships | |||
| Generate JWT | User Authentication And Relationships | |||
| Guarding Routes With Middleware | User Authentication And Relationships | |||
| Assigning Authenticated Users To Tasks | User Authentication And Relationships | |||
| Introducing Open API Specification and Swagger | Documenting API | |||
| Configuring Swagger | Documenting API | |||
| Documenting Task Schema | Documenting API | |||
| Documenting Task POST Endpoint | Documenting API | |||
| Documenting Task GET Endpoint | Documenting API | |||
| Documenting Task PATCH Endpoint | Documenting API | |||
| Documenting Task DELETE Endpoint | Documenting API | |||
| Documenting User Endpoints | Documenting API | |||
| Documenting Auth Endpoints | Documenting API | |||
| Why Do We Need React | Introduction To React | |||
| Hello World in React | Introduction To React | |||
| Introduction To JSX | Introduction To React | |||
| Creating React Components | Introduction To React | |||
| React Props And Attributes | Introduction To React | |||
| JavaScript Expressions in JSX | Introduction To React | |||
| React Fragments | Introduction To React | |||
| Better Way To Create a React App | React Basics | |||
| Understanding a Single Page Application | React Basics | |||
| Vite Structure and Cleanup | React Basics | |||
| Creating First Component | React Basics | |||
| Understanding CSS Modules | React Basics | |||
| Working With Props | React Basics | |||
| Assigning Default Values To Props | React Basics | |||
| LikeButton Component and Events in React | React Basics | |||
| Understanding Events in React | React Basics | |||
| First React Hook useState() | React Basics | |||
| Introduction To Tailwindcss | Tailwind CSS | |||
| Install and Configure Tailwindcss | Tailwind CSS | |||
| Styling Elements with Tailwindcss | Tailwind CSS | |||
| Styling Body Element | Tailwind CSS | |||
| Introduction To React Router | React Router | |||
| Installing React Router | React Router | |||
| Creating First Few Routes | React Router | |||
| Creating Pages | React Router | |||
| Defining Routes For Pages | React Router | |||
| 404 Page Not Found Route | React Router | |||
| Introduction To Shadcn/ui | Layout and shadcn/ui | |||
| Installing Shadcn/ui | Layout and shadcn/ui | |||
| Planning User Interface Development | Layout and shadcn/ui | |||
| Enable Dark Mode | Layout and shadcn/ui | |||
| Signup Page Layout | Layout and shadcn/ui | |||
| Creating Signup Form | Layout and shadcn/ui | |||
| Creating Login Page | Layout and shadcn/ui | |||
| Setting Layout For Tasks Page | Layout and shadcn/ui | |||
| Tasks Counter Component | Layout and shadcn/ui | |||
| Props For TasksCounter | Layout and shadcn/ui | |||
| Creating Filter Bar | Layout and shadcn/ui | |||
| Creating Task Component | Layout and shadcn/ui | |||
| Adding Props To Task Component | Layout and shadcn/ui | |||
| Creating Form Layout | Layout and shadcn/ui | |||
| User Profile Component | Layout and shadcn/ui | |||
| Create TaskForm and Logout | Layout and shadcn/ui | |||
| What is Client Server Synchronization | Validation + ZOD + React Hook Form | |||
| Using Zod For Form Validation | Validation + ZOD + React Hook Form | |||
| Using react-hook-form With shadcn/ui | Validation + ZOD + React Hook Form | |||
| Validating Login Form | Validation + ZOD + React Hook Form | |||
| Handling Controlled Components | Validation + ZOD + React Hook Form | |||
| Validating Create Task Form | Validation + ZOD + React Hook Form | |||
| Introducing Tanstack Query | Client Server Synchronization | |||
| Setup Tanstack Query | Client Server Synchronization | |||
| Creating Signup Mutation Hook | Client Server Synchronization | |||
| Managing Side Effects With useEffect() | Client Server Synchronization | |||
| Creating Login Mutation Hook | Client Server Synchronization | |||
| Adding Bearer Token To Cookies | Client Server Synchronization | |||
| Implementing Private Routes | Client Server Synchronization | |||
| Mutation Hook For Creating New Task | Client Server Synchronization | |||
| Query Hook To Get All Tasks | Client Server Synchronization | |||
| Loading Tasks On Task Page | Client Server Synchronization | |||
| Displaying Tasks On The Page | Client Server Synchronization | |||
| Implement Logout Behaviour | Client Server Synchronization | |||
| Introducing The Context API | Context API and Global State | |||
| Creating the TasksContext | Context API and Global State | |||
| Query Params For Pagination | Context API and Global State | |||
| Using Context To Set Pagination Links | Context API and Global State | |||
| Completing Pagination | Context API and Global State | |||
| Sorting Tasks By Order | Context API and Global State | |||
| Refetch Query On Create Tasks | Context API and Global State | |||
| inProgress Button On Tasks | Context API and Global State | |||
| Mark a Task as Complete | Context API and Global State | |||
| Updating The Counters | Context API and Global State | |||
| Smooth Pagination Transitions | Context API and Global State | |||
| Populating Profile Avatar | Context API and Global State | |||
| Improving Query String Conditions | Context API and Global State | |||
| Understanding Server Infrastructure | Deploying Application | |||
| Creating A Server On AWS | Deploying Application | |||
| Pointing DNS Records To Server | Deploying Application | |||
| Connecting To The Server | Deploying Application | |||
| Installing And Configuring Nginx | Deploying Application | |||
| Securing Connections With SSL | Deploying Application | |||
| Installing React Application | Deploying Application | |||
| Installing NodeJS Application | Deploying Application | |||
| Understanding And Configuring PM2 | Deploying Application |