Codr Kai
Codr Kai
  • Видео 59
  • Просмотров 368 945
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
Просмотров: 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

Комментарии

  • @jarnolaitinen9989
    @jarnolaitinen9989 2 часа назад

    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.

  • @036kaushik9
    @036kaushik9 2 дня назад

    love you bro!

  • @thebenblue20
    @thebenblue20 5 дней назад

    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 :)

  • @bruceleeroy8302
    @bruceleeroy8302 8 дней назад

    Great tutorial. I got it to work but I wanted to know which video precedes this with the front end code?

  • @forall7586
    @forall7586 11 дней назад

    Most Valueable Video. Thanks to save my lot of time. I was facing issues in getting environment variable but now everything working fine ❤

  • @suriya_619
    @suriya_619 13 дней назад

    Hi, your videos are easy to learn. can you make a video for "simple react app hosting in render and api sending and receiving".

  • @santd3400
    @santd3400 14 дней назад

    It destroys useful SC of NextJS :)))

  • @antwarior
    @antwarior 24 дня назад

    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

  • @antwarior
    @antwarior 27 дней назад

    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 👌👌

  • @JapaneseWithoutKanji
    @JapaneseWithoutKanji Месяц назад

    ok, but if its a digital product, how to deliver it to him after he pays? how do i know he paid?

  • @TangieBeaty
    @TangieBeaty Месяц назад

    Can this work with a Mac Book Air that only has USBc connection only

  • @utkarshseth3082
    @utkarshseth3082 Месяц назад

    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 🙏

  • @farid9323
    @farid9323 Месяц назад

    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).

  • @floydizzle
    @floydizzle Месяц назад

    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!

  • @John-wx3zn
    @John-wx3zn Месяц назад

    Thank you.

  • @johnasigbekye3028
    @johnasigbekye3028 2 месяца назад

    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

  • @aaronalquiza9680
    @aaronalquiza9680 2 месяца назад

    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.

  • @User-wp8sh
    @User-wp8sh 2 месяца назад

    thank you very much! it was straightforward which is easy to understand. thank you.

  • @piyush9912
    @piyush9912 2 месяца назад

    Commenting to support. Keep up the good work

  • @liamkelly4893
    @liamkelly4893 3 месяца назад

    Most underrated channel I've seen, tutorials are so clear and simple yet detailed. Thank you!

  • @redzninja8749
    @redzninja8749 3 месяца назад

    does the "use client" in wrapper component make the whole page not ssr friendly?

  • @farzad5128
    @farzad5128 3 месяца назад

    lol, now main issue is how to get data from db in js file :)) u used static json array

  • @game_space111
    @game_space111 3 месяца назад

    thanks man

  • @putujojo1968
    @putujojo1968 3 месяца назад

    Is NEXT_PUBLIC_ENV working well on the client side?

  • @fantasyacesofficial
    @fantasyacesofficial 3 месяца назад

    Sent you a dm on instagram.

  • @melkhywong7594
    @melkhywong7594 3 месяца назад

    hi. can i use your method to set cookies for value of cart id?

  • @irule10338
    @irule10338 4 месяца назад

    Fetching to an outside url, in your example dummy.json/products didnt work for me :(

  • @ashwinmanghat4416
    @ashwinmanghat4416 4 месяца назад

    But doesn't it mean that the slugs are open and accessible to anyone?

  • @em.naturalnie
    @em.naturalnie 4 месяца назад

    I have a question what microphone do you use? Thanks!

    • @codrkai
      @codrkai 4 месяца назад

      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.

  • @sian4d
    @sian4d 4 месяца назад

    Mil gracias

  • @AndresMartinez-se9zl
    @AndresMartinez-se9zl 4 месяца назад

    Hey, what is the difference between router handlers and api routes, and which one can i use in a next js 14 app?

    • @codrkai
      @codrkai 4 месяца назад

      This is part of the Next JS 14 tutorial series. Check out the first video which goes through all the basics 🙌

  • @christophernolan8761
    @christophernolan8761 4 месяца назад

    Awesome. thanks v much

  • @jr.rasentertainment4074
    @jr.rasentertainment4074 4 месяца назад

    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

  • @prashlovessamosa
    @prashlovessamosa 4 месяца назад

    Great

  • @sp_watersweep
    @sp_watersweep 4 месяца назад

    13:57 Commenting Timestamp for notes.

    • @codrkai
      @codrkai 4 месяца назад

      I've never thought of this. Nice 🙌🙌

  • @BrendonGruis
    @BrendonGruis 4 месяца назад

    I really like the straightforward nature of this tutorial. Way to stay on task and show how to do the thing concisely.

  • @0thi123
    @0thi123 4 месяца назад

    Nice video but when i create my own custom api route a POST route amplify throws error 500, please how do i resolve this

    • @codrkai
      @codrkai 4 месяца назад

      Join my Patreon and download the code for no errors lol 🔥 also, figuring out bugs will make you a better programmer 🙌🙌

    • @jacksonroger
      @jacksonroger 24 дня назад

      Same problem

  • @christophernolan8761
    @christophernolan8761 5 месяцев назад

    u should have your own paid channel. it is that good

    • @codrkai
      @codrkai 5 месяцев назад

      Glad you're loving it 👊 ps. Love your movies. Especially Inception 🙌😂

  • @Tomatechs558
    @Tomatechs558 5 месяцев назад

    Thanks, I like your content happy coding, where can I find the previous video?

    • @codrkai
      @codrkai 4 месяца назад

      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 🙌

  • @lunchboxUFX
    @lunchboxUFX 5 месяцев назад

    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?

    • @codrkai
      @codrkai 4 месяца назад

      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 🙌

    • @lunchboxUFX
      @lunchboxUFX 4 месяца назад

      ​@@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

  • @Jo-xt5eq
    @Jo-xt5eq 5 месяцев назад

    Really helpfull ;) thanks

  • @EasyLiss
    @EasyLiss 5 месяцев назад

    Finally what I’ve been looking for! Thanks for the wonderful info!!!

  • @prashlovessamosa
    @prashlovessamosa 5 месяцев назад

    Great thanks for sharing

  • @cheftimbob
    @cheftimbob 6 месяцев назад

    Awesome content as always Kai!

  • @chuuuuuuuuucu
    @chuuuuuuuuucu 6 месяцев назад

    thanks!

  • @eliasshemsu5853
    @eliasshemsu5853 6 месяцев назад

    This is a great video. Thanks a lot!

  • @dreadnaught9226
    @dreadnaught9226 6 месяцев назад

    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.

    • @codrkai
      @codrkai 6 месяцев назад

      I have an upcoming tutorial using next-auth. Hopefully it'll answer the sign in and expiration questions 😬👊

  • @froote
    @froote 6 месяцев назад

    Idk why they don’t update the docs. But great tutorial

    • @codrkai
      @codrkai 6 месяцев назад

      If you go to the NextJS website, make sure to select the "App Router" from the upper left dropdown to see the new docs 👊

  • @dreadnaught9226
    @dreadnaught9226 6 месяцев назад

    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.

    • @codrkai
      @codrkai 6 месяцев назад

      We've all been there. It gets faster over time 🔥

  • @rajithprabhakaran
    @rajithprabhakaran 6 месяцев назад

    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.

    • @codrkai
      @codrkai 6 месяцев назад

      I plan on making an updated tutorial soon with React 19 🙌