Code A Program
Code A Program
  • 77
  • 1 546 378
Custom Rich Text Editor With Validation | Next.js 14 & React js | next js tailwind css
Custom Rich Text Editor With Validation | Next.js 14 & React js | next js tailwind css
Code A Program...
Create a custom rich text editor, it's support both react js, next js
👁️ Website Live Preview:
nextjs-rich-text-editor.vercel.app/
📂GitHub src link:
github.com/Sridhar-C-25/nextjs-rich-text-editor
📚 Libarys:
Text Editor:
- tiptap.dev/
UI Design
- ui.shadcn.com/
- tailwindcss.com/
Validation
- react-hook-form.com/
- zod.dev/
#nextjs14 #taliwindcss
👍 Thanks for watching!
Make sure to like & Subscribe for more! 💜
Переглядів: 925

Відео

Personal Portfolio Website with Next.js & Tailwind CSS
Переглядів 1,2 тис.21 день тому
Personal Portfolio Website with Next.js & Tailwind CSS | #nextjs14 | #tailwindcss Code A Program... Learn how to create a stunning portfolio website using Next.js 14, Tailwind CSS, Shadcn UI, and Framer Motion in this step-by-step tutorial. Perfect for showcasing your work and impressing potential clients or employers! 👁️ Website Live Preview: cap-nextjs-portfolio.vercel.app/ 🎨 Figma Design: ww...
Next js 14 Authentication | oAuth authentication With auth0 | Next.js authentication tutorial
Переглядів 5183 місяці тому
Next js 14 Authentication | oAuth authentication With auth0 | #nextjs14 #auth0 Code A Program... Learn how to set up oAuth authentication with Auth0 in Next.js 14. This tutorial will guide you through the process of implementing authentication in your Next.js application. 📂0auth docs: auth0.com/docs 🔗Npm link: www.npmjs.com/package/@auth0/nextjs-auth0 Random Number Generate Command: node -e "co...
How to make a responsive portfolio website with tailwind CSS
Переглядів 4,4 тис.6 місяців тому
Create Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners Code A Program... Learn how to create stunning and professional portfolio sites using the latest version of Tailwind CSS - v3.4. Elevate your web design skills and impress potential clients with your beautiful portfolio websites. This tutorial will walk you through the process step by step, making it easy for beginners...
Vscode Useful Setup for javascript & python | Vscode Useful Extension
Переглядів 5247 місяців тому
Vscode Useful Setup for javascript & python | Vscode Useful Extension | #javascript #python #vscode Code A Program... GitHub : github.com/Sridhar-C-25 Email: codeaprogram@gmail.com #vscode
React Mui Data Table in English | React js Data Table
Переглядів 11 тис.7 місяців тому
How To Make A React Mui Data Table | React js Data Table Code A Program... Other related video: Tanstack Table Design Using React js and tailwind css search, pagination, download option: ua-cam.com/video/WJKt5vpHyA0/v-deo.htmlsi=mx1xyIBGPh3mM9kV GitHub: github.com/Sridhar-C-25 #reactjs #materialui #reacttable
Awesome React js image slider | Custom React Image Slider
Переглядів 2,1 тис.8 місяців тому
How to make a react image slider | Custom React Slider | React js and tailwind css 2024 Code A Program... 📂GitHub src link: github.com/Sridhar-C-25/React-Custom-Swiper-Slider #reactjs #tailwindcss
Custom Createable Multi Selector Using React js and Tailwind css | Createable Multiselect
Переглядів 3,7 тис.8 місяців тому
Custom Createable Multi Selector Using React js and Tailwind css | Createable Multiselect Code A Program... 📂 GitHub src link: github.com/Sridhar-C-25/react-createabl-multi-selector #reactjs #tailwindcss
React js Form Validation tutorial | React Hook Form Advance Usages
Переглядів 8 тис.11 місяців тому
React js Form Validation tutorial | React Hook Form Advance Usages Code A Program... 📂GitHub src : github.com/Sridhar-C-25/react-hook-form Package : React Hook Form(www.react-hook-form.com/) Material Tailwind(www.material-tailwind.com/) tailwind Css(tailwindcss.com/docs/installation) #reactjs #tailwindcss #validation
Tanstack Table Design Using React js and tailwind css search, pagination, download option | #reactjs
Переглядів 25 тис.Рік тому
Tanstack Table Design Using React js and tailwind css search, pagination, download option | #reactjs Code A Program... 📂GitHub src link : github.com/Sridhar-C-25/Tanstack_table Packages (Faker js)[www.npmjs.com/package/@faker-js/faker] (Tanstack Table)[tanstack.com/table/v8] (xlsx)[www.npmjs.com/package/xlsx] (Tailwind Css)[tailwindcss.com/docs/installation] ❤️ Share and subscribe #reactjs #tai...
Learn React Router State | React Router Tips and Tricks
Переглядів 548Рік тому
Learn React Router State | React Router Tips and Tricks Code A Program... Thanks for watching, Follow us on : Github : github.com/Sridhar-C-25 Instagram: codeaprogram #reactjs
Send HTML Email Using Nodejs(express) And Sendinblue
Переглядів 3,5 тис.Рік тому
Send HTML Email Using Nodejs(express) And Sendinblue Code A Program... Thanks for watching, Follow us on : Github : github.com/Sridhar-C-25 Instagram: codeaprogram #nodejs #expressjs
Desktop and Mobile Responsive Sidebar With Submenu Using React js and tailwind css and Framer Motion
Переглядів 37 тис.Рік тому
Desktop and Mobile Responsive Sidebar With Submenu Using React js and tailwind css and Framer Motion Code A Program... GitHub src link :github.com/Sridhar-C-25/sidebar-with-submenu_vid Thanks for watching, Follow us on : Github : github.com/Sridhar-C-25 Instagram: codeaprogram #reactjs #reactjs
How to use ChatGPT To Write Better React Code | React js and Typescript | #chatgpt
Переглядів 1,3 тис.Рік тому
How to use ChatGPT To Write Better React Code | React js and Typescript | #chatgpt
React js Send html email from contact form without server code - Email.js Tutorial
Переглядів 6 тис.Рік тому
React js Send html email from contact form without server code - Email.js Tutorial
How to return a 404 Not Found page for dynamic routes in Next.js | #nextjs
Переглядів 5 тис.Рік тому
How to return a 404 Not Found page for dynamic routes in Next.js | #nextjs
How to Add Syntax Highlighting to Code on Your Website Using React js | Code Highlight | #reactjs
Переглядів 19 тис.Рік тому
How to Add Syntax Highlighting to Code on Your Website Using React js | Code Highlight | #reactjs
React Filterable Selectors ( Country, State, City) Using React js, tailwind css & headless ui
Переглядів 15 тис.Рік тому
React Filterable Selectors ( Country, State, City) Using React js, tailwind css & headless ui
React js firebase phone authentication | Send OTP And Verify phone number | #firebase
Переглядів 67 тис.Рік тому
React js firebase phone authentication | Send OTP And Verify phone number | #firebase
Creating a README File That Makes Your Project Shine | readme file tutorial | #readme
Переглядів 795Рік тому
Creating a README File That Makes Your Project Shine | readme file tutorial | #readme
Alternative Image In React js | Quick Tip | #reactjs
Переглядів 741Рік тому
Alternative Image In React js | Quick Tip | #reactjs
Weather App Using React js And Tailwind CSS | React js project | #reactjs
Переглядів 9 тис.Рік тому
Weather App Using React js And Tailwind CSS | React js project | #reactjs
How to make a responsive navbar with tailwind css | tailwind css tutorial | #tailwindcss
Переглядів 146 тис.Рік тому
How to make a responsive navbar with tailwind css | tailwind css tutorial | #tailwindcss
How To Make A Portfolio Website Using React js and Tailwind CSS
Переглядів 15 тис.Рік тому
How To Make A Portfolio Website Using React js and Tailwind CSS
Custom Scrollbar Using Tailwind CSS | Tailwind css Scrollbar
Переглядів 35 тис.Рік тому
Custom Scrollbar Using Tailwind CSS | Tailwind css Scrollbar
Tailwind CSS Dark/Light/System Base Change Theme With Local Storage | React js dark mode
Переглядів 29 тис.Рік тому
Tailwind CSS Dark/Light/System Base Change Theme With Local Storage | React js dark mode
Animated Auto Slider Using React js And Tailwind CSS | React js carousel slider
Переглядів 5 тис.Рік тому
Animated Auto Slider Using React js And Tailwind CSS | React js carousel slider
React js Form Handling | React js Quick Tips for saving your time
Переглядів 895Рік тому
React js Form Handling | React js Quick Tips for saving your time
Tailwind CSS Only Awesome Testimonials Section Card Hover Effect | #tailwindcss
Переглядів 17 тис.Рік тому
Tailwind CSS Only Awesome Testimonials Section Card Hover Effect | #tailwindcss
React js dropdown menu close functionality | React js Tips | Learn React js
Переглядів 34 тис.Рік тому
React js dropdown menu close functionality | React js Tips | Learn React js

КОМЕНТАРІ

  • @asfakmhmd
    @asfakmhmd 8 годин тому

    Source please

  • @unnatirane7559
    @unnatirane7559 День тому

    Please tell me how to add image beside header

  • @lambo-ca
    @lambo-ca 3 дні тому

    Unbelievable!!! is it responsive?

  • @ProfessionalDoctorBritt
    @ProfessionalDoctorBritt 4 дні тому

    wtf was that, spend a whole minute showing the same feature with no audio

  • @akashpawar8618
    @akashpawar8618 8 днів тому

    Thanks 👍🙏

  • @devsbuddy
    @devsbuddy 11 днів тому

    Good Tutorial about TipTap editor, but That keyboard sound is so annoying. Next time make sure to use normal speed for keyboard sound or remove it completely.

  • @CodeAProgram
    @CodeAProgram 13 днів тому

    Get this video to 50 likes, and I'll share the GitHub source!

  • @kanishkplays100
    @kanishkplays100 14 днів тому

    Font?

  • @brianjohansson4495
    @brianjohansson4495 15 днів тому

    Source code given = Subscribed :D

  • @kratagyasingh755
    @kratagyasingh755 16 днів тому

    12:45

  • @tontepouncil354
    @tontepouncil354 17 днів тому

    Do you feel this is still the best way to create a mobile-first navbar?

  • @AlexisPF24
    @AlexisPF24 20 днів тому

    ¡Thank you! I've learned a lot from you.

  • @mohammedehab8987
    @mohammedehab8987 23 дні тому

    is it on laravel ?

  • @MeercuryOn
    @MeercuryOn 23 дні тому

    thanks bro!

  • @soheilweb
    @soheilweb 23 дні тому

    Great 🎉 what's you vscode theme?

  • @sungjuncho8677
    @sungjuncho8677 24 дні тому

    the css file is not shared

    • @CodeAProgram
      @CodeAProgram 24 дні тому

      I added the css file in drive. Now you can use it

  • @aravinthideatech9567
    @aravinthideatech9567 26 днів тому

    Great work 🙂... Very usefull for you...😅

  • @shrutisingh5345
    @shrutisingh5345 Місяць тому

    const menuRef = useRef(); useEffect(() => { const handleClickOutside = (e) => { if(!menuRef.current.contains(e.target)){ setOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return() =>{ document.removeEventListener("mousedown", handleClickOutside); } }); <div ref={menuRef} className="relative flex items-center"> <MdSettings size={24} onClick={() => setOpen(!open)} /> {open && ( <div className="bg-grey3o p-4 w-52 shadow-lg absolute right-0 top-8"> <ul> {Menus.map((menu, i) => ( <li onClick={() => setOpen(false)} key={i} className="p-2 cursor-pointer rounded hover:bg-hoverPattern" > {menu} </li> ))} </ul> </div> )} </div> THIS WILL WORK,

  • @sanjivjaiswal6656
    @sanjivjaiswal6656 Місяць тому

    Does the dropdown automatically open above or below based on the space available on the screen?

  • @afrink2203
    @afrink2203 Місяць тому

    very great and easy to understand video!

  • @MuhammadHasnain-o1m
    @MuhammadHasnain-o1m Місяць тому

    Wow such a amazing tutorial you better my coding journey .

  • @girishpandey9976
    @girishpandey9976 Місяць тому

    Thanks for great sharing of valuable Gyan....

  • @propenthia534
    @propenthia534 Місяць тому

    font name

  • @RudraShejwal-jv2bf
    @RudraShejwal-jv2bf Місяць тому

    Its really worked

    • @dhayanandt5011
      @dhayanandt5011 25 днів тому

      Send copy bro

    • @RudraShejwal-jv2bf
      @RudraShejwal-jv2bf 25 днів тому

      @@dhayanandt5011 are bhai Pehele run hogya fir badme do tin din bad try kiya to Run nhi ho rha hai

    • @dhayanandt5011
      @dhayanandt5011 25 днів тому

      @@RudraShejwal-jv2bf send code bro GitHub

    • @dhayanandt5011
      @dhayanandt5011 25 днів тому

      Send code bro GitHub

  • @mahiraltnkaya3570
    @mahiraltnkaya3570 Місяць тому

    I'm interesting your html attributes highligher and shiner bro. Can you give me trick or extension name.

  • @omnilothar
    @omnilothar Місяць тому

    whats make the highlighted blue background when menu is clicked/active?

  • @daeralbra
    @daeralbra Місяць тому

    Why don't guys speak in the video?. It would be really helpful.

  • @PulkitMalhotra
    @PulkitMalhotra Місяць тому

    Good content bad code quality

  • @priyanksoni1235
    @priyanksoni1235 2 місяці тому

    bro i can't write the css in the section in classname

    • @sagarsagu4788
      @sagarsagu4788 24 дні тому

      import tailwindcss then again if problem persists then press debug option in package.json file

  • @okwarakizitochigozirim6107
    @okwarakizitochigozirim6107 2 місяці тому

    great tutorial, please which theme are you using?

    • @CodeAProgram
      @CodeAProgram 13 днів тому

      marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

  • @AbhayDeshwal-sj5bg
    @AbhayDeshwal-sj5bg 2 місяці тому

    please tell me what is your theme name of vs code

  • @ahmedoraiby3059
    @ahmedoraiby3059 2 місяці тому

    thanks so much finally there's someone use easy ways in developing

  • @EfoneliSarah
    @EfoneliSarah 2 місяці тому

    thanks,you earned a subscriber

  • @munkhtulga157
    @munkhtulga157 2 місяці тому

    Too many unnecessary things, just get straight to the point!

  • @azeezmoshood6451
    @azeezmoshood6451 2 місяці тому

    Nice, but you set the state of the countries to the first array like you did this const [country, setCountry] = useState(countryData[0]) cuz this would only show afghnistan, so how were you able to get the rest of the countries as implies in your video

  • @ghitahina7789
    @ghitahina7789 2 місяці тому

    9:09 flex navbar

  • @user-kp6tw7ft6g
    @user-kp6tw7ft6g 2 місяці тому

    Very useful tutorial, it is working for me. Thank you.

  • @shireenkhan7569
    @shireenkhan7569 2 місяці тому

    36:37 working on mobile view

  • @Alexandre-Freitas-SJBV
    @Alexandre-Freitas-SJBV 2 місяці тому

    não funciona comigo

  • @zavasgrafis
    @zavasgrafis 2 місяці тому

    very helpful broski, thank you!

  • @siriusplayz5871
    @siriusplayz5871 2 місяці тому

    Superb bro! One of THE MOST useful tutorials online. Thanks so much for this. Really needed this... this was the last peace of the puzzle for me as I'm currently working on a landing page that needs custom select/Dropdown menu. Again, thanks so much dude ❤

  • @MuhammadAhmad-vc6xd
    @MuhammadAhmad-vc6xd 2 місяці тому

    it give me Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') ........and soo on

    • @MuhammadAhmad-vc6xd
      @MuhammadAhmad-vc6xd 2 місяці тому

      I FOUND THE SOLUTION: (Use this function in the code) function onCaptchVerify() { if (!window.recaptchaVerifier) { window.recaptchaVerifier = new RecaptchaVerifier( auth, "recaptcha-container", { size: "invisible", callback: (response) => { onSignup(); }, "expired-callback": () => {}, } ); } }

  • @afftardarda3916
    @afftardarda3916 2 місяці тому

    cant you give me the heroLight and heroDark i dont know were to get that and explain

  • @vulinhtruong194
    @vulinhtruong194 3 місяці тому

    May I ask, where is the `social-icon` class in the `a` tag being decorated?

  • @qwesicodes
    @qwesicodes 3 місяці тому

    Thanks man! 👌👌💻💻

  • @dontignore5567
    @dontignore5567 3 місяці тому

    background music was cringe. Please dont do it agian

  • @Ari-pq4db
    @Ari-pq4db 3 місяці тому

    Thank you very much sir ♥♥♥♥♥♥♥♥♥

    • @CodeAProgram
      @CodeAProgram 3 місяці тому

      ❤️❤️❤️❤️❤️

  • @MatheusSoaresGoncalves
    @MatheusSoaresGoncalves 3 місяці тому

    Ty very much, helped a lot! =D

  • @ghostmaysam
    @ghostmaysam 3 місяці тому

    Thank you ❤ I really need this for react