Mahmoud - MightyTuts
Mahmoud - MightyTuts
  • 74
  • 544 924
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
Переглядів: 418

Відео

Go & HTMX is the simplicity I miss - Golang Tutorial
Переглядів 1,1 тис.2 місяці тому
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
Переглядів 3262 місяці тому
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
Переглядів 8872 місяці тому
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
Переглядів 622 місяці тому
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
Переглядів 963 місяці тому
You deserve a better terminal - A how to guide
Making a URL Shortener in Go - Pt.3 - Deploying to Fly.io
Переглядів 1113 місяці тому
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
Переглядів 933 місяці тому
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
Переглядів 1243 місяці тому
Making a URL Shortener in Go - Pt.1 - Introduction to the project
NextJS is not a fullstack framework - Here is what is
Переглядів 1854 місяці тому
NextJS is not a fullstack framework - Here is what is
Learn how to use Sqlite in Go - Go Basics
Переглядів 1,1 тис.4 місяці тому
Learn how to use Sqlite in Go - Go Basics
Learn how to share state between Go Routines - Go Concurrency
Переглядів 754 місяці тому
Learn how to share state between Go Routines - Go Concurrency
Concurrency in Go - Basic Example
Переглядів 484 місяці тому
Concurrency in Go - Basic Example
How to use concurrency in Go - Go concurrency basics
Переглядів 744 місяці тому
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,2 тис.2 роки тому
[Chakra-ui] Making input groups super easy
01 - Build a simple login page - Built with chakra-ui
Переглядів 3,1 тис.3 роки тому
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,7 тис.3 роки тому
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,5 тис.3 роки тому
09- Making a drop target - Deep dive into React DnD
08- Making the TaskCard component draggable - Deep dive into React DnD
Переглядів 3,8 тис.3 роки тому
08- Making the TaskCard component draggable - Deep dive into React DnD
07- Making and displaying a task list - Deep dive into React DnD
Переглядів 3,3 тис.3 роки тому
07- Making and displaying a task list - Deep dive into React DnD
06- Making a simple TaskCard Component - Deep dive into React Dnd
Переглядів 3,8 тис.3 роки тому
06- Making a simple TaskCard Component - Deep dive into React Dnd
[Chakra-ui] Customise your theme and components
Переглядів 28 тис.3 роки тому
[Chakra-ui] Customise your theme and components
05- Introduction to the project setup - Deep dive into React DnD
Переглядів 4,2 тис.3 роки тому
05- Introduction to the project setup - Deep dive into React DnD
04- Example of basic API signature - Deep dive into React DnD
Переглядів 5 тис.3 роки тому
04- Example of basic API signature - Deep dive into React DnD
[Chakra-ui] Customise your theme and components [replaced]
Переглядів 8 тис.3 роки тому
[Chakra-ui] Customise your theme and components [replaced]
03- Interactions between React dnd and React - Deep dive into React DnD
Переглядів 4,9 тис.3 роки тому
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
Переглядів 6 тис.3 роки тому
02- Interactions between React dnd and the DOM - Deep dive into React DnD
01- Introduction to React-dnd - Deep dive into React DnD
Переглядів 13 тис.3 роки тому
01- Introduction to React-dnd - Deep dive into React DnD
Playing around with Stripe checkout (NextJS - TS - Chakra-ui)
Переглядів 2,3 тис.3 роки тому
Playing around with Stripe checkout (NextJS - TS - Chakra-ui)

КОМЕНТАРІ

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

    Fantastic tutorial. Subbed.

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

      @@hotherside glad you like it

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

      @@MightyMoud ofc, you are a fantastic SWE, Mighty Mous

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

      @@hotherside oiii Hojaeyaaaa ❤️❤️

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

    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 Місяць тому

    Very good tutorial.

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

      @@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 Місяць тому

    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 2 місяці тому

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

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

      My pleasure! Thanks for joining our community! ❤️

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

    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 2 місяці тому

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

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

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

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

      @@filippofonseca Soon ;)

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

    Well said and well delivered Mahmoud.

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

      @@johnsmith1789 thank you! Appreciate your words ❤️

  • @happy..1907
    @happy..1907 2 місяці тому

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

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

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

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

    Useful

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

      @@TechDoctorMalayalam thanks. Glad you found it useful

  • @TheMouseJerry-du1md
    @TheMouseJerry-du1md 2 місяці тому

    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 2 місяці тому

      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 2 місяці тому

      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 3 місяці тому

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

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

    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 4 місяці тому

    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 4 місяці тому

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

  • @Naruto-td7oo
    @Naruto-td7oo 5 місяців тому

    Thank you so much!!

  • @josefmarzano3914
    @josefmarzano3914 7 місяців тому

    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 Рік тому

    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 Рік тому

    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.