- Видео 59
- Просмотров 368 945
Codr Kai
США
Добавлен 28 июл 2019
I like to code
All socials @codrkai
IG/codrkai
Patreon/codrkai
Github/codrkai
Beacons/codrkai
All socials @codrkai
IG/codrkai
Patreon/codrkai
Github/codrkai
Beacons/codrkai
I Launched My First SaaS Product Online Using This Tech Stack
This is the tech stack I used to launch my first product online: Next JS, Daisy UI, MongoDB, and AWS Amplify with S3 Bucket.
The app I created is called Strapp and it allows you to easily integrate Stripe Payment Processing into your Next JS projects.
www.producthunt.com/products/strapp
I would appreciate if you can take a look and give it a thumbs up. Thank you.
All of my future products can be found on:
dailypickr.com
Follow my socials @codrkai
The app I created is called Strapp and it allows you to easily integrate Stripe Payment Processing into your Next JS projects.
www.producthunt.com/products/strapp
I would appreciate if you can take a look and give it a thumbs up. Thank you.
All of my future products can be found on:
dailypickr.com
Follow my socials @codrkai
Просмотров: 64
Видео
NextJS 14 - How To Deploy Your App To AWS Amplify or Vercel
Просмотров 2,3 тыс.5 месяцев назад
In this final tutorial series for learning how to program using Next JS 14 App Router, I will show you how to deploy your app to AWS Amplify and Vercel. These are two of the most popular hosting platforms that supports Next JS. The app I am using in this tutorial is a Todo List that has Next-Auth Authentication and a Supabase Database. Full Source Codes available on my Patreon: www.patreon.com/...
NextJS 14 - Authentication using Next Auth / Auth.js [Complete Guide]
Просмотров 3,6 тыс.5 месяцев назад
This is the complete guide to Authentication in Next JS 14 App Router using Next Auth, also known as Auth.js. This easy guide will step you through authenticating using Social Media accounts such as Github and Google, or creating your own Custom Login Page. Auth uses Sessions, JWT, Sign In with Github, Google, or Credentials. Time Stamps 00:00 - APP DEMO 00:28 - SETUP 03:04 - SIGN IN USING SOCI...
NextJS 14 - How to use Postgres Database, SUPABASE, NEON TECH, VERCEL
Просмотров 7396 месяцев назад
This Next JS App Router Tutorial will show you how to connect to POSTGRES databases, specifically SUPABASE, NEON, and VERCEL. I built a simple Dashboard admin to show how to select, insert, and delete database items. Full source codes can be found at my Patreon: patreon.com/codrkai Time Markers 00:00 - Intro 00:20 - Neon Tech 08:14 - Vercel 11:01 - Supabase 13:50 - Dashboard using Supabase #rea...
NextJS 14 - State Management with COOKIES, REDUX, ZUSTAND
Просмотров 1,7 тыс.6 месяцев назад
Here are 3 popular ways to access global variables on your Next JS app. These are also referred as State Management, Sessions, or Maintaining Global Variables that can then be accesses on any page of your application. I will show how to code Cookies, Redux, and Zustand in the Next JS App Router. Full Downloadable Code patreon.com/codrkai Socials beacons.ai/codrkai Time Stamps 00:00 - INTRO 00:4...
NextJS 14 - Passing Data to Pages and Components
Просмотров 6 тыс.7 месяцев назад
This Next JS App Router Tutorial will show you how to pass data to other pages and components. Data is passed by Parameters, and by the useContext and createContext features in Next JS. I also show how to pass URL parameters to pages. Stay until the end of the video to not miss out on anything important. Full source codes can be found at my Patreon: patreon.com/codrkai Thank you to my new Patre...
NextJS 14 - How to Submit FORM DATA using UseFormState
Просмотров 7 тыс.8 месяцев назад
Next JS 14 Tutorial on how to submit Form Data using various methods such as, useFormState, useState, send form data to server API, saving the form data to a cloud database, and more. Full code download is provided in my Patreon. patreon.com/codrkai Time Markers 00:00 - Basic Form Submit 04:19 - Submit Data to Server API 10:29 - Use Form State 13:27 - Use Form Status 14:40 - Advanced Form Setup...
Is CHAT GPT Better than CODING TUTORIALS?
Просмотров 1409 месяцев назад
Comparing my coding tutorials with Chat GPT and Google Gemini. Watch until the end. Support this channel by joining my Patreon, or simply Like this video :) patreon.com/codrkai Socials and Links beacons.ai/codrkai My Camera Filming Setup Sony a7c II Full Frame Camera: amzn.to/49FQxFk Sony 14mm f/1.8 GM Lens: amzn.to/48olexS Rode VideoMicro Microphone: amzn.to/3wsYb7J
NextJS 14 - How to FETCH DATA, SERVER API Routes
Просмотров 20 тыс.9 месяцев назад
This Next JS 14 Tutorial will show you how to fetch data from an external website, or how to fetch data from your own server. To fetch data from the server, I will create a Server API to post JSON data. Video Time Markers 00:00 - Fetching Data 03:32 - Server API 06:20 - Pass Params to Server API 10:56 - Dynamic Server API 13:46 - POST data to Server API To download the full code in this video, ...
NextJS 14 - Install, Setup, Understanding Next JS 14 App Router
Просмотров 2,1 тыс.9 месяцев назад
This tutorial will step you through how to install and setup Next JS. You will learn how to use the App Router and it's basics. Full code downloads patreon.com/codrkai Time Markers 00:00 - Installing Node using Homebrew 01:55 - Create NextJS App 07:33 - App Router Layout 19:48 - My Custom App Setup 27:56 - Tips and Tricks Make sure to watch the previous video NextJS 14 - Top 5 Things To Know ru...
NextJS 14 - Top 5 Things YOU NEED To Learn
Просмотров 44510 месяцев назад
I compiled together a list of the Top 5 Things you need to learn with Next JS version 14 using the App Router. Full source code is in my Patreon patreon.com/codrkai Jump To A Topic... 0:00 - Layouts 4:37 - Grouping 9:56 - Suspense 13:33 - Parallel Routes 20:22 - Intercepting Routes Please Like this video if joining my Patreon is not possible. It will help to support this channel with future tut...
How It's Going With Creating My Business Website In NextJS | Problems and Issues
Просмотров 62210 месяцев назад
I've been hard at work creating a website that revolves around a business I'm creating, and I decided to create it using Next JS. In this video, I'll go over problems and issues I've ran into, as well as give an update on my coding, software, and 2023 Macbook Pro that I'm using for programming. beacons.ai/codrkai #coding #nextjs #webdevelopment
He Stole 41.5 MILLION So They Taught Him a Lesson
Просмотров 118Год назад
This is the story of 24 year old Aiden Pleterski from Canada, a self proclaimed Crypto King, who stole 41.5 million from investors and soon after they kidnapped and tortured him for days. For full information on this case, you can visit the site: aiden-pleterski (dot com) To support this channel with more stories like these, please Like this video and Subscribe.
How to Connect the Macbook M2 Pro to Multiple Monitors
Просмотров 37 тыс.Год назад
This is how I connected two monitors to my 2023 Macbook M2 Pro. See below for links to the adaptors and everything on my desktop. HDMI to USB-C Adaptor: amzn.to/3QPnRDK codrkai github.com/codrkai beacons.ai/codrkai iMac: 21.5 inch 2012 Fusion Macbook M2 Pro: 32GB Memory, 1TB Storage Monitor (LG 27GL850): amzn.to/44didP8 Ann Pro 2 Mechanical Keyboard: amzn.to/43lnlkF Japanese Style...
I bought the 14" Macbook M2 Pro for Coding and Video Editing, Here Are My Thoughts
Просмотров 2,1 тыс.Год назад
My thoughts on the new 14 inch Macbook M2 Pro. I am a full stack programmer and I also edit videos in 4K. Was this Macbook Pro M2 the right choice? Stay until the end of the video to hear about how I saved money on buying my Macbook M2 Pro. 14" Macbook Pro in Space Gray M2 Pro chip with 12-core CPU 32GB Memory 1TB SSD Storage codrkai github.com/codrkai beacons.ai/codrkai iMac: 21....
Reacting to ChatGPT AI Bot Making a Sales Phone Call to a Human - Air AI
Просмотров 626Год назад
Reacting to ChatGPT AI Bot Making a Sales Phone Call to a Human - Air AI
How I Would Learn Programming In 2023 If I Had To Start Over
Просмотров 357Год назад
How I Would Learn Programming In 2023 If I Had To Start Over
Installing New Keycaps on my Ann Pro 2 Mechanical Keyboard
Просмотров 175Год назад
Installing New Keycaps on my Ann Pro 2 Mechanical Keyboard
A Day in the life of a Software Engineer (not in NYC)
Просмотров 455Год назад
A Day in the life of a Software Engineer (not in NYC)
Building my first online startup (not in NYC)
Просмотров 652Год назад
Building my first online startup (not in NYC)
Coding a Astrology Horoscope App Using Next JS with Tailwaind CSS - ASMR Programming, No Talking
Просмотров 1,3 тыс.Год назад
Coding a Astrology Horoscope App Using Next JS with Tailwaind CSS - ASMR Programming, No Talking
Coding a Netflix Clone but with Movie Theater Showings - ASMR Programming, No Talking, NextJS
Просмотров 252Год назад
Coding a Netflix Clone but with Movie Theater Showings - ASMR Programming, No Talking, NextJS
Coding a Todo List Using NextJS with TailwindCSS - ASMR Programming, No Talking
Просмотров 3,3 тыс.Год назад
Coding a Todo List Using NextJS with TailwindCSS - ASMR Programming, No Talking
Building A Weather App [ASMR Programming] No Talking: Next JS, Tailwind CSS, and Mechanical Keyboard
Просмотров 1,1 тыс.Год назад
Building A Weather App [ASMR Programming] No Talking: Next JS, Tailwind CSS, and Mechanical Keyboard
React JS Tutorial [2023]: Connect to Database using MongoDB Cloud
Просмотров 15 тыс.Год назад
React JS Tutorial [2023]: Connect to Database using MongoDB Cloud
React JS Tutorial [2023]: Backend Server Setup Using NodeJS and Express
Просмотров 20 тыс.Год назад
React JS Tutorial [2023]: Backend Server Setup Using NodeJS and Express
React JS Tutorial [2023]: Create Forms Using Hooks, useState, useEffect, and Fetch
Просмотров 3,8 тыс.Год назад
React JS Tutorial [2023]: Create Forms Using Hooks, useState, useEffect, and Fetch
React JS Tutorial [2023]: How to pass data between pages - Params, Props, and Context
Просмотров 17 тыс.Год назад
React JS Tutorial [2023]: How to pass data between pages - Params, Props, and Context
React JS Tutorial [2023]: URL Page Routing, Outlet, and Layouts
Просмотров 10 тыс.Год назад
React JS Tutorial [2023]: URL Page Routing, Outlet, and Layouts
React JS Tutorial [2023]: Syntax, JSX, and What You Need To Know
Просмотров 2,2 тыс.Год назад
React JS Tutorial [2023]: Syntax, JSX, and What You Need To Know
no processing param doesn't fix double fetch. -> Why does it happen? In React 18, Strict Mode causes effects with an empty dependency array ([]) to run twice in development mode. This is a debugging feature, and it only happens in development-not in production. The second run is meant to simulate an unmount and remount cycle to catch bugs in cleanup logic.
love you bro!
I was literally working on this the whole day and Code Kai saved me at the end. I got my back-end working! Thank you :)
Great tutorial. I got it to work but I wanted to know which video precedes this with the front end code?
Most Valueable Video. Thanks to save my lot of time. I was facing issues in getting environment variable but now everything working fine ❤
Hi, your videos are easy to learn. can you make a video for "simple react app hosting in render and api sending and receiving".
It destroys useful SC of NextJS :)))
can you please do a video on setting up a form and getting the users details, authenticating their details and then submitting that info to the database, i have been watching your videos for 2 days and i am still kinda confused on how that transaction works, and by the way, i think its best to do the videos in a way where you show how to do it the production way and then show other ways, that would make it a lot easier and be great way for me to learn, follow along and finally put something out for production at the same time @Codr Kai
OMG... bro you dont know how much you just helped me, I been looking for a tutorial just like this one for over a month but everytime i search it, they show me ruined tutorials and i just click right out because its no sense to follow along if I'm not using typescript (yes tutorial tubers using typescript to show you a thing you trying to do in javascript is trash and what i call a waste of a tutorial because typescript is for me a ruined experience of real javascript ) Im about to benge watch all your videos in the middle of me building out my project, thank you for your video brother 👌👌
ok, but if its a digital product, how to deliver it to him after he pays? how do i know he paid?
Can this work with a Mac Book Air that only has USBc connection only
Realy realy helpful, i was kind of pissed off like why its not working om aws amplify, thank you very much for making this vidoe 🙏
The build settings with environment variables was the missing piece for me. I didn't see documentation for that anywhere. You saved me countless hours (and headaches).
Yes same exactly 💯
Had to do a refresher on integrating a node/express backend with react and this video explains how to implement them together very clearly. Thanks bro!
Thank you.
yea, this is the best tutorial i've seen so far. can't believe i spent hella hours trying to figure out homebrew and pip and vscode as a new mac user
i have a HDMI monitor switcher (1 monitor to multiple inputs like a PS5, Windows, Mac, etc). 1 samsung hdmi monitor (1440p 60hz) is connected to it so i can switch between my home windows PC and my work Macbook M2 Pro. i could also directly connect the hdmi monitor to the macbook's hdmi port. i have another LG monitor (1600p 60hz) directly connected to one of the usb-c ports of the macbook. both monitors work with the macbook with lid open or closed. it does need to be connected to a power source otherwise it disconnects both monitors.
thank you very much! it was straightforward which is easy to understand. thank you.
Commenting to support. Keep up the good work
Most underrated channel I've seen, tutorials are so clear and simple yet detailed. Thank you!
does the "use client" in wrapper component make the whole page not ssr friendly?
that's exactly right
lol, now main issue is how to get data from db in js file :)) u used static json array
thanks man
Is NEXT_PUBLIC_ENV working well on the client side?
Sent you a dm on instagram.
hi. can i use your method to set cookies for value of cart id?
Fetching to an outside url, in your example dummy.json/products didnt work for me :(
But doesn't it mean that the slugs are open and accessible to anyone?
I have a question what microphone do you use? Thanks!
For this video, I'm just using a lavalier mic with a windscreen on it 😊 My new videos I've been using the DJI Mic 2 and I highly recommend it.
Mil gracias
Hey, what is the difference between router handlers and api routes, and which one can i use in a next js 14 app?
This is part of the Next JS 14 tutorial series. Check out the first video which goes through all the basics 🙌
Awesome. thanks v much
Thank you so much for sharing this information, I am about to launch my website but I need this for my Merchandise. Watching all the way from Vanuatu
Great
🙌
13:57 Commenting Timestamp for notes.
I've never thought of this. Nice 🙌🙌
I really like the straightforward nature of this tutorial. Way to stay on task and show how to do the thing concisely.
Nice video but when i create my own custom api route a POST route amplify throws error 500, please how do i resolve this
Join my Patreon and download the code for no errors lol 🔥 also, figuring out bugs will make you a better programmer 🙌🙌
Same problem
u should have your own paid channel. it is that good
Glad you're loving it 👊 ps. Love your movies. Especially Inception 🙌😂
Thanks, I like your content happy coding, where can I find the previous video?
I've separated these into their own playlists with React, Next JS, Python etc. They should be in order. I tend to label everything with their respective names like React JS or Next JS. Hope it helps 🙌
I'm used to separating the BE in its own directory but have it still use the original package.json at root, here you init one inside the backend dir - is there a specific programmatic reason for doing this, or does this just keep things organized?
I actually recommend separating them in their own folders. I think I show this in the next tutorial or something lol. I have seen others do this, but I do think it's more clean to have the BE and FE in their own 🙌
@@codrkai actually i thought about it more and i'm like duh, prob nice to keep dependencies separate. Aint nobody using jquery slider on the server
Really helpfull ;) thanks
Finally what I’ve been looking for! Thanks for the wonderful info!!!
Great thanks for sharing
Awesome content as always Kai!
thanks!
This is a great video. Thanks a lot!
Thank you so much for the amazing tutorial. Could you kindly may be in a future video show us how we can use the cookies to log in the user if the cookies haven't yet expired instead of calling the sign in form client component. Again, amazing work.
I have an upcoming tutorial using next-auth. Hopefully it'll answer the sign in and expiration questions 😬👊
Idk why they don’t update the docs. But great tutorial
If you go to the NextJS website, make sure to select the "App Router" from the upper left dropdown to see the new docs 👊
I love the tutorial, can't help but feel cheated that in less than 30 minutes, you've accomplished what I couldn't in a week. Thank you, G.
We've all been there. It gets faster over time 🔥
Wonderful session! Quite a lot of take away from this session. Keep up your good work! I spent some evenings, it's worth spending that much time. Thanks. NB: There are few changes in the syntax, now and then, due to update in the versions.
I plan on making an updated tutorial soon with React 19 🙌