- 67
- 71 477
Coding Jitsu
United States
Приєднався 17 вер 2020
Welcome to Coding Jitsu!
Thank you for visiting! Here, My mission is to demystify Web Development for beginners. Drawing from my own journey and experiences, I aim to simplify complex concepts and make learning accessible to all. Having benefitted from numerous UA-cam Channels, I am excited to contribute to the community by sharing my insights and expertise gained from years of work in the field.
Understanding that everyone learns differently, I offer my unique approach to teaching full-stack web development. Join me as we embark on this educational journey together. Your support means the world to me. Thank you for being a part of our community!
Thank you for visiting! Here, My mission is to demystify Web Development for beginners. Drawing from my own journey and experiences, I aim to simplify complex concepts and make learning accessible to all. Having benefitted from numerous UA-cam Channels, I am excited to contribute to the community by sharing my insights and expertise gained from years of work in the field.
Understanding that everyone learns differently, I offer my unique approach to teaching full-stack web development. Join me as we embark on this educational journey together. Your support means the world to me. Thank you for being a part of our community!
Next.js Email Widget Refactor: Loading State & Custom Validation with Zod Explained
Welcome to Coding Jitsu Channel! 🎉
In this video, I’m refactoring the email collection widget I built in my previous tutorial on creating a full-stack blog app with Next.js, MDX, and a PostgreSQL database. 🚀
In this refactor, I’ll tackle two key issues:
1️⃣ Add a loading state with useFormStatus hook to prevent spam submissions and improve user experience.
2️⃣ Implement custom email validation using Zod to ensure only valid emails are stored in the database.
By the end of this video, you’ll learn how to make your forms more secure and production-ready!
📺 Previous Tutorial (Full-Stack Blog App): ua-cam.com/video/htgktwXYw6g/v-deo.html
🔗 Code Repository: github.com/w3tsadev/next-blog
📝 Helpful Links:
- Zod Documentation: zod.dev/
- Next.js Server Actions Guide: nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
💬 Let’s Connect:
Have questions or ideas for the next tutorial? Drop them in the comments below! 👇
👍 Don’t forget to like, subscribe, and turn on notifications for more hands-on coding tutorials! Happy coding! 👨💻✨
#Zod #typescript #nextjs #coding
Reach out to me:
Twitter: w3tsadev
🎥 Other Videos to Watch:
Comprehensive Next.js Full Tutorial - ua-cam.com/play/PLI2MfgGPNO71XkjxnkLxLRDHMVBWkG5M3.html
In this video, I’m refactoring the email collection widget I built in my previous tutorial on creating a full-stack blog app with Next.js, MDX, and a PostgreSQL database. 🚀
In this refactor, I’ll tackle two key issues:
1️⃣ Add a loading state with useFormStatus hook to prevent spam submissions and improve user experience.
2️⃣ Implement custom email validation using Zod to ensure only valid emails are stored in the database.
By the end of this video, you’ll learn how to make your forms more secure and production-ready!
📺 Previous Tutorial (Full-Stack Blog App): ua-cam.com/video/htgktwXYw6g/v-deo.html
🔗 Code Repository: github.com/w3tsadev/next-blog
📝 Helpful Links:
- Zod Documentation: zod.dev/
- Next.js Server Actions Guide: nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
💬 Let’s Connect:
Have questions or ideas for the next tutorial? Drop them in the comments below! 👇
👍 Don’t forget to like, subscribe, and turn on notifications for more hands-on coding tutorials! Happy coding! 👨💻✨
#Zod #typescript #nextjs #coding
Reach out to me:
Twitter: w3tsadev
🎥 Other Videos to Watch:
Comprehensive Next.js Full Tutorial - ua-cam.com/play/PLI2MfgGPNO71XkjxnkLxLRDHMVBWkG5M3.html
Переглядів: 11
Відео
Building Next.js Ecommerce Store with TypeScript, Tailwindcss, headlessui, and Shopify CMS.
Переглядів 4,8 тис.Місяць тому
🎉 Welcome to the comprehensive Ecommerce store Project! 🚀 In this comprehensive tutorial, you'll learn how to build a high-performance, server-rendered Next.js App Router ecommerce application using Shopify as a headless CMS! . This template uses React Server Components, Server Actions, Suspense, useOptimistic, and more. I'll guide you step by step through the process of setting up your storefr...
Building Next.js Fullstack Blog with TypeScript, Shadcn/ui, MDX, Prisma and Vercel Postgres.
Переглядів 18 тис.4 місяці тому
🎉 Welcome to my comprehensive MDX Blog Site Project! 🚀 In this video, I’ll walk you through my feature-rich blog site that’s built to offer an exceptional experience for both bloggers and readers. Here’s what you can expect: 📝 Key Features: - MDX and Markdown Support: Enjoy the flexibility of writing your blog posts in MDX and Markdown, combining the best of both worlds with easy formatting and...
Mastering Next.js 14: Adding Metadata | Part Sixteen #nextjs14
Переглядів 4146 місяців тому
In this chapter Here are the topics we’ll cover: ℹ What metadata is. 📦 Types of metadata. 🌁 How to add an Open Graph image using metadata. ⚛ How to add a favicon using metadata. Part One: ua-cam.com/video/V3oueSSuG0A/v-deo.html Part Two: ua-cam.com/video/jNO9HiiXyJM/v-deo.html Part Three: ua-cam.com/video/Aw7rvumF4wI/v-deo.html Part Four: ua-cam.com/video/8nber0ktwN4/v-deo.html Part Five: ua-ca...
Mastering Next.js 14: Adding Authentication | Part Fifteen #nextjs14
Переглядів 4806 місяців тому
In this chapter Here are the topics we’ll cover: ✓ What is authentication. ䷗ How to add authentication to your app using NextAuth.js. 🎯 How to use Middleware to redirect users and protect your routes. ⚛ How to use React's useFormStatus and useFormState to handle pending states and form errors. Part One: ua-cam.com/video/V3oueSSuG0A/v-deo.html Part Two: ua-cam.com/video/jNO9HiiXyJM/v-deo.html Pa...
Mastering Next.js 14: Form validation with Zod & useFormState | Part Fourteen #nextjs14
Переглядів 2 тис.6 місяців тому
In this chapter Here are the topics we’ll cover: 📄 How to implement server-side form validation. ⚛ How to use the React useFormState hook to handle form errors, and display them to the user. Part One: ua-cam.com/video/V3oueSSuG0A/v-deo.html Part Two: ua-cam.com/video/jNO9HiiXyJM/v-deo.html Part Three: ua-cam.com/video/Aw7rvumF4wI/v-deo.html Part Four: ua-cam.com/video/8nber0ktwN4/v-deo.html Par...
Mastering Next.js 14: Handling Error | Part Thirteen
Переглядів 5927 місяців тому
Mastering Next.js 14: Handling Error | Part Thirteen
Mastering Next.js 14: Mutating Data with Server Actions | Part Twelve
Переглядів 2257 місяців тому
Mastering Next.js 14: Mutating Data with Server Actions | Part Twelve
Mastering Next.js 14: Mutating Data with Server Actions | Part Eleven
Переглядів 2397 місяців тому
Mastering Next.js 14: Mutating Data with Server Actions | Part Eleven
Mastering Next.js 14: Mutating Data with Server Actions | Part Ten
Переглядів 4537 місяців тому
Mastering Next.js 14: Mutating Data with Server Actions | Part Ten
Mastering Next.js 14: Adding Search and Pagination | Part Nine
Переглядів 2,9 тис.8 місяців тому
Mastering Next.js 14: Adding Search and Pagination | Part Nine
Mastering Next.js 14: Static and Dynamic Rendering with Streaming | Part Eight
Переглядів 3838 місяців тому
Mastering Next.js 14: Static and Dynamic Rendering with Streaming | Part Eight
Mastering Next.js 14: Fetching Data| Part Seven
Переглядів 4868 місяців тому
Mastering Next.js 14: Fetching Data| Part Seven
Mastering Next.js 14: Setting Up Your Database | Part Six
Переглядів 9348 місяців тому
Mastering Next.js 14: Setting Up Your Database | Part Six
Mastering Next.js 14: Navigating Between Pages | Part Five
Переглядів 4718 місяців тому
Mastering Next.js 14: Navigating Between Pages | Part Five
Mastering Next.js 14: Creating Layouts and Pages | Part Four
Переглядів 7538 місяців тому
Mastering Next.js 14: Creating Layouts and Pages | Part Four
Mastering Next.js 14: Optimizing Fonts and Images | Part Three
Переглядів 8308 місяців тому
Mastering Next.js 14: Optimizing Fonts and Images | Part Three
Mastering Next.js 14: CSS Styling | Part Two
Переглядів 5608 місяців тому
Mastering Next.js 14: CSS Styling | Part Two
Mastering Next.js 14: From Basics to Advanced Techniques | Part One
Переглядів 1,6 тис.8 місяців тому
Mastering Next.js 14: From Basics to Advanced Techniques | Part One
ASMR Programming | Beautiful Text scroll and hover effect with GSAP and clip-path | No Talking
Переглядів 458Рік тому
ASMR Programming | Beautiful Text scroll and hover effect with GSAP and clip-path | No Talking
Node & Express Application Starter Template with TypeScript | Tutorial
Переглядів 2,3 тис.Рік тому
Node & Express Application Starter Template with TypeScript | Tutorial
Intro to TypeScript for New Programmers | TypeScript with React Tutorial #typescript #reactjs
Переглядів 945Рік тому
Intro to TypeScript for New Programmers | TypeScript with React Tutorial #typescript #reactjs
ASMR Programming | Beautiful Text Scroll Effect with Gsap and Lenis | No Talking
Переглядів 160Рік тому
ASMR Programming | Beautiful Text Scroll Effect with Gsap and Lenis | No Talking
ASMR Programming | Expanding Flex Card in HTML, CSS, and JavaScript No Talking
Переглядів 201Рік тому
ASMR Programming | Expanding Flex Card in HTML, CSS, and JavaScript No Talking
ASMR Programming | Typewriter Text Effect with Only CSS No Talking #asmr
Переглядів 78Рік тому
ASMR Programming | Typewriter Text Effect with Only CSS No Talking #asmr
Avoid These Common React.js Beginner Mistakes!
Переглядів 56Рік тому
Avoid These Common React.js Beginner Mistakes!
VSCode Keyboard Shortcuts that will Boost your Productivity 150%
Переглядів 127Рік тому
VSCode Keyboard Shortcuts that will Boost your Productivity 150%
Command Line Crash Course For Beginners | Terminal Commands
Переглядів 60Рік тому
Command Line Crash Course For Beginners | Terminal Commands
Building a beautiful Kanban board with Node JS, React, and Websockets #nodejs #reactjs #websocket
Переглядів 8 тис.Рік тому
Building a beautiful Kanban board with Node JS, React, and Websockets #nodejs #reactjs #websocket
React Router Dom Version 6 Crash Course | 2022 #reactJS #reactrouterdom #v6
Переглядів 4542 роки тому
React Router Dom Version 6 Crash Course | 2022 #reactJS #reactrouterdom #v6
Can you please teach us Router v7 as a framework approach.
Hey, I never worked with remix(Router v7), but I will definitely look into it. Do you want a beginner friendly foundational video?
@codingjitsu great 👍
Congratulations for finishing your project! I really love it!!!!!
Thank you so much!!
thanks for the content. definitely will try to build this one. but the keyboard sound is annoyingly loud.
Best tutorial about Shopify and Next.js in UA-cam so far 👏🏻
thanks!
@@codingjitsu Is there any particular reason to not to use the shopifyClient like the docs say?
@@cristiancoppari Not familiar with the shopifyClient, can you share the resource?
Great Job! Thanks!
Thanks for watching!
Do it for woocommerce 🙏
I like this tutorial very much, btw, what is this extension to give the tip that your function is not defined ( in 4:01:15)
marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja
I've been looking for a video like this for a while. It is awesome. please keep go on
Thanks, will do!
I have been getting 500 error "Error: {"cause":"TypeError: Invalid URL","status":500,"message":"Failed to parse URL from /api/2024-07/graphql.json",
Your URL is missing the Shopify Domain.
Awesome video! Will be using this to help build my next project. Thank you
Glad it was helpful!
bro im facing this error did you know how to solve it? Application error: a server-side exception has occurred (see the server logs for more information). Digest: 714012848
Hey, amazing tutorial! However, I'm unable to see new products in 'All Products' after adding them, and changes made to existing products aren’t reflecting. Could you help with this?
Check your webhooks and make sure to change the "Sort By" to "Latest arrivals" after adding new products.
Figure out how to implement revalidation in getProduct and getCollection to enable ISR (Incremental Static Regeneration) , thanks.
I've been a shopify developer for a while and this project just blows anything I've done . Congrats 👏
Thank you!
One thing I find fascinating about this tutorial is that you seemingly just keep on writing code without checking if it actually works? Or do you see that it works in another screen? I mean I could never write code like that, I'd check for feedback with console.log or something every step.
That's a great question! It's true that in edited tutorials, it might seem like the code flows seamlessly without any hiccups. However, in reality, there's a lot of trial and error involved, just like in any real-world coding project
Perfect video
Thanks
is this free using shopify?
yes.
How it is free?
@@ganieldago you can use shopify partner program to build and test website, no CC needed, also the code here is open sourced and free.
hey I have compeleted most of the part I have learnt graphql from net ninja thanks for making this very helpful as you said when we expect the second part.
That's fantastic to hear! I'm glad the Net Ninja's GraphQL course has been helpful. Regarding a potential Part II, I'm still considering it. However, I also believe that the true power of learning comes from hands-on experience and experimentation. I encourage you to add your own functionalities and share your projects. I'm excited to see what you'll create with this knowledge!
@@codingjitsu got it thanks for replying I am still rookie I just try to learn the process of people building apps try to implement in my projects. Please keep bringing good stuff. Thank you
Just what I was looking for. Thank you 👑
You’re welcome 😊
Welcome Back Bro ! i've never used Shopify before but looks interesting
Thanks subscribed
Thanks for the sub!
Hey bro. Is it possible to add mdx in some database and change it by cms
Yes, Database-Based Approach: Store MDX as Text: Save the MDX content as plain text within a database field (e.g., a TEXT or LONGTEXT column in MySQL or PostgreSQL). CMS Integration: Use a CMS with database connectivity to create, edit, and manage MDX content directly within the CMS interface.
@@codingjitsu would that be feasible compared to remote mdx content file fron github . I looked at this too. But i dont know what should i use
@@corpsedad7368 They both have their benefits. It's up to you what you want to use.
Hey can you tell me what font you using on vscode ? btw the video helped me thank you 💖
Font: operator mono lig
@@codingjitsu thank you
Think it would be nice to integrate the customer Shopify account access in the frontend with the customer API.
That would be in Part II
When we can expect the second part@@codingjitsu
nice UI
whats prerquisite for this I dont know graphql do I have to learn graphql first
Having a basic understanding of GraphQL would definitely help, but you can use these queries as template and go from there.
@@codingjitsu got it thanks
I thought u say dotenv😂
Thanks.
You're welcome
Thanks and love you so much bro❤ 🤗🫂
Most welcome 😊
hi bro your content is super i want to connect with you for collebration
definitely more project videos
Thanks for your patience, new video is dropping at midnight EST
2 months 😢 nothing uploaded
Thanks for your patience, new video is dropping at midnight EST.
We currently store Markdown files in the 'contents' folder. However, if we're publishing new articles daily, this folder may become unwieldy over time. While this approach works well for infrequently updated documentation, is it suitable for frequent content creation? Should we instead consider implementing a content management system (CMS) like Sanity for more efficient handling of regularly published articles?
CMS is definitely a valid alternative.
I'm currently working on the app and wanted to ask a few questions about adding some dynamic features. Specifically, I’m interested in implementing the following: 1. **Comments**: I'd like to add a feature where users can leave comments. Could you guide me on the best way to approach this from both the front-end and back-end? 2. **Users**: I want to include user authentication and profiles. What are the best practices for managing user registration, login, and profile data securely? 3. **User Dashboard**: I would also like to create a user dashboard where users can see their information and possibly interact with their own data. What technologies or frameworks would you recommend for this feature? I’d appreciate any guidance or resources you can provide to help me add these dynamic features .
Definitely idea for the next video.
there is no backend or admin panel! Would you mind mentioning why it's a Fullstack? Won't we are creating MDX file statically or locally or by github, but at the end isn't it static?
Круто
Bro could you please bring part 2 of it where you can implement a functionality to add multiple images in blog page as code pallet?
I will try to create another short video for this.
@@codingjitsu Thank you
Nice bro
Thanks!
Sadly it does not have many crucial bloggin features. Blog without ➡Search, ➡comment, ➡login, is like chicken curry without salt.
Feel free to clone down the project and add the features you need. Here is an example for Search implementation in Next.js 14: ua-cam.com/video/BiDg-kx04J8/v-deo.html
why swr? i don't understand? cant we just fetch in server components?
Server components excel at delivering pre-rendered content for optimal initial page load performance. SWR, on the other hand, is particularly effective for managing client-side data fetching and caching, offering a dynamic user experience. By strategically combining both approaches, we can create applications that deliver exceptional performance and user satisfaction.
@@codingjitsu yes but this doesnt explain why you chose it
but how we add more blogs in website?
By adding your markdown files in the project itself(in the contents folder) checkout: 13:00 - MDX Contents. Remember this is directed towards technical bloggers, this is similar how Supabase maintains their documentation within github.
@@codingjitsu Thanks understood! But doesn't it makes website heavy?
@@tech830 Short answer: Not necessarily. With proper optimization(SSG and ISR) in Next.js, you can build fast and efficient static blogs. Example: Next pre-renders your MDX content into HTML at build time. This means that users only download the generated HTML files, which are generally much smaller than the original MDX files
@@codingjitsu Uh, now my doubt clear!
Where is the admin panel
Your github will be your admin panel. Jut add your MDX files in the contents folder in github repo. checkout: 13:00 - MDX Contents
nice!
Thanks!
I was stuck in the official next.js documentation. Hopefully, I found you. Thanks a lot for making us pro, and I'm pretty confident now✊️
Glad I could help!
where are the web components ........??? Tottally useless video
Please create more stuff.
Preparing an e-commerce project with Next.js and Shopify. Stay tune.
@@codingjitsu great will wait for it
Great tutorial. Thanks for this!!!
You're very welcome!
hey budding loved it validation part is too informative for me keep creating and sharing good stuff with us
Glad you liked it
Can you help me to make my web ap fast I am working on Nextjs protect but my data fetching is too slow ?
Checkout the docs here: nextjs.org/docs/app/building-your-application/data-fetching
Your channel name is so cool!
Oh thanks!