![Max Programming](/img/default-banner.jpg)
- 171
- 465 410
Max Programming
India
Приєднався 30 гру 2018
Welcome to Max Programming! This channel is focused on providing tutorials, tips, and tricks on web development, JavaScript, Node.js, React.js, Next.js, and TypeScript. I strive to provide useful content that can help you get the most out of these technologies and create the best possible web development projects. Subscribe to the channel to stay up to date on the latest web development trends and techniques!
How to use Drizzle ORM in Next.js App Router | Explained with project
Hello, my friends and fellow developers!
In this video, we cover how you can set up and use Drizzle ORM with Next.js App Router also utilising react server components & server actions! We understand by an example of a contact form.
Let me know in the comments below if you want more Next.js & Drizzle ORM content or something else.
Links mentioned in the video:
Drizzle Docs: orm.drizzle.team/docs/overview
Next.js Server Actions: nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
GitHub Repo: github.com/max-programming/drizzle-nextjs
reCAPTCHA v3 video: ua-cam.com/video/w-EbCTxI47o/v-deo.html
00:00 - Intro
00:15 - Project starter walkthrough
01:33 - Install Drizzle & SQLite dependencies
02:50 - Drizzle config file
04:54 - Creating a table
06:48 - Generating and running migrations
09:22 - Connecting to the DB
10:10 - Contact form server action
13:58 - Fetching responses from DB
14:59 - Use types from drizzle
15:32 - Add more responses
15:44 - Delete response server action
17:14 - Fixing error using bind method
18:18 - Test the project
18:48 - Conclusion
Other Tutorials:
⚛️ React and Material UI Todo App: bit.ly/reactmattodo
🟨 Other JavaScript videos: bit.ly/jstutorials
📘 Visual Studio Code videos: bit.ly/vscodevids
🔋 Build a Battery App in JS: ua-cam.com/video/J8_hwKSeffY/v-deo.html
Connect 🔗 :
Twitter: MaxProgramming1
Facebook: Max-Programming-103081931147293
Github: github.com/max-programming/
VS Code Theme used: Default Dark Modern
Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!
#nextjs #reactjs #programming
In this video, we cover how you can set up and use Drizzle ORM with Next.js App Router also utilising react server components & server actions! We understand by an example of a contact form.
Let me know in the comments below if you want more Next.js & Drizzle ORM content or something else.
Links mentioned in the video:
Drizzle Docs: orm.drizzle.team/docs/overview
Next.js Server Actions: nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
GitHub Repo: github.com/max-programming/drizzle-nextjs
reCAPTCHA v3 video: ua-cam.com/video/w-EbCTxI47o/v-deo.html
00:00 - Intro
00:15 - Project starter walkthrough
01:33 - Install Drizzle & SQLite dependencies
02:50 - Drizzle config file
04:54 - Creating a table
06:48 - Generating and running migrations
09:22 - Connecting to the DB
10:10 - Contact form server action
13:58 - Fetching responses from DB
14:59 - Use types from drizzle
15:32 - Add more responses
15:44 - Delete response server action
17:14 - Fixing error using bind method
18:18 - Test the project
18:48 - Conclusion
Other Tutorials:
⚛️ React and Material UI Todo App: bit.ly/reactmattodo
🟨 Other JavaScript videos: bit.ly/jstutorials
📘 Visual Studio Code videos: bit.ly/vscodevids
🔋 Build a Battery App in JS: ua-cam.com/video/J8_hwKSeffY/v-deo.html
Connect 🔗 :
Twitter: MaxProgramming1
Facebook: Max-Programming-103081931147293
Github: github.com/max-programming/
VS Code Theme used: Default Dark Modern
Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!
#nextjs #reactjs #programming
Переглядів: 699
Відео
How To Use Google reCAPTCHA v3 in Next.js 14 With Server Actions?
Переглядів 1,5 тис.28 днів тому
Hello, my friends and fellow developers! In this video, we cover how you can use Google's reCAPTCHA v3 in your Next.js 14 project and how you can use it with server actions! I also explained how it works behind the scenes and we don't use any external library for this use-case Let me know in the comments below if you want more Next.js content or something else. Links mentioned in the video: Git...
Build A Responsive Sidebar using Next.js 14, React, shadcn/ui, and Tailwind CSS
Переглядів 12 тис.5 місяців тому
Hello, my friends and fellow developers! In this video, we cover how you can build a Responsive Sidebar using Next.js 14 app router, React, shadcn/ui, and Tailwind CSS! This is the continuation of the previous video on how to build a sidebar using Next.js and shadcn/ui Previous video: ua-cam.com/video/-vD8DAEEEWE/v-deo.html Let me know in the comments below if you want more Next.js content or s...
Build A Twitter Sidebar using Next.js 14, React, shadcn/ui, and Tailwind CSS
Переглядів 9 тис.6 місяців тому
Hello, my friends and fellow developers! In this video, we cover how you can build a Twitter Sidebar using Next.js 14 app router, React, shadcn/ui, and Tailwind CSS! Let me know in the comments below if you want more Next.js content or something else. GitHub Repo: github.com/max-programming/shadcn-sidebar Next part: ua-cam.com/video/FYBC3TjRULo/v-deo.html Timestamps: 00:00 - Intro & Sidebar Dem...
Learn Search Params in Next.js 14 by building a project! React | Tailwind | shadcn/ui
Переглядів 4,7 тис.6 місяців тому
Hello, my friends and fellow developers! In this video, we cover how you can use query search params effectively in the Next.js 14 app router by building a little project! We also use Tailwind CSS, shadcn/ui, and TypeScript! Let me know in the comments below if you want more Next.js content or something else. 🔗 Links in the video Source Code: github.com/max-programming/shadcn-tabs-query Shadcn ...
You probably don't know these 5 TypeScript utility types
Переглядів 2767 місяців тому
Hello, my friends and fellow developers! In this video, we cover the top 5 rare but incredibly useful utility types in TypeScript! Let me know in the comments below if you want more TypeScript content or something else. TypeScript Utility types docs: www.typescriptlang.org/docs/handbook/utility-types.html Timestamps: 0:00 - Introduction 0:43 - Parameters 1:44 - ReturnType 2:25 - Awaited 3:06 - ...
All you need to know about Hacktoberfest 2023 | No T-Shirt 😱 ?
Переглядів 5 тис.11 місяців тому
Hello, my friends and fellow developers! In this video, we cover how you can participate in Hacktoberfest and contribute to open source! We will get into the details of Hacktoberfest and what is different this time... Let me know in the comments below if you want more open-source content or something else. Hacktoberfest is DigitalOcean’s annual event that encourages people to contribute to open...
How to use Credentials Authentication in Next.js with NextAuth?
Переглядів 16 тис.Рік тому
How to use Credentials Authentication in Next.js with NextAuth?
Adding Todos - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Переглядів 726Рік тому
Adding Todos - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Learn How to Use Local Storage in React With an Easy-to-Understand Example
Переглядів 4,3 тис.Рік тому
Learn How to Use Local Storage in React With an Easy-to-Understand Example
The Coolest VS Code Cursor Effect You Don't Want to Miss!
Переглядів 3,4 тис.Рік тому
The Coolest VS Code Cursor Effect You Don't Want to Miss!
Home Page Build - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Переглядів 842Рік тому
Home Page Build - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Demo & Setup - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Переглядів 1,2 тис.Рік тому
Demo & Setup - Build a Full CRUD Todo App with Tailwind CSS, JavaScript and Local Storage
Animations with HTML, CSS and LottieFiles - You Won't Believe How EASY it is!
Переглядів 9 тис.Рік тому
Animations with HTML, CSS and LottieFiles - You Won't Believe How EASY it is!
How to build a Contact Form in Node.js and Google Sheets?
Переглядів 6 тис.Рік тому
How to build a Contact Form in Node.js and Google Sheets?
Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks
Переглядів 9 тис.Рік тому
Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks
Learn how to use TypeScript with Node and Express - updated for 2023
Переглядів 879Рік тому
Learn how to use TypeScript with Node and Express - updated for 2023
Master Generics with TypeScript: A Easy-to-Understand Example
Переглядів 142Рік тому
Master Generics with TypeScript: A Easy-to-Understand Example
How to set up your own website analytics with Umami? | Open Source | Self Hosted
Переглядів 3 тис.2 роки тому
How to set up your own website analytics with Umami? | Open Source | Self Hosted
How to use Mongoose with Next.js for MongoDB | Explained with simple project
Переглядів 29 тис.2 роки тому
How to use Mongoose with Next.js for MongoDB | Explained with simple project
Sort imports using Prettier in a JavaScript Project inside VS Code!
Переглядів 4,1 тис.2 роки тому
Sort imports using Prettier in a JavaScript Project inside VS Code!
How to convert a normal React form to use React Hook Form
Переглядів 3082 роки тому
How to convert a normal React form to use React Hook Form
How to build a Random Quote Generator | Part 1 - The Design
Переглядів 2982 роки тому
How to build a Random Quote Generator | Part 1 - The Design
How to make pull request for Hacktoberfest 2021 on GitHub | Open Source | Hacktoberfest
Переглядів 1,3 тис.2 роки тому
How to make pull request for Hacktoberfest 2021 on GitHub | Open Source | Hacktoberfest
What is Hacktoberfest 2021 and how to participate?
Переглядів 7442 роки тому
What is Hacktoberfest 2021 and how to participate?
Build & Deploy a Number Fact Discord Bot using Node.js and Heroku | Node.js | Rapid API
Переглядів 2,1 тис.2 роки тому
Build & Deploy a Number Fact Discord Bot using Node.js and Heroku | Node.js | Rapid API
How to make a Next.js app a PWA with offline support | Progressive Web App
Переглядів 16 тис.3 роки тому
How to make a Next.js app a PWA with offline support | Progressive Web App
Build & Deploy a YouTube thumbnail fetcher app with React & TypeScript Part 2 | Vite | Tailwind CSS
Переглядів 6823 роки тому
Build & Deploy a UA-cam thumbnail fetcher app with React & TypeScript Part 2 | Vite | Tailwind CSS
Build & Deploy a YouTube thumbnail fetcher app with React & TypeScript Part 1 | Vite | Tailwind CSS
Переглядів 8993 роки тому
Build & Deploy a UA-cam thumbnail fetcher app with React & TypeScript Part 1 | Vite | Tailwind CSS
Doesn't this script connection block the main thread?
I don't think they necessarilty block the main thread but they're the first priority. And this script we're adding should load before the page hence we added the `beforeInteractive` strategy nextjs.org/docs/app/api-reference/components/script#beforeinteractive
Nicely done and well explained brother I've built it in my app! I would love to see prisma & providers & credentials with Next-Auth. Here's a challenge for you 🤝🤝
@@mickeykadimov7128 Thanks for the idea. I do have a video on next auth and credentials provider but that was with pages router. Maybe I'll make an updated one for app router ua-cam.com/video/fqXC2V-MSV4/v-deo.html
a comment just to support ur great work <3
Thanks for the video👌I was able to setup Drizzle ORM in my Next JS project. Drizzle has 2 methods to connect to MySQL. 1. single client connection (await mysql.createConnection) 2. pool (mysql.createPool) I was unable to use single client connection method due to the error "await is only valid in async functions and the top level bodies of modules". So I couldn't use "await mysql.createConnection" method in index.ts file. what worked for me is pool method (mysql.createPool) in index.ts
Here's a solution if you want to use createConnection: 1̶. I̶n̶ y̶o̶u̶r̶ t̶s̶c̶o̶n̶f̶i̶g̶.j̶s̶o̶n̶, s̶e̶t̶ "t̶a̶r̶g̶e̶t̶" t̶o̶ "e̶s̶2̶0̶1̶7̶", "m̶o̶d̶u̶l̶e̶" t̶o̶ "e̶s̶n̶e̶x̶t̶" a̶n̶d̶ "a̶l̶l̶o̶w̶I̶m̶p̶o̶r̶t̶i̶n̶g̶T̶s̶E̶x̶t̶e̶n̶s̶i̶o̶n̶s̶" t̶o̶ t̶r̶u̶e̶ 2̶. R̶e̶n̶a̶m̶e̶ "i̶n̶d̶e̶x̶.t̶s̶" t̶o̶ "d̶b̶.m̶t̶s̶" 3̶. W̶h̶e̶r̶e̶v̶e̶r̶ y̶o̶u̶ h̶a̶v̶e̶ i̶m̶p̶o̶r̶t̶ {̶ d̶b̶ }̶ f̶r̶o̶m̶ "@̶/d̶b̶", m̶a̶k̶e̶ t̶h̶a̶t̶ i̶m̶p̶o̶r̶t̶ {̶ d̶b̶ }̶ f̶r̶o̶m̶ "@̶/d̶b̶/d̶b̶.m̶t̶s̶" M̶T̶S̶ (̶E̶S̶ M̶o̶d̶u̶l̶e̶ T̶S̶)̶ f̶i̶l̶e̶s̶ c̶a̶n̶ u̶s̶e̶ t̶o̶p̶-̶l̶e̶v̶e̶l̶ a̶w̶a̶i̶t̶ a̶n̶d̶ w̶e̶ s̶i̶m̶p̶l̶y̶ c̶h̶a̶n̶g̶e̶ o̶u̶r̶ T̶S̶ f̶i̶l̶e̶ t̶o̶ a̶n̶ M̶T̶S̶ f̶i̶l̶e̶ 1. In your tsconfig.json, set "target" to "es2017" and "module" to "esnext" 2. Make sure the Next.js version is higher than 13.4.5 3. Restart the dev server, if it errors out, delete the .next folder and then restart the dev server
@@MaxProgramming thanks so much for the solution. I did exactly as you said, but getting this error Build Error Failed to compile Module parse failed: Unexpected token (3:73) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. again thanks so much for your time bro!
@@uniwebr Can you restart your server once? And does your nextjs config have anything extra like webpack config?
@@uniwebr I updated the above solution. No need to use any MTS files as Next.js already supports top-level await
@@MaxProgramming thanks for the response! I did exactly as your updated solution, and deleted the .next folder, restarted VSCode, restarted dev server but I'm getting the following error Unhandled Runtime Error Error: await is only valid in async functions and the top level bodies of modules thanks for your time bro, I'm trying to find a solution to this. If I find a solution, I will add a comment here.
Easy, to the point tutorial with a standarized implementation. Loved it :)
Make this into an extension
Maybe VS Code Extension API doesn't allow so much... That's why you need to add a manual css file in VS Code
Excellent guide - thank you. This approach really helped to roll-in Recaptcha as a supportive utility within form submissions processes through server actions.
Yea server actions are definitely a big advantage for this approach
Thanks so much. Do you have a more in depth vid of offline support with next js ? Or even documentation would help.
@@user-hc7og6ej4k With the app router I don't have a video. But I'll make one soon. Thanks for the idea ✌️
Well Explained, usman!
Instructive video, you explain very well, thanks
Big up bro😊. Abdulrafiu here 😊
This was great! Very concise and easy to follow along with.
looks easy with your tutorial, thanks...
Glad it was helpful!
It's the biggest hack like let suppose you miss this thing instead use this one but concept is empty for this one.
Can you clarify what you mean by "concept was empty" and what you think is wrong with the video?
Thank you
👍🏻
👍🏻
You missed a semicolon
@@boriskoslowski7176 I left it for prettier 😉
Thanks buddy. I missed it in my search api.😂 Will patch it😂
Buddy you still working??🔥
@pranupranav5563 Takes just a second to acknowledge the comment. Thanks for commenting 🙂
Nice, straight forward explanation 👍🏼
thanks man.. it works
Thanks a lot lot. Great content and code
Nice explanations! Easy to understand Thank you😆
Did anyone experience layout shifts and scroll issues when implementing this? When I use it to switch tabs on my settings page and let's say I scrolled b4 searchParams finished updating, It causes my layout UI to shift and and hides the top part of the layout. I think it's related more to the tabs components maybe tho....
You're right. The layout shift does happen when navigating from one tab to another. I guess that happens because the page gets re-rendered (as we navigate with Link component to modify the search params) Not sure what could possibly be the solution. But if I find one, I'll reply Thanks for pointing this out!
Hey, Can you tell me the extension name that adds vertical color to the opening and closing tags?
@@dragos.cojocaru It's called Indent Rainbow. And there are more palettes in other extension called "Indent Rainbow Palettes"
@@MaxProgramming thanks
how to integrate with teams?
It's very similar to discord and there are a few minor changes... learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook?tabs=newteams%2Cjavascript
Why didn't you use TailwindCss to make the SidebarDesktop responsive: className="hidden sm:block" ?
There was a particular reason I don't remember now. Maybe you try making it work without that hook
You are the Man! Thanks!
Just found your channel. You explain things so well, really! Kudos. I'll watch your other videos. I subscribe to this. Thank you.
@@Mary-k2p Thank you for your kind words
@@MaxProgramming You're welcome. Please don't stop making videos like this; explaining concepts practically.
The video i was searching for that.
thanks. been racking my brain for 2 days about convenient way to implement this
Amazing video! thank you!
Very nice tutorial with clean and professional presentation. Keep up the good work. Thank you.
Short and sweet. Love it.
thanks
great vid
Can I have your VS code setting.json file. Looks amazing
Hey Biniyam! I'm glad you liked the VS Code setup. I'm afraid I can't share the entire settings.json file as there's a ton of useless/old settings there so it's huge and mostly filled with useless settings. But feel free to ask for any settings and I'll help you out with that
Sorry for the bad audio quality on this one. For some reason, OBS Studio did not pick up my microphone and I did not realise that this entire stream
Thanks for the great video! Your explanation was super clear and really helped me. Looking forward to more content like this! 🙌
Great video ! Which font do you use ?
It's called Monaspace
Can you please use shadcn Command component for search, its awesome but commandlist / dropdown pushes other objects down on the page .. i dont know how to avoid that.
I'll investigate what you're facing and possibly make a video on it
Top quality video, informative and succinct!
nice
quality code practice - I learned a lot - thank you.
A pesar de la diferencia de idioma se entiende muy bien, muchas gracias
Gracias por sus amables palabras. Me alegro que sea fácil de entender.
Hey buddy could u help me lol Brillant video Very understanding
Yeah. What help are you looking for?
@@MaxProgramming let me explain. i have a website and discord and would like to receive notifications when a customer buy some think from my website or click the BUY button is that possible to make a simple webhook please but i dont know how?
@@UnitedCodManServices A webhook is a simple Rest API URL where you can send a POST request to call it. In the video, I mentioned how I did it for my website, you can do it similarly for yours 🙂
Thank you brother 🫡🙇
What if I want a notification that says copied once I have clicked the copy icon
There are different ways to show a notification. You can show a toast message with react-hot-toast or some popover etc. It's as simple as writing the code for showing the notification right after the copy() function
@@MaxProgramming thank you. This helped. I used the react toast
Very useful video, thank you for taking the time to make it.
👏👏👏