- Видео 75
- Просмотров 10 267
CodeCraft Academy
Индия
Добавлен 19 июн 2020
Welcome to CodeCraft Academy!
Are you passionate about web development, coding, and all things tech? You've come to the right place! Our channel is dedicated to providing high-quality tutorials, tips, and insights for developers of all skill levels.
Please do subscribe to support the channel and click on bell icon for notifications.
LinkedIn: www.linkedin.com/in/codecraft-academy-9b2938312/
Thanks
CodeCraft Academy
Are you passionate about web development, coding, and all things tech? You've come to the right place! Our channel is dedicated to providing high-quality tutorials, tips, and insights for developers of all skill levels.
Please do subscribe to support the channel and click on bell icon for notifications.
LinkedIn: www.linkedin.com/in/codecraft-academy-9b2938312/
Thanks
CodeCraft Academy
5 Front-end Interview Questions You Need to MASTER! | Select All Checkbox Implementation
In this React tutorial, we dive into building an optimized "Select All" checkbox feature with efficient state management and a user-friendly interface using Tailwind CSS. Learn how to handle individual checkbox selection, dynamically toggle all checkboxes with the "Select All" option, and improve performance by utilizing JavaScript Set objects. This step-by-step guide is perfect for React developers looking to implement or improve checkbox functionalities in their projects. Follow along as we integrate responsive UI components with Tailwind CSS to create a seamless and interactive user experience. Whether you're developing forms, lists, or handling bulk item selections, this tutorial cove...
Просмотров: 59
Видео
CSS object-fit: contain vs object-fit: cover - Image Resizing Explained!
Просмотров 69 часов назад
In this video, I’ll explain the differences between two powerful CSS properties: object-fit: contain and object-fit: cover. We’ll dive into how each property works when resizing images to fit containers while preserving their aspect ratios. You’ll see live demos to help you understand when to use each property based on your layout needs. Whether you're designing for responsive web apps or adjus...
Must Know Questions To Crack Front-end Interview Coding Challenge - Responsive Lightbox Gallery
Просмотров 40День назад
In this video, we walk you through creating a Lightbox Gallery using React. We’ll build a responsive image grid, and when clicked, the images will open in a full-screen modal with a dark background. You'll also learn how to implement clickable thumbnails to switch between images and add a close button for better user interaction. Follow along as we code this from scratch using React and Tailwin...
Must Know Questions To Crack Front-end Interview Coding Challenge | Dynamic Feedback Star Rating
Просмотров 12114 дней назад
In this video, we'll walk through how to create a dynamic feedback star rating component in React. You'll learn how to use SVGs to render stars, handle hover and click events to update ratings, and manage state to persist user feedback. We’ll also explore the basics of the SVG element and its advantages in web development. Perfect for React beginners and developers looking to enhance their UI w...
Must Know Questions To Crack Front-end Interview Coding Challenge | Countries List With Debounce
Просмотров 10614 дней назад
In this video, I'll walk you through designing a solution for one of the popular front-end interview questions asked by top tech companies like Amazon, Google, and Facebook. We'll create a dropdown list that fetches a list of countries with debouncing, ensuring efficient API calls. You'll learn: 🔄 How to use debounce to optimize API calls 🎯 Design a user-friendly country selection dropdown ✅ Im...
Must Know Questions To Crack Front-end Interview Coding Challenge | Dynamic Folder Structure UI
Просмотров 13714 дней назад
In this video, I'll show you how to design a solution for a common front-end interview question asked at companies like Google and Amazon. We'll create a dynamic folder structure UI, similar to what you see in VS Code, based on a data.js file that mimics a real-world folder structure. 📁 Key Features: 📂 Expanding Folders: Click on folders to reveal nested files and subfolders. 🗂️ Real Data Mimic...
Must Know Questions To Crack Front-end Interview Coding Challenge | Transfer List Component
Просмотров 12714 дней назад
In this video, we dive into the challenge of building a Transfer List component in React, a popular feature often tested in technical interviews at top-tier companies like Facebook, Google, and Netflix. The goal? Seamlessly transfer selected checkbox items between two containers with a polished, intuitive interface. We’ll walk you through each step, from functionality to aesthetics, ensuring a ...
How to implement Incremental Static Regeneration (ISR) in Next.js
Просмотров 4621 день назад
In this video, we dive deep into Next.js Incremental Static Regeneration (ISR), demonstrating how to keep your static pages updated dynamically without rebuilding your app. We'll use JSON Server as a local mock API to fetch data, then showcase how to automatically revalidate pages at specified intervals. Learn how to trigger on-demand revalidation in ISR using a custom API route in Next.js when...
How to Implement Comment & Reply Functionality in React - PART 8
Просмотров 134Месяц назад
Hi, welcome to the channel! In today's video, I'll walk you through the step-by-step implementation of adding comment functionality to posts in a React application. We'll learn how to display a comment box when the user clicks on the comment button and add comments by pressing the Enter key or clicking a button. We'll start by setting up the toggleCommentBox function to control the visibility o...
Know How To Boost Your Productivity As A React Developer
Просмотров 65Месяц назад
Boost your productivity by learning how to configure the debugger for React JS in Visual Studio Code! In this step-by-step guide, I'll show you how to set up the debugger, create a custom launch configuration, and effectively use the debugging tools like 'Step Over,' 'Step Into,' and 'Step Out.' No more guesswork or endless console logs - let's make debugging your React applications smooth and ...
How to Add Like Functionality in React Redux App (PART 7)
Просмотров 113Месяц назад
In this video, we continue our React Redux series by adding 'Like' and 'Comment' functionalities to each post. We start by creating simple button components for Like, Comment, Send, and Share, and then combine them into a PostActions component. You'll learn how to handle hover events to display reaction popups and use debouncing to improve user experience. Follow along as we enhance our app ste...
How To Integrate Firebase Authentication In A React App
Просмотров 153Месяц назад
In this video, I'll walk you through the process of integrating Firebase Authentication into a React application built with Vite. We'll start by setting up a Firebase project, creating a React Vite project, and securing our Firebase configuration using environment variables. Then, we'll implement and test authentication functionalities, including sign-up, sign-in, and sign-out, using Firebase. ...
How to Run React Application in the AWS Cloud
Просмотров 51Месяц назад
In this tutorial, we'll guide you step by step on how to deploy your Dockerized React Vite app on an AWS free-tier EC2 instance. This process will enable you to run your application in the cloud with minimal cost. Before getting started, make sure your Docker image is ready and pushed to Docker Hub. If you're unsure how to Dockerize your Vite React application, check out the videos linked in th...
How to make your application image accessible from anywhere
Просмотров 28Месяц назад
How to make your application image accessible from anywhere
How To Dockerize & Deploy VITE REACT App | Step-by-Step Guide
Просмотров 526Месяц назад
How To Dockerize & Deploy VITE REACT App | Step-by-Step Guide
How To Set Up A React Project With Vite In 5 Minutes
Просмотров 60Месяц назад
How To Set Up A React Project With Vite In 5 Minutes
Learn JavaScript Object Methods - PART 1 (General Methods)
Просмотров 33Месяц назад
Learn JavaScript Object Methods - PART 1 (General Methods)
useActionData() : Super Useful & the Best Tool To Handle Form Submissions
Просмотров 24Месяц назад
useActionData() : Super Useful & the Best Tool To Handle Form Submissions
Learn The 7 Most Powerful JavaScript Object Creation Methods
Просмотров 36Месяц назад
Learn The 7 Most Powerful JavaScript Object Creation Methods
How to Persist State with LocalStorage in React App - PART 6
Просмотров 49Месяц назад
How to Persist State with LocalStorage in React App - PART 6
How to build a Social Media Feed App with Redux & Tailwind CSS in React: PART 5
Просмотров 67Месяц назад
How to build a Social Media Feed App with Redux & Tailwind CSS in React: PART 5
One Of The Most Important & Confusing Topics In JavaScript: 'this' Keyword
Просмотров 23Месяц назад
One Of The Most Important & Confusing Topics In JavaScript: 'this' Keyword
How to build a Social Media Feed App with Redux & Tailwind CSS in React: PART 4
Просмотров 999Месяц назад
How to build a Social Media Feed App with Redux & Tailwind CSS in React: PART 4
How to build a Social Media Feed App with Redux & Tailwind CSS in React: PART 3
Просмотров 7482 месяца назад
How to build a Social Media Feed App with Redux & Tailwind CSS in React: PART 3
JavaScript Coding Challenge: Understanding Closures Better With An Example
Просмотров 322 месяца назад
JavaScript Coding Challenge: Understanding Closures Better With An Example
Build Social Media Feed App with Redux & Tailwind CSS in React: PART 2
Просмотров 1402 месяца назад
Build Social Media Feed App with Redux & Tailwind CSS in React: PART 2
How to build a Social Media Feed App with Redux & Tailwind CSS in React: PART 1
Просмотров 2142 месяца назад
How to build a Social Media Feed App with Redux & Tailwind CSS in React: PART 1
Most Important JavaScript Interview Questions You Must Know
Просмотров 462 месяца назад
Most Important JavaScript Interview Questions You Must Know
Most Important JavaScript Interview Questions You Must Know - Question 19
Просмотров 162 месяца назад
Most Important JavaScript Interview Questions You Must Know - Question 19