Mahmoud - MightyTuts
Mahmoud - MightyTuts
  • 74
  • 542 943
Laravel for Javascript exists - It’s far better than you think - AdonisJS Tutorial
In this video, we dive deep into the world of full-stack JavaScript development using AdonisJS, a powerful framework inspired by Laravel. Building full-stack applications in JavaScript can often feel like piecing together a complex puzzle with numerous libraries and syntaxes. However, AdonisJS simplifies this process, allowing you to create robust applications with ease. We'll walk you through building a simple site, complete with user authentication features like sign-up, login, and logout. You'll learn how to set up a user model, manage routes, and render pages using Inertia and React. We'll also cover how to maintain a clean and organized codebase by utilizing controllers and middleware. By the end of this tutorial, you'll have a solid understanding of how to build and manage full-stack JavaScript applications efficiently. For more details, check out the blog post linked below.
Blog Post: mightytuts.com/blog/fullstack-javascript-adonisjs-react-inertia/
Timestamps:
0:00 - Introduction
01:30 - Starting an AdonisJS project
01:53 - Making the User Table
02:53 - Exploring how IntertiaJS works with AdonisJS
03:45 - Changing the home page
05:12 - Add public page routes
06:00 - Building the signup page
07:23 - Adding signup API route
08:51 - Adding the signup method on AuthController
10:26 - building the dashboard page
12:39 - Adding global state for inertia pages
14:00 - Handling logout workflow
15:16 - Adding login page
16:32 - Handling the login on AuthController
17:48 - Final results
18:00 - Outro
Tools I use:
- Helix Editor
- Zellij terminal mux
- Kitty terminal
- Catpuccin Mocha everywhere
- Mac mini M2
======================================
🌐 www.rovn.ai
🌐 www.mightytuts.com
𝒳 mightymoud
🧑🏼‍💻 Github github.com/mightymoud
มุมมอง: 366

วีดีโอ

Go & HTMX is the simplicity I miss - Golang Tutorial
มุมมอง 906หลายเดือนก่อน
In this video, we explore how to build a dynamic, SPA-like website using Go and HTMX, perfect for developers tired of complex JavaScript libraries. We'll create a simple HTTP server in Go, render HTML, and fetch data from the PokeAPI to display Pokémon cards. You'll learn how to handle user input with basic HTML forms and make seamless updates using HTMX. This tutorial is ideal for those lookin...
This is the correct way to write and read files in Golang - Go basics
มุมมอง 287หลายเดือนก่อน
In this video, we dive into the fundamental concepts of handling files in Go, a powerful yet straightforward language. We start with the basics of reading and writing strings to files and gradually move towards more complex operations like handling JSON data and managing concurrent writes from multiple goroutines. You'll learn how to create, open, and close files, write strings and lines, and r...
This is the best way to make CLIs in GO - Cobra & Pterm
มุมมอง 5772 หลายเดือนก่อน
In this video, we dive into the basics of creating a CLI in Go. Go is the perfect language to make a CLI. Not only it's super simple, but also many frameworks are ready to make CLIs and make things very easy. I'll show you how to use Cobra and how to use PTerm to make a simple CLI that will accept user input and save it to database. We will also add another command to list all the entries in th...
Understanding bubble sort slowly - Javascript and Go
มุมมอง 602 หลายเดือนก่อน
In this video, we dive into the basics of sorting algorithms, focusing on the bubble sort technique. We start by understanding the concept of bubble sort through a step-by-step visual explanation, demonstrating how elements are compared and swapped to sort an array. The video then transitions into coding, where we implement bubble sort in both JavaScript and Go. Each step of the code is explain...
You deserve a better terminal - A how to guide
มุมมอง 933 หลายเดือนก่อน
You deserve a better terminal - A how to guide
Making a URL Shortener in Go - Pt.3 - Deploying to Fly.io
มุมมอง 993 หลายเดือนก่อน
Making a URL Shortener in Go - Pt.3 - Deploying to Fly.io
Making a URL Shortener in Go - Pt.2 - Making a basic HTTP server in Go
มุมมอง 903 หลายเดือนก่อน
Making a URL Shortener in Go - Pt.2 - Making a basic HTTP server in Go
Making a URL Shortener in Go - Pt.1 - Introduction to the project
มุมมอง 1213 หลายเดือนก่อน
Making a URL Shortener in Go - Pt.1 - Introduction to the project
NextJS is not a fullstack framework - Here is what is
มุมมอง 1743 หลายเดือนก่อน
NextJS is not a fullstack framework - Here is what is
Learn how to use Sqlite in Go - Go Basics
มุมมอง 8653 หลายเดือนก่อน
Learn how to use Sqlite in Go - Go Basics
Learn how to share state between Go Routines - Go Concurrency
มุมมอง 673 หลายเดือนก่อน
Learn how to share state between Go Routines - Go Concurrency
Concurrency in Go - Basic Example
มุมมอง 453 หลายเดือนก่อน
Concurrency in Go - Basic Example
How to use concurrency in Go - Go concurrency basics
มุมมอง 713 หลายเดือนก่อน
How to use concurrency in Go - Go concurrency basics
Are code bootcamps worth it?
มุมมอง 117ปีที่แล้ว
Are code bootcamps worth it?
[Chakra-ui] Making input groups super easy
มุมมอง 1.2K2 ปีที่แล้ว
[Chakra-ui] Making input groups super easy
01 - Build a simple login page - Built with chakra-ui
มุมมอง 3.1K3 ปีที่แล้ว
01 - Build a simple login page - Built with chakra-ui
10- Move Tasks from WIP to DONE on drop - Deep dive into React DnD
มุมมอง 4.7K3 ปีที่แล้ว
10- Move Tasks from WIP to DONE on drop - Deep dive into React DnD
09- Making a drop target - Deep dive into React DnD
มุมมอง 4.5K3 ปีที่แล้ว
09- Making a drop target - Deep dive into React DnD
08- Making the TaskCard component draggable - Deep dive into React DnD
มุมมอง 3.7K3 ปีที่แล้ว
08- Making the TaskCard component draggable - Deep dive into React DnD
07- Making and displaying a task list - Deep dive into React DnD
มุมมอง 3.3K3 ปีที่แล้ว
07- Making and displaying a task list - Deep dive into React DnD
06- Making a simple TaskCard Component - Deep dive into React Dnd
มุมมอง 3.8K3 ปีที่แล้ว
06- Making a simple TaskCard Component - Deep dive into React Dnd
[Chakra-ui] Customise your theme and components
มุมมอง 28K3 ปีที่แล้ว
[Chakra-ui] Customise your theme and components
05- Introduction to the project setup - Deep dive into React DnD
มุมมอง 4.2K3 ปีที่แล้ว
05- Introduction to the project setup - Deep dive into React DnD
04- Example of basic API signature - Deep dive into React DnD
มุมมอง 5K3 ปีที่แล้ว
04- Example of basic API signature - Deep dive into React DnD
[Chakra-ui] Customise your theme and components [replaced]
มุมมอง 8K3 ปีที่แล้ว
[Chakra-ui] Customise your theme and components [replaced]
03- Interactions between React dnd and React - Deep dive into React DnD
มุมมอง 4.9K3 ปีที่แล้ว
03- Interactions between React dnd and React - Deep dive into React DnD
02- Interactions between React dnd and the DOM - Deep dive into React DnD
มุมมอง 6K3 ปีที่แล้ว
02- Interactions between React dnd and the DOM - Deep dive into React DnD
01- Introduction to React-dnd - Deep dive into React DnD
มุมมอง 13K3 ปีที่แล้ว
01- Introduction to React-dnd - Deep dive into React DnD
Playing around with Stripe checkout (NextJS - TS - Chakra-ui)
มุมมอง 2.3K3 ปีที่แล้ว
Playing around with Stripe checkout (NextJS - TS - Chakra-ui)

ความคิดเห็น

  • @rayshort5328
    @rayshort5328 15 วันที่ผ่านมา

    Sorry how do I get it to animate, the only joint in the Browser is Planar, when i right click and try to animate from there it just goes up and down and left and right. Thanks

  • @kurshadqaya1684
    @kurshadqaya1684 16 วันที่ผ่านมา

    Very good tutorial.

    • @MightyMoud
      @MightyMoud 16 วันที่ผ่านมา

      @@kurshadqaya1684 thank you. Glad it’s helpful

  • @arturfil
    @arturfil หลายเดือนก่อน

    I don't get how this doesn't have more views, I know this is very simple yet this is very simple short and sweet. Nice video! Hopefully we see a more involved Go & Htmx app in the future with db and all the bells and whistles! 😃

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      Thanks dude. I think I will do more Go content in general. But maybe a GORM X HTMX combo would be great!

  • @nDenTzMotionZztrujillo
    @nDenTzMotionZztrujillo หลายเดือนก่อน

    I tried to do navigation from the react component but was not successful. So for example login returns a JSON, and then I want to navigate from the client.

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      Can you make sure the route `/api/auth/login` doesn't respond back with JSON: The login method for example should be like this: ``` async login({ auth, response, request }: HttpContext) { const { email, password } = request.body(); const user = await User.verifyCredentials(email, password); await auth.use("web").login(user); response.redirect("/dashboard"); } ``` You can see more details in the blog post. Let me know if you have more questions

  • @mikeeomega
    @mikeeomega หลายเดือนก่อน

    Very good energy

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      Glad you liked it! 🚀

  • @MightyMoud
    @MightyMoud หลายเดือนก่อน

    Follow along with much more details on the blog post: 🍉 mightytuts.com/blog/fullstack-javascript-adonisjs-react-inertia/

  • @user-tt6nc6mo7k
    @user-tt6nc6mo7k หลายเดือนก่อน

    Why would you prefix "api" on the routes for the endpoints that handle the form submissions? The whole point of Inertia.js is you don't need to build an API (on the homepage of the inertia.js site). What demonstrates the approach you have taken is odd is the fact that your "API" endpoints are redirecting the clients. This is not normal in my opinion. If you did have an API the communication would be done via JSON and the redirection would be handled client side. Nevertheless, appreciate someone putting the spotlight on AdonisJS and InertiaJS, definitely underrated. Also, nice to see you after your hiatus, I remember watching your tutorials back in the day on React and Chakra UI.

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      Yeah I see your point. I'm not sure if I have stressed this enough in the video, but I'm trying to show a similar experience to what you can get with NextJS but with much more power of an actual full stack framework behind it. I agree with you, that might have been a bit confusing to add api prefix, but the idea was to keep things as similar as possible, comparable, to NextJS - maybe not the best thing after all. Thanks for your words man. Happy to be back! 🤘🏼

  • @selvamp5775
    @selvamp5775 หลายเดือนก่อน

    Good 👍🙏

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      Thanks for the visit

  • @MightyMoud
    @MightyMoud หลายเดือนก่อน

    You can follow along the code and get more details on the blog 🍉 mightytuts.com/blog/golang-htmx-tailwind-beginner-guide/

  • @selvamp5775
    @selvamp5775 หลายเดือนก่อน

    Good 🙏

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      @@selvamp5775 glad you like it 🙏

  • @m0r4ag
    @m0r4ag หลายเดือนก่อน

    Thank you so much for the good content, you got a new subscriber!

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      My pleasure! Thanks for joining our community! ❤️

  • @filippofonseca
    @filippofonseca หลายเดือนก่อน

    This channel is so underrated!!! Wow. Super clear and detailed explanations, but feels easily digestible and intuitive. Well done! Keep the Go videos coming.

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      Thank you dude. I'll keep making more go vids. It' such a great language! <3

    • @filippofonseca
      @filippofonseca หลายเดือนก่อน

      @@MightyMoud Thanks! We need that Part 4 :)

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      @@filippofonseca Soon ;)

  • @johnsmith1789
    @johnsmith1789 หลายเดือนก่อน

    Well said and well delivered Mahmoud.

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      @@johnsmith1789 thank you! Appreciate your words ❤️

  • @happy..1907
    @happy..1907 หลายเดือนก่อน

    If you're making more videos there are very few videos about type system, unnamed types etc

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      @@happy..1907 thanks for your suggestion. I’ll work on that soon.

  • @TechDoctorMalayalam
    @TechDoctorMalayalam หลายเดือนก่อน

    Useful

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      @@TechDoctorMalayalam thanks. Glad you found it useful

  • @TheMouseJerry-du1md
    @TheMouseJerry-du1md หลายเดือนก่อน

    Thank you so much. It really nice. I really liked the way you explained and the way you added the stuff making it interesting keeping me watching without loosing the focus and we really need more of these please... Can you make a video on grpc and cobra-cli combination? You got me subscribed!

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      Thanks for you comment. I will look into grpc soon. Working on more go videos as well

  • @lorenzosala3527
    @lorenzosala3527 2 หลายเดือนก่อน

    Amazing video! I'm learning Go and you have been very helpful

    • @MightyMoud
      @MightyMoud 2 หลายเดือนก่อน

      @@lorenzosala3527 thanks man. Working on more vids right now

  • @JasonW9235
    @JasonW9235 2 หลายเดือนก่อน

    I want a select component on the left

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      I think you can simply pass the component to the prop instead

  • @vivekrajroy
    @vivekrajroy 2 หลายเดือนก่อน

    Is this free ?

    • @MightyMoud
      @MightyMoud 2 หลายเดือนก่อน

      Currently it's private. It will offer a free and paid versions once semi complete

  • @adrienazie
    @adrienazie 2 หลายเดือนก่อน

    Thanks. Had to watch your video to understand the docs.

    • @MightyMoud
      @MightyMoud หลายเดือนก่อน

      Glad to hear it!.

  • @Tenohekabanzai
    @Tenohekabanzai 2 หลายเดือนก่อน

    bro looks like Ancient Egyptian Pharaoh

  • @John-qc6of
    @John-qc6of 3 หลายเดือนก่อน

    Thanks. Cant get this to work if the slot is a closed loop. Any ideas. Thank you

  • @millemcflurry
    @millemcflurry 3 หลายเดือนก่อน

    is it not bad to have the ID be a random number? what if you get the same random number on 2 components, it is unlikely but it can happen

    • @MightyMoud
      @MightyMoud 3 หลายเดือนก่อน

      This is a very old video, but if you use UUID you don’t have to to worry about that

  • @Naruto-td7oo
    @Naruto-td7oo 4 หลายเดือนก่อน

    Thank you so much!!

  • @josefmarzano3914
    @josefmarzano3914 6 หลายเดือนก่อน

    thank you for share.

  • @ianschutt6242
    @ianschutt6242 8 หลายเดือนก่อน

    Many thanks for such a great Tutorila!

  • @علاءالطحان-ب1ف
    @علاءالطحان-ب1ف 11 หลายเดือนก่อน

    thank you so much

  • @johndanushan
    @johndanushan 11 หลายเดือนก่อน

    Great! It really helped me a lot...

  • @panagiotiskyriacou61
    @panagiotiskyriacou61 11 หลายเดือนก่อน

    imagine that when drop task to done task create different categories that group the task. So also the category component is a drop target. It is possible the category (drop target)be also a draggable item so you can merge two categories?

  • @appstuff6565
    @appstuff6565 11 หลายเดือนก่อน

    Hey Mahmoud, thanks for this! I am trying a linktree clone with supabase db. I have tables "links" and "users" that stores all links and user, respectively. After the drag and drop I would want to persist that arrangement for each user, how do i do it? Any guidance? Im using typescript nextjs with supabase.

  • @nogafouz2174
    @nogafouz2174 ปีที่แล้ว

    thanks alot

  • @gonzalolezodecordova9825
    @gonzalolezodecordova9825 ปีที่แล้ว

    excellent explanation. How can I activate the draggable with an o'clock and how to activate the droppable with a second click? thx

  • @kangtri3683
    @kangtri3683 ปีที่แล้ว

    Thank You very much...

  • @JubairRahman-zl4ye
    @JubairRahman-zl4ye ปีที่แล้ว

    create same video for mac specifically

  • @bdzack2226
    @bdzack2226 ปีที่แล้ว

    Thanks its so insightful

  • @ahrenwagner2993
    @ahrenwagner2993 ปีที่แล้ว

    Thanks so much for this video. It really helped point me in the right direction with some smart design ideas!

  • @ZURIKAT1020
    @ZURIKAT1020 ปีที่แล้ว

    Thanks for this tutorial, is super useful

  • @hasanmd803
    @hasanmd803 ปีที่แล้ว

    can we pass inputLeftElement and leftAddon at the same time ? i tried to pass but they overlapped each other.

  • @RLamp
    @RLamp ปีที่แล้ว

    Please continue the series until here was great series!!!! please, please, please...

  • @ellsonmendesYT
    @ellsonmendesYT ปีที่แล้ว

    I think this is the new way to place an icon along with an input <InputGroup> <InputLeftElement pointerEvents="none"> <EmailIcon color="gray.300" /> </InputLeftElement> <Input type="email" placeholder="Email" /> </InputGroup>

  • @colew.9771
    @colew.9771 ปีที่แล้ว

    Do you think you can make an updated version of this.

  • @EugeneBurda
    @EugeneBurda ปีที่แล้ว

    😒

  • @abuzain859
    @abuzain859 ปีที่แล้ว

    very nice turorial

  • @san2176
    @san2176 ปีที่แล้ว

    Thanks, your tutorial is fully compatible with nextJs + react + js.

  • @AndrésGuilluyArenas
    @AndrésGuilluyArenas ปีที่แล้ว

    This is awesome! Btw nowadays the command on w11 "wsl --install" does default Linux installation. Unitl i can get another SSD with Linux on my machine, this saved me.

  • @fortuneless
    @fortuneless ปีที่แล้ว

    Hello bro! great video! But when I try to run the python file, it gives me an error "zsh: no such file or directory". What can i do:') ?

  • @benjaminb7544
    @benjaminb7544 ปีที่แล้ว

    Great video! Thanks

  • @MrNateSpilman
    @MrNateSpilman ปีที่แล้ว

    Just a heads up - the article link no longer works.

  • @DiplomaticGrief
    @DiplomaticGrief ปีที่แล้ว

    These bite size lectures are easily digestible and highly informational.

  • @kazoottt4718
    @kazoottt4718 ปีที่แล้ว

    Thank you so much. But the article in the introduction can't open. Is there a new url?