- 203
- 780 850
Programming with Umair
Pakistan
Приєднався 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.
Complete Supabase Auth in Next.js 15 | OAuth Login | Forget & Reset Password | Supabase RLS
Build complete supabase authentication and authorization system in next.js 15 project along with signup, login, forget password, reset password, email verification, login with google and logout. Learn how to configure RLS (row level security) in supabase for database tables. Learn how to configure next.js project with supabase for both client side and server side code.
#supabaseauth #nextjs15 #supabase #loginsignup #supabaseoauth
00:05 Demo of supabase next.js authentication
05:10 More Next.js Tutorials
07:10 Overview of starter code
10:25 Configure Supabase in Next.js project
13:00 Setting up supabase auth for next.js
17:35 Protect routes
24:25 Signup user with supabase
33:30 Email verification in supabase auth
35:25 Login user with supabase
40:00 Dynamic navbar with user session
41:40 Logout user with supabase
43:43 Create user profiles table in supabase db
45:45 Create RLS in supabase
49:30 Sync user auth with profiles table
55:00 User data on server and client components
01:05:30 OAuth login with github in supabase nextjs
01:16:40 Forget Reset Password in supabase next.js
Github Repo: github.com/umairjameel321/supabase-auth-nextjs
Supabase Next.js authentication guide:
supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app
supabase.com/docs/guides/auth/social-login/auth-github?queryGroups=environment&environment=server
Follow Whatsapp Channel:
whatsapp.com/channel/0029Va7yDtdKmCPVHT30ya3A
React tutorials:
ua-cam.com/play/PL3i9po_eXL_ry_n5DZ30aEHazNCWdOUz7.html
JavaScript Tutorials and Projects:
ua-cam.com/play/PL3i9po_eXL_rwqWg1yPGBFKFZWqjaCTZe.html
Angular Tutorials:
ua-cam.com/video/Qts7H8P-FpI/v-deo.html&pp=gAQBiAQB
Docker Tutorials & CI/CD:
ua-cam.com/play/PL3i9po_eXL_rej_oo1FyL3D7q1AewarfJ.html
Angular 16 Crash Course For Beginners:
ua-cam.com/play/PL3i9po_eXL_orh8YJcdGNO0C6P2mHABT7.html
Tech Tutorials - Random:
ua-cam.com/video/IYRrE-yikb0/v-deo.html
Complete Next.js 13 Tutorials: ua-cam.com/play/PL3i9po_eXL_paQQIa4qTum7_9CPqQwiFH.html
Next.js 14 Tutorials:
ua-cam.com/play/PL3i9po_eXL_pyNKBtAAK_gVBWG5d8yZS9.html
Next.js Tutorials:
ua-cam.com/play/PL3i9po_eXL_oHRV-wTND_gfi4X40wELTi.html
Node Express MongoDB Bootcamp: ua-cam.com/play/PL3i9po_eXL_rdDdgVHSZjmzvwUB-jj8SU.html
ChatGPT Tutorials: ua-cam.com/play/PL3i9po_eXL_qtCoSV1GHX_5Q48D2La9xW.html
Join our facebook group:
groups/996305460498149/
Contact us for development services:
www.linkedin.com/in/umair-jameel-24aa5368/
#supabaseauth #nextjs15 #supabase #loginsignup #supabaseoauth
00:05 Demo of supabase next.js authentication
05:10 More Next.js Tutorials
07:10 Overview of starter code
10:25 Configure Supabase in Next.js project
13:00 Setting up supabase auth for next.js
17:35 Protect routes
24:25 Signup user with supabase
33:30 Email verification in supabase auth
35:25 Login user with supabase
40:00 Dynamic navbar with user session
41:40 Logout user with supabase
43:43 Create user profiles table in supabase db
45:45 Create RLS in supabase
49:30 Sync user auth with profiles table
55:00 User data on server and client components
01:05:30 OAuth login with github in supabase nextjs
01:16:40 Forget Reset Password in supabase next.js
Github Repo: github.com/umairjameel321/supabase-auth-nextjs
Supabase Next.js authentication guide:
supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app
supabase.com/docs/guides/auth/social-login/auth-github?queryGroups=environment&environment=server
Follow Whatsapp Channel:
whatsapp.com/channel/0029Va7yDtdKmCPVHT30ya3A
React tutorials:
ua-cam.com/play/PL3i9po_eXL_ry_n5DZ30aEHazNCWdOUz7.html
JavaScript Tutorials and Projects:
ua-cam.com/play/PL3i9po_eXL_rwqWg1yPGBFKFZWqjaCTZe.html
Angular Tutorials:
ua-cam.com/video/Qts7H8P-FpI/v-deo.html&pp=gAQBiAQB
Docker Tutorials & CI/CD:
ua-cam.com/play/PL3i9po_eXL_rej_oo1FyL3D7q1AewarfJ.html
Angular 16 Crash Course For Beginners:
ua-cam.com/play/PL3i9po_eXL_orh8YJcdGNO0C6P2mHABT7.html
Tech Tutorials - Random:
ua-cam.com/video/IYRrE-yikb0/v-deo.html
Complete Next.js 13 Tutorials: ua-cam.com/play/PL3i9po_eXL_paQQIa4qTum7_9CPqQwiFH.html
Next.js 14 Tutorials:
ua-cam.com/play/PL3i9po_eXL_pyNKBtAAK_gVBWG5d8yZS9.html
Next.js Tutorials:
ua-cam.com/play/PL3i9po_eXL_oHRV-wTND_gfi4X40wELTi.html
Node Express MongoDB Bootcamp: ua-cam.com/play/PL3i9po_eXL_rdDdgVHSZjmzvwUB-jj8SU.html
ChatGPT Tutorials: ua-cam.com/play/PL3i9po_eXL_qtCoSV1GHX_5Q48D2La9xW.html
Join our facebook group:
groups/996305460498149/
Contact us for development services:
www.linkedin.com/in/umair-jameel-24aa5368/
Переглядів: 288
Відео
Build Live Streaming Web App in Next.js 15 using ZegoCloud UIKits
Переглядів 37321 день тому
· Get 10000 free mins with UIKits: bit.ly/4fU4D9G · Take advantage of ZEGOCLOUD: bit.ly/4fLPHu9 · How to build a live streaming app: bit.ly/4isRZ3c #zegocloud #livestreamingsdk #streamingservice #webrtcstreaming Let's build a amazing live streaming application in next.js 15 using an awesome services called zegocloud. I will show you how to setup UI, layouts, states, routes and all configuration...
Build Real-Time Chat App in NEXT JS 15 using Socket.io for Dev and Prod Environments
Переглядів 3,2 тис.Місяць тому
Build a chat app for both dev and production environment is always a challenging task. In this tutorial, I will show you how to configure next.js 15 project with socket.io and build a real time live chat application in which user can create rooms and with other users who ever join that room. It includes best practice of configurations for typescript and more. 00:30 Demo of ChatApp in Next.js 15...
The FASTEST Way to Build AI Chatbot in Next.js with OpenAI and Gemini
Переглядів 2,4 тис.Місяць тому
STOP building chatbots the wrong way with open AI or gemini. In this tutorial, I will show you the best way to build chatbots in next.js projects with the help of gemini and open ai. I will use vercel ai sdk to implement the functionality. Show chatbot window on scroll of page and within the pop up. Chat only about the application while staying within the context of app. 00:10 Demo of AI Chatbo...
You've Been Doing Next.js 15 Appwrite Authentication WRONG All Along
Переглядів 1,4 тис.2 місяці тому
Authentication and Authorization are the most important feature in every web application. In this tutorial, I will teach you how to implement it with best practices and tackling errors. Next.js 15 along with appwrite provide the best combination to build full stack applications. This tutorial includes routings, design, appwrite setup, route protection, error handling etc. 00:04 Appwrite auth de...
bolt.new is the FASTEST Way to Build NOCODE Projects with AI
Переглядів 2,3 тис.2 місяці тому
Let's write code and build projects within few minutes with the help of ai. Ai tools and code editor like supermaven, cursor ai and bolt.new really revolutionizing the future of writing code in much less time. In this video, I will explain you all the feature these ai code editor provides and compare these all together. 00:04 Intro 01:15 vscode AI copilot extensions 04:03 Cursor AI features 12:...
Cursor AI Code Editor is Awesome - Write Code | Generate | Debug in Seconds
Переглядів 7373 місяці тому
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 writ...
Build a FAST Blog App in 1 Hour with Next.js 15 and Appwrite CMS
Переглядів 2,5 тис.3 місяці тому
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
Переглядів 9734 місяці тому
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
Переглядів 2,7 тис.4 місяці тому
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
Переглядів 9904 місяці тому
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: ua-cam.com/play/PL3i9po_eXL_ry_n5DZ30aEHazNCWdOUz7.html JavaScript Tutorials and Projects: ua-cam...
3 Ways to Fix Hydration Error in Next.js 15
Переглядів 6 тис.4 місяці тому
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
Переглядів 3,1 тис.4 місяці тому
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
Переглядів 7 тис.5 місяців тому
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,7 тис.5 місяців тому
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
Переглядів 2,7 тис.5 місяців тому
Next.js 15 Caching Explained with SSG | ISR | CSR | SSR
Build A Video Calling App in Next.js 15 with Zegocloud | Zoom Clone
Переглядів 2,1 тис.5 місяців тому
Build A Video Calling App in Next.js 15 with Zegocloud | Zoom Clone
Clerk Auth v5 Complete Guide with Next.js 15 | Routes Protection | Connect Clerk with Databases
Переглядів 9 тис.5 місяців тому
Clerk Auth v5 Complete Guide with Next.js 15 | Routes Protection | Connect Clerk with Databases
Build Tour Guide in Next.js 15 and React.js | react-joyride
Переглядів 3,4 тис.6 місяців тому
Build Tour Guide in Next.js 15 and React.js | react-joyride
Next Auth v5 Complete Guide in Next.js 15 with Prisma and MongoDB
Переглядів 21 тис.6 місяців тому
Next Auth v5 Complete Guide in Next.js 15 with Prisma and MongoDB
Angular 17 Tutorial - Protect Routes with Guards #17
Переглядів 1,4 тис.6 місяців тому
Angular 17 Tutorial - Protect Routes with Guards #17
Top 5 Tailwind css Component Libraries for Next.js 15 and React Projects
Переглядів 2 тис.6 місяців тому
Top 5 Tailwind css Component Libraries for Next.js 15 and React Projects
Angular 17 Tutorial - Lazy Loading Feature Modules #16
Переглядів 1,2 тис.7 місяців тому
Angular 17 Tutorial - Lazy Loading Feature Modules #16
Angular 17 Tutorial - Routing | Dynamic Routing | Nested Routing #15
Переглядів 1,8 тис.7 місяців тому
Angular 17 Tutorial - Routing | Dynamic Routing | Nested Routing #15
Storybook Tutorial in Next.js 14+ with Tailwindcss and Shadcn UI Components | Next.js 15
Переглядів 6 тис.7 місяців тому
Storybook Tutorial in Next.js 14 with Tailwindcss and Shadcn UI Components | Next.js 15
Angular 17 Tutorial - What are Components | Components Communication #14
Переглядів 1,2 тис.7 місяців тому
Angular 17 Tutorial - What are Components | Components Communication #14
Build Notes App using Next.js 14+ | Drizzle ORM | Neon Database and Clerk Authentication
Переглядів 6 тис.7 місяців тому
Build Notes App using Next.js 14 | Drizzle ORM | Neon Database and Clerk Authentication
Angular 17 Tutorial - Build Reactive Forms #13
Переглядів 3,8 тис.7 місяців тому
Angular 17 Tutorial - Build Reactive Forms #13
Angular 17 Tutorial - Build Template Driven Forms #12
Переглядів 1,3 тис.7 місяців тому
Angular 17 Tutorial - Build Template Driven Forms #12
Next.js 14+ Authentication with Auth0 - Login | Signup | Reset Password along with Routes protection
Переглядів 7 тис.7 місяців тому
Next.js 14 Authentication with Auth0 - Login | Signup | Reset Password along with Routes protection
profesional code writer! very quality video.
Really Helpful Video
Do you offer online teaching? or a complete course for the next js ?
verrrrrrrrrrrrrry good,so helpful for me
Nice video ! Thanks a lot!
Next-js 15 full course video please
Hi, watch my next.js playlist. It contain videos of pretty much every topic of nextjs.
for me its not working in next js
Where to find this code??
Please watch the video to understand the code.
@ProgrammingwithUmair321 Trying to alter the code with nodemailer since sendgrid is not accepting my account.
Amazing Explanation🫀
Buynow pr click krny s checkout open nh kr rha q
Can you please provide code repo link in video description.
Can you please provide code repo link in video description.
It is bad SEO approach because because link url are not translates e.g. „about” in en and fr. Is there any solution for that?
thank you!
Request yo to make the next tutorial on razorpay and stripe payments/subscriptions. Awesome content. Thanks
Hi how can I build a docker image to deploy my next.js application in AWS alb and start with https protocol.
Can you please make one on cypress as well ?
thank you
Please put the direct links to each discussed application in your comments
hey this is possible to create a single function for main layout.ts and with router update all title and description?
how I can do this for multiple categories ?
Most times ur just copy and pasting only
Bro it's getting an errors please send the repo link please
How can we.run productions on Dockerfile? thank you
This was great thank you very much.
data.js file is not included and not clear in the video. I am getting error 405 when attempting to call gemini api. Any suggestions?
J's file is not loading anything in web browser only html and css file is working 😢 what's going wrong
source code bro, where is it?
This was a great tutorial, I recommend to beginners. Sir, please make a video on how to integrate docker in Angular 16+
For those who search how to link clerk database with your own database : 1:11:23
It is my bad that I didn't see this video earlier. Man you solved many problems in less than 30min..
Pls post the repo for revision
Thank u so much for such fresh series
Best video i have seen so far to integrate the chatbot.
Great application keep building
Thanks a lot brother Really loved this video.
When we use "use client" in a component, we might expect it to behave like older versions of React, where only a single <div> is sent to the client along with a JavaScript bundle that generates the entire DOM tree dynamically in the browser. However, this is not how client components work in Next.js. In Next.js, even after adding "use client", the component is still rendered on the server to generate the initial HTML structure. This server-rendered HTML is sent to the browser to ensure fast loading and SEO benefits. Along with this, a JavaScript bundle is sent to the browser, which enables React to hydrate the component. Hydration involves attaching event listeners, restoring state, and reconciling the React virtual DOM with the pre-rendered server HTML. If the server-generated HTML and the HTML generated during hydration do not match (due to dynamic data, mismatched attributes, etc.), a hydration error will be thrown by Next.js, as React expects the DOM structure to be consistent across both phases.
Perhaps the best Paki web dev channel I've come across in my life that covers intermediate/advanced topics, watched your SSG/ISR etc video the other day and it was really helpful so thanks a lot!
Good video thanks ❤❤
Getting error in Navbar at line number 5 const {userId} = auth(); Please help
Await auth()
Great jobs, thx 🎉
Your tutorials are always a masterpiece ❤
Brother these 1 hour tutorials are helping a lot! Yesterday i made the chatbot and it was so cool..kindly keep making these projects, can we expect the upcoming project more heavy like utilizing more features of Nexjts 15 please
Is it free method?
If you have eslint.config.mjs files like me: -Add: { rules: { "@typescript-eslint/no-require-imports": "off", }, } inside the eslintConfig. Also I solved a problem in my package.json by doing the following: -run: npm install --save-dev cross-env -add "dev:socket": "set NODE_OPTIONS=--loader ts-node/esm --trace-warnings --no-warnings && ts-node server.mts" -add "start:socket": "cross-env NODE_ENV=production node dist/server.mjs"
You are doing great Work Umair. Subscribing you now. Keep up the good work.
This playlist is the best path to Angular knowledge!
Umair Bhai, Tutorial is damn informative, Thanks a lot...A little suggestion is to kindly zoom-in just a bit so the code is more readable...Again Thanks <3
Legend
Thanks for the video which help me to learn docker within short time.