- Видео 197
- Просмотров 667 356
Programming with Umair
Пакистан
Добавлен 1 май 2023
Contact me on LinkedIn for software development services.
With over 9 years of hands-on experience in the tech industry, I possess a deep knowledge of a wide array of tools and frameworks, including but not limited to JavaScript, Angular, React, Next.js, Node, Express, React Native, Ionic, MongoDB, SQL and Java. My expertise also extends to Web Scraping, Automation, Unit Testing, Graphic Designing, Video/Photo editing, CI/CD, Docker, DevOp, Design Patterns, Teaching, Mentoring, Team Leadership, Project Management and more.
I have built many apps that include MVP, ERP, SAAS, E-Commerce, Web3, B2B, CRM, CMS, IOT and more.
Hope you learn new technologies, tools and concepts by following my tutorials.
With over 9 years of hands-on experience in the tech industry, I possess a deep knowledge of a wide array of tools and frameworks, including but not limited to JavaScript, Angular, React, Next.js, Node, Express, React Native, Ionic, MongoDB, SQL and Java. My expertise also extends to Web Scraping, Automation, Unit Testing, Graphic Designing, Video/Photo editing, CI/CD, Docker, DevOp, Design Patterns, Teaching, Mentoring, Team Leadership, Project Management and more.
I have built many apps that include MVP, ERP, SAAS, E-Commerce, Web3, B2B, CRM, CMS, IOT and more.
Hope you learn new technologies, tools and concepts by following my tutorials.
Cursor AI Code Editor is Awesome - Write Code | Generate | Debug in Seconds
Leaving vscode was hard but ai features provided by cursor ai code editor is beyond awesome. This is a cursor ai tutorial for beginners and in this video, you will guide how to use cursor ai for build large projects, generate code, talk with ai about your code, scan throw codebase, debug and fix your code and prompting suggests within your code. One cool feature cursor ai provide is we can write prompts to generate commands in terminal as well.
Cursor AI: www.cursor.com/
V0 by Vercel: v0.dev/
Nextjs: nextjs.org/
00:04 What is Cursor AI
02:18 Cursor AI terminal commands to create nextjs project
06:35 Notes app with AI using v0.dev
13:45 Run project with Cursor AI prompt
16:00 Cursor AI editor fea...
Cursor AI: www.cursor.com/
V0 by Vercel: v0.dev/
Nextjs: nextjs.org/
00:04 What is Cursor AI
02:18 Cursor AI terminal commands to create nextjs project
06:35 Notes app with AI using v0.dev
13:45 Run project with Cursor AI prompt
16:00 Cursor AI editor fea...
Просмотров: 458
Видео
Build Blog App in Next.js 15 with Appwrite CMS and Tailwindcss
Просмотров 1,4 тыс.Месяц назад
Appwrite is an awesome CMS service to build and manage databases, messages, file storage buckets etc. In this video, I will setup appwrite and configure it with next.js 15 project to build a simple blog application. I will build schema with relational modals in appwrite and fetch the data in next.js 15 project using server actions. This is a beginner guide to build a full stack blog application...
Next.js 15 Live Chat and User Feedback System with Intercom
Просмотров 525Месяц назад
How to integrate intercom with next.js 15 for live chat and user feedback system. I will show you from scratch, how to create a new next.js 15 project and add intercom scripts to enable it on all pages of our app. Also, I will show you all kinds of customization options provided by intercom like colors, layouts, styling, texts etc. Finally I will show you how to install third party apps and con...
Next.js 15 Unit Testing with Jest and React Testing Library | Test Driven Development
Просмотров 899Месяц назад
Learn all about unit testing and test driven development using jest and react testing library in next.js 15 project. Start off with what is unit testing, how to configure next.js project with jest, writing unit tests, advantages and disadvantages of unit testing, mocks, TDD, Test driven development and more. This tutorial is for beginners as well as experienced developers. 00:30 What is Unit Te...
Build Custom Whatsapp Contact Widget in Next.js 15
Просмотров 532Месяц назад
Build whatsapp live chat widget in next.js 15. Animation with css on scroll. Learn about transitions and dynamically making whatsapp icon visible on page scroll. #whatsappwidget #nextjs15 #react #whatschatwidget Follow Whatsapp Channel: whatsapp.com/channel/0029Va7yDtdKmCPVHT30ya3A React tutorials: ruclips.net/p/PL3i9po_eXL_ry_n5DZ30aEHazNCWdOUz7 JavaScript Tutorials and Projects: ruclips.net/p...
3 Ways to Fix Hydration Error in Next.js 15
Просмотров 8782 месяца назад
Hydration errors in next.js are very annoying and in this video, I am going to show to 3 methods with which you can fix hydration errors. 00:05 What is hydration error in next.js 01:42 First method to fix hydration error 03:13 Second method to fix hydration error 06:27 Third method to fix hydration error #nextjs15 #hydrationerror #nextjsperformance Follow Whatsapp Channel: whatsapp.com/channel/...
Learn all about Routings and Layouts in Next.js 15 | Beginner to Advance
Просмотров 1,2 тыс.2 месяца назад
Become expert in all kinds of routing technique of next.js 15 by following up in this tutorial. In this video, you will learn different types of routings methods like Basic routing, nested routing, dynamic routing, routing segments, optional dynamic routing, private folders routes, grouped routes, nested layouts, templates vs layouts in next.js 15, parallel routing, intercepting routes, not fou...
Add Multi Language Support in Next.js 15 Project
Просмотров 1,7 тыс.2 месяца назад
Configure next.js 15 with next-intl and support multiple language for texts inside server components, client components and browser tabs. Building project from scratch, installing required packages, configure files, building ui and bind multi-language text on multiple components. 00:05 Demo 02:00 Create next.js 15 project 04:58 Install packages 05:40 Configurations 12:30 Configure layout 17:00 ...
Best way to Validate and Submit Forms in Next.js15 using Zod, Prisma, Hooks, Server Actions
Просмотров 1,1 тыс.2 месяца назад
Build and validate forms like a senior developers with the help of zod, prisma, server actions and hooks. You will learn, how to create custom zod validation object that can be used to validate form both on client side and on server side. I will use prisma orm from db operation and mongodb as database. For performing db operations, will use server action and form hooks to store form data in dat...
Next.js 15 Caching Explained with SSG | ISR | CSR | SSR
Просмотров 1,2 тыс.2 месяца назад
In this video, you will learn caching in next.js 15 with practical examples. Plus, I will create a new next.js 15 project and talk about SSR, CSR, SSG and ISR to and scenarios of when to choose which approach. #nextjs15 #caching #reactjs19 #webdevelopment 00:05 Introduction00:35 Create next.js 15 project 03:45 Static Site Generation (SSG) in Next.js 1508:50 Incremental Static Rendering (ISG) in...
Build A Video Calling App in Next.js 15 with Zegocloud | Zoom Clone
Просмотров 1,4 тыс.3 месяца назад
Get UIKits for 10,000 free mins: bit.ly/4bDH2ap Learn more about ZEGOCLOUD: bit.ly/4czXPMG 100% customized Video Conferencing API: bit.ly/4bK6WsQ Top 10 Video Conferencing API for You: bit.ly/3WkaOfU #zegocloud #videocall #videoconferencing #videomeeting ZEGOCLOUD video conferencing API allows you to easily build your video conferencing apps within minutes. In this tutorial, you will learn how ...
Clerk Auth v5 Complete Guide with Next.js 15 | Routes Protection | Connect Clerk with Databases
Просмотров 5 тыс.3 месяца назад
In this tutorial, you will learn how to configure clerk auth v5 in next.js 15 project. I will teach you how to build nice UI, create custom auth pages, manage user sessions, protect routes, fetch user data in server and client components, protect apis, route protection with next.js middleware file and mostly importantly how to connect clerk auth with databases using web hooks and mongodb. 00:03...
Build Tour Guide in Next.js 15 and React.js | react-joyride
Просмотров 2 тыс.3 месяца назад
In this tutorial, you will learn how to build a customizable tour guide in next.js 15 using react-joyride package. It will be fully customizable that you can customize colors, styles, layout, enable or disable any elements and can add media files as well. I will also show you different built in props in the packages and how to add custom code to detect steps number within tour guide by using di...
Next Auth v5 Complete Guide in Next.js 15 with Prisma and MongoDB
Просмотров 14 тыс.4 месяца назад
Let's learn about next-auth v5 for complete authentication and authorization in next.js 15 using app directory structure. It includes installing required packages, configure auth.js v5 along with prisma orm, connect mongodb, setting up app layout, implement login, signup, login with github and finally, protecting routes using server components, middleware's and protecting api routes. 00:05 Demo...
Angular 17 Tutorial - Protect Routes with Guards #17
Просмотров 9764 месяца назад
In this video, you will learn about auth guards to protect routes in angular 17. I will show you how to make routes protected based upon session of user. 00:05 Overview 01:30 Create routes 07:00 Add session 08:10 Create guard 11:30 Protect routes based upon session #angularguards #angular17 #angulartutorial Follow Whatsapp Channel: whatsapp.com/channel/0029Va7yDtdKmCPVHT30ya3A React tutorials: ...
Top 5 Tailwind css Component Libraries for Next.js 15 and React Projects
Просмотров 1,4 тыс.4 месяца назад
Top 5 Tailwind css Component Libraries for Next.js 15 and React Projects
Angular 17 Tutorial - Lazy Loading Feature Modules #16
Просмотров 8524 месяца назад
Angular 17 Tutorial - Lazy Loading Feature Modules #16
Angular 17 Tutorial - Routing | Dynamic Routing | Nested Routing #15
Просмотров 1,3 тыс.4 месяца назад
Angular 17 Tutorial - Routing | Dynamic Routing | Nested Routing #15
Storybook Tutorial in Next.js 14+ with Tailwindcss and Shadcn UI Components | Next.js 15
Просмотров 4,4 тыс.4 месяца назад
Storybook Tutorial in Next.js 14 with Tailwindcss and Shadcn UI Components | Next.js 15
Angular 17 Tutorial - What are Components | Components Communication #14
Просмотров 9454 месяца назад
Angular 17 Tutorial - What are Components | Components Communication #14
Build Notes App using Next.js 14+ | Drizzle ORM | Neon Database and Clerk Authentication
Просмотров 5 тыс.4 месяца назад
Build Notes App using Next.js 14 | Drizzle ORM | Neon Database and Clerk Authentication
Angular 17 Tutorial - Build Reactive Forms #13
Просмотров 2,7 тыс.5 месяцев назад
Angular 17 Tutorial - Build Reactive Forms #13
Angular 17 Tutorial - Build Template Driven Forms #12
Просмотров 9835 месяцев назад
Angular 17 Tutorial - Build Template Driven Forms #12
Next.js 14+ Authentication with Auth0 - Login | Signup | Reset Password along with Routes protection
Просмотров 5 тыс.5 месяцев назад
Next.js 14 Authentication with Auth0 - Login | Signup | Reset Password along with Routes protection
Angular 17 Tutorial - Observables and Interfaces #11
Просмотров 1,2 тыс.5 месяцев назад
Angular 17 Tutorial - Observables and Interfaces #11
React Signals Tutorial - signal | computed | effect - Local and Global States
Просмотров 5275 месяцев назад
React Signals Tutorial - signal | computed | effect - Local and Global States
Angular 17 Tutorial - Signal | Computed | Effect - CRUD App #10
Просмотров 1,7 тыс.5 месяцев назад
Angular 17 Tutorial - Signal | Computed | Effect - CRUD App #10
Micro-Services Architecture Tutorial for Beginners with Node, Moleculer and MongoDB
Просмотров 4845 месяцев назад
Micro-Services Architecture Tutorial for Beginners with Node, Moleculer and MongoDB
Anguar 17 Tutorial - JSON and ASYNC Pipe #9
Просмотров 1,4 тыс.6 месяцев назад
Anguar 17 Tutorial - JSON and ASYNC Pipe #9
Anguar 17 Tutorial - Dependency Injection and Services for API Calls with HttpClient #8
Просмотров 1,9 тыс.6 месяцев назад
Anguar 17 Tutorial - Dependency Injection and Services for API Calls with HttpClient #8