AlfieWebDev
AlfieWebDev
  • 30
  • 9 211
Code with me #4 - More work on my SaaS! (adding a 404 screen, template "previews" and UI stuff)
👋 Hello all!
Do you have any ideas for things I could add to UA-camToSlides? Let me know in the comments and I might add those features and make a video.
What do you think of the new editing format? Should I go back to no cuts or should I keep cuts in?
In this video, I work on UA-camToSlides and more specifically add a custom 404 screen, improve the payment success screen and add in a page for users to get a preview of the templates. Nothing too crazy, but a big update coming soon!
💬 Join the AlfieWebDev server on Discord! We can chat about the projects from the channel, share ideas, and help each other out. I would love to see you there. 👉 discord.gg/Q8V3Ruzn
Want to support the channel? You can grab me a coffee here ☕: buymeacoffee.com/alfiewebdev
🚀 Check out the **live version** of the site I am working on in this video: [youtubetoslides.com](youtubetoslides.com)
🌐 And don’t forget to visit my personal website: [alfiewebdev.com](www.alfiewebdev.com)
See you in the next one! 👋✨
Переглядів: 54

Відео

Using Route Groups in Next.js to Render Different Navbars on Different Pages
Переглядів 1004 години тому
👋 Hello all! In this video, I show you how to use Route groups in Next.js to render different navbars depending on the page / route you are on in the browser. You can actually use this method for lots of different conditionally rendered content on pages, but I chose navbars as it is easy to understand. Leave a like if you enjoyed. 💬 Join the AlfieWebDev server on Discord! We can chat about the ...
Code with me #3 - Working on my SaaS. Improving the UI design. (chill coding session)
Переглядів 4737 годин тому
👋 Hello all! In this video, I work on UA-camToSlides and work on the landing page UI to make it look cleaner using ShadCN and Tailwind. I also do some work on the generate page just to improve the UX. This is a chill coding session so sit back, relax and code with me whilst working on your own SaaS or project. 💬 Join the AlfieWebDev server on Discord! We can chat about the projects from the cha...
Code with me #2 - Working on my SaaS. Adding new languages and doing some refactoring!
Переглядів 22814 годин тому
👋 Hello all! In this video, I work on UA-camToSlides and add in functionality which allows a user to select from more than just English. For those who are curious, the site is built with Next.js, Kinde, PostgreSQL, Stripe, Shadcn and a couple of other libraries. UA-camToSlides is now multilingual! 💬 Join the AlfieWebDev server on Discord! We can chat about the projects from the channel, share i...
Code with me #1 - Working on my SaaS. Adding tagging / filtering functionality for users
Переглядів 40916 годин тому
👋 Hello all! In this video, I work on UA-camToSlides and add in functionality for tagging and filtering. This is a live coding session in which I work on my SaaS. The site is built primarily with Next.js. 💬 Join the AlfieWebDev server on Discord! We can chat about the projects from the channel, share ideas, and help each other out. I would love to see you there. 👉 discord.gg/Q8V3Ruzn Want to su...
How to deploy an Express App to Render
Переглядів 5219 годин тому
👋 hi everyone! In this short tutorial, I show you how to deploy an Express app to Render.com. Leave a like if you found the video useful. 💬 Join the AlfieWebDev server on Discord! We can chat about the projects from the channel, share ideas, and help each other out. I would love to see you there. 👉 discord.gg/Q8V3Ruzn GITHUB REPO: github.com/alfredonline/beginner-api-express-setup-example Want ...
Build your own SaaS: Finishing the project (final tweaks, bug fixes and improvements) (episode 19)
Переглядів 252День тому
👋 Hey everyone! Taking it easy in this episode. Today we finally finish the project and fix some final bugs and make some final changes before we deploy in the next video. 🚀 💬 Join the AlfieWebDev server on Discord! We can chat about the projects from the channel, share ideas, and help each other out. I would love to see you there. 👉 discord.gg/Q8V3Ruzn GITHUB REPO: github.com/alfredonline/yout...
Build your own SaaS: Making a simple yet effective examples page (episode 18)
Переглядів 50День тому
👋 Hey everyone! Taking it easy in this episode. Today, we'll be building a simple examples page to show potential customers what our SaaS has to offer. It's a great way to give them a sneak peek of what we’re all about! 🚀 💬 Join the AlfieWebDev server on Discord! We can chat about the projects from the channel, share ideas, and help each other out. I would love to see you there. 👉 discord.gg/Q8...
Build your own SaaS: Making some changes to our app - ! (episode 17)
Переглядів 9814 днів тому
Hello all, A bit more of a chill episode today. We are just fixing a subtitles bug that I noticed and ensuring that our payments are in sync with our db and updating correctly, etc. I will put the Github code once I have finished this series. Support the channel: buymeacoffee.com/alfiewebdev live version of the site we are building: youtubetoslides.com Check out my personal website: www.alfiewe...
Build your own SaaS: Setting Up Payments with Stripe (Next + Stripe Elements tutorial) (episode 16)
Переглядів 19314 днів тому
Hello all, Learn how to implement Stripe Elements / Components into your project so you can accept payments easily. This is super easy to get set up and only takes about 40 minutes. Let's do this! I will put the Github code once I have finished this series. Support the channel: buymeacoffee.com/alfiewebdev live version of the site we are building: youtubetoslides.com Check out my personal websi...
Build your own SaaS: Uploading Files to UploadThing - Episode 15
Переглядів 14614 днів тому
Hello all, Learn how to upload files to UploadThing in this episode of Build your own SaaS. UploadThing will store our filesand we can download them, etc. As always, please leave a like and subscribe if you learned something new from this video. I will put the Github code once I have finished this series. Support the channel: buymeacoffee.com/alfiewebdev live version of the site we are building...
Build Your First SaaS: Making Powerpoints with JS using pptxgenjs - Episode 14 (walkthrough)
Переглядів 13914 днів тому
Hello all, Learn how to build your first SaaS product by making PowerPoints with JS using pptxgenjs in this walkthrough tutorial. Perfect for beginners who want to generate presentations with Javascript / Typescript. I will put the Github code once I have finished this series. Support the channel: buymeacoffee.com/alfiewebdev live version of the site we are building: youtubetoslides.com Check o...
Build Your First SaaS: Using the OpenAI API to manipulate our data - Episode 13 (Next.js Tutorial)
Переглядів 18414 днів тому
Hello all, In today's episode I will show you how to use the openai api to cleanse and improve our transcript we got using the youtube api. I will put the Github code once I have finished this series. Support the channel: buymeacoffee.com/alfiewebdev live version of the site we are building: youtubetoslides.com Check out my personal website: www.alfiewebdev.com
Build Your First SaaS: Getting YouTube Subtitles / Transcript with JS - Episode 12 (SaaS Tutorial)
Переглядів 8114 днів тому
Hello all, In today's episode I will show you how to fetch youtube transcripts / subtitles and then how to parse them for our app. pastebin link for the data:pastebin.com/JDNgan9R I will put the Github code once I have finished this series. Support the channel: buymeacoffee.com/alfiewebdev live version of the site we are building: youtubetoslides.com Check out my personal website: www.alfiewebd...
Guaranteed JSON Consistency With Structured Outputs! (OpenAI API + Next.js) - 2024 latest model
Переглядів 12514 днів тому
Hello all, In today's video I will show you how to use structured outputs in your code as quickly as possible so that you can get consistent JSON from the OpenAI API to then use in your project. Githup repository: github.com/alfredonline/structured-output-example Support the channel: buymeacoffee.com/alfiewebdev Check out my personal website: www.alfiewebdev.com
Build Your First SaaS: Building the submission Form - Episode 11 SaaS Tutorial (Next.JS)
Переглядів 17221 день тому
Build Your First SaaS: Building the submission Form - Episode 11 SaaS Tutorial (Next.JS)
Build Your First SaaS: Working on the dashboard - Episode 10 SaaS Tutorial (Next.JS)
Переглядів 8621 день тому
Build Your First SaaS: Working on the dashboard - Episode 10 SaaS Tutorial (Next.JS)
Build Your First SaaS: Let's make a pricing page - Episode 9 SaaS Tutorial (Next.JS)
Переглядів 6921 день тому
Build Your First SaaS: Let's make a pricing page - Episode 9 SaaS Tutorial (Next.JS)
Build Your First SaaS: Syncing Kinde with PostgresQL - Episode 8 SaaS Tutorial (Next.JS)
Переглядів 4121 день тому
Build Your First SaaS: Syncing Kinde with PostgresQL - Episode 8 SaaS Tutorial (Next.JS)
Build Your First SaaS: Connecting to PostgresQL with Prisma - Episode 7 SaaS Tutorial (Next.JS)
Переглядів 6721 день тому
Build Your First SaaS: Connecting to PostgresQL with Prisma - Episode 7 SaaS Tutorial (Next.JS)
Build Your First SaaS: Setting up Auth With Kinde - Episode 6 SaaS Tutorial (Next.JS)
Переглядів 9721 день тому
Build Your First SaaS: Setting up Auth With Kinde - Episode 6 SaaS Tutorial (Next.JS)
Build Your First SaaS: Building the navbar (mobile and desktop) - Episode 5 SaaS Tutorial (Next.JS)
Переглядів 9821 день тому
Build Your First SaaS: Building the navbar (mobile and desktop) - Episode 5 SaaS Tutorial (Next.JS)
Build Your First SaaS: Building the call to action section- Episode 4 SaaS Tutorial (Next.JS)
Переглядів 5828 днів тому
Build Your First SaaS: Building the call to action section- Episode 4 SaaS Tutorial (Next.JS)
Build Your First SaaS: Building the features section - Episode 3 SaaS Tutorial (Next.JS)
Переглядів 6228 днів тому
Build Your First SaaS: Building the features section - Episode 3 SaaS Tutorial (Next.JS)
Build Your First SaaS: Getting set up and building the hero section - Episode 2
Переглядів 74Місяць тому
Build Your First SaaS: Getting set up and building the hero section - Episode 2
Building a SaaS: What we will build - Episode 1 SaaS Tutorial (Next.JS)
Переглядів 189Місяць тому
Building a SaaS: What we will build - Episode 1 SaaS Tutorial (Next.JS)
MongoDB and Express Crash Course (tutorial)
Переглядів 483Рік тому
MongoDB and Express Crash Course (tutorial)
Write a useToggle custom hook in 82 seconds
Переглядів 290Рік тому
Write a useToggle custom hook in 82 seconds
How To Play Sound In Browser Using Howler (React Tutorial)
Переглядів 4,9 тис.2 роки тому
How To Play Sound In Browser Using Howler (React Tutorial)
How to invoke a parent function from within a child (React)
Переглядів 382 роки тому
How to invoke a parent function from within a child (React)

КОМЕНТАРІ

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

    Audio is *really* quite bud :)

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

      Thanks for the feedback mate. Im gonna tinker with the settings to see if I can get that sorted

  • @ronnakritcheinvichai9677
    @ronnakritcheinvichai9677 2 дні тому

    Thank bro

  • @eludevids
    @eludevids 2 дні тому

    nice tip man

  • @devanshtiwari2193
    @devanshtiwari2193 2 дні тому

    hey Alfie amazing work keep it up all the hardwork will pays you well.

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

      Appreciate your kind words. Thank you man!

  • @umar3167
    @umar3167 2 дні тому

    Bro, When is your next SaaS tutorial dropping? This was really an awesome series.. Thanks for all your efforts.

    • @AlfieWebDev
      @AlfieWebDev 2 дні тому

      Thanks man! I'm working on a big saas now to then use for a big tutorial. In the mean time I'm gonna keep doing these videos to fill the time

  • @DunckingTest
    @DunckingTest 3 дні тому

    keep up the hard work

    • @AlfieWebDev
      @AlfieWebDev 3 дні тому

      Will do. Cheers for your comment!

  • @umarh7520
    @umarh7520 3 дні тому

    hey man, to somone looking to develop a saas as a solopreneur your videos are very informative, keep going!

    • @AlfieWebDev
      @AlfieWebDev 3 дні тому

      Thanks man! Really happy to hear you find them informative :D

  • @ronnakritcheinvichai9677
    @ronnakritcheinvichai9677 3 дні тому

    Thank bro continue working 🙂

    • @AlfieWebDev
      @AlfieWebDev 3 дні тому

      Appreciate the support bro 👊

  • @JOBKIPTOO-q6c
    @JOBKIPTOO-q6c 6 днів тому

    nice Contet 🤝 keep grinding gee

    • @AlfieWebDev
      @AlfieWebDev 6 днів тому

      The support is much appreciated 👊

  • @javaris300
    @javaris300 7 днів тому

    Are you adding that code to the GitHub?

    • @AlfieWebDev
      @AlfieWebDev 7 днів тому

      I'll add this functionality to the code on GitHub. Will probably make a tutorial version of this video for it

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

    thx u sir

  • @claytonred7974
    @claytonred7974 12 днів тому

    this series deserves a medal

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

    alfie, i'm trying to build a saas in the form of a chrome extension. I've actually built the entire chrome extension and it works smooth as butter. but I've hard coded the open ai API keys (for now) into the source code and i cant release it as it is. I'm struggling to solve this problem and i'd really appreciate it if we could connect over discord. i just want someone to show me how to setup the backend part. i'm using vanilla js since that's all i need to make the extension work, but setting up the backend is really where i'm struggling. could you please setup a discord server for youtube channel and maybe we can connect over it ? i just want someone to mentor me one time and help me set it up I'd really appreciate this help mate

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

      Hello mate okay I'm gonna set up a discord tomorrow and I'll put a comment here when it's done . I'll help you with the api key and we'll get it sorted

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

      @@AlfieWebDev much appreciated bro. i'm at my wits end after searching for a solution for days. you're the only one who's actually managed to put out content that's honestly helpful, worthy and not clickbait. thanks for agreeing to help and keep up the good work brother.

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

      @@sreekanthnayanar Thank you mate for the kind words. Yeah I try to avoid the whole click bait thing and just put out original content; glad you like it. We will fix the api key tomorrow

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

      Here is a link to a server I just set up discord.gg/Q8V3Ruzn

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

    great stuff!

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

      Appreciate your support man!

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

    Glad to see the GOAT has returned 🙏🐐

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

    I came to my friends and followed along to continue studying

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

      I'm very pleased to hear you're learning from the videos

  • @ddwinhzy
    @ddwinhzy 18 днів тому

    Can I keep learning with you, even if it's a fee, I want to learn from you all the time

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

      I just saw your comment. Thanks for your support. I am gonna upload videos every day. If there is anything specific you want to learn, just let me know!

  • @ddwinhzy
    @ddwinhzy 18 днів тому

    Fantastic, that's what I've been looking for

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

      Im very happy to hear that!

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

    really cool vid alfie :)

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

    GitHub link for sass video?

  • @naylord5
    @naylord5 27 днів тому

    Excelent series master! Thank you so much for sharing! Looking forward to the next one 🔥🔥

    • @AlfieWebDev
      @AlfieWebDev 27 днів тому

      Thank you for your support!

  • @eludevids
    @eludevids 29 днів тому

    great stuff :)

  • @SR-zi1pw
    @SR-zi1pw Місяць тому

    Nice video and welcome back

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

      Appreciate the support bro 👊

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

    great project!

  • @johnnikkodelacruz6931
    @johnnikkodelacruz6931 Рік тому

    I have an error: Error registering user: MongoServerError: command insert is unsupported, correlationID = 1787776b3c86a8d9037ac47f

    • @AlfieWebDev
      @AlfieWebDev Рік тому

      Okay that is a weird error and could be because of a number of things. My first suggestion would be to make sure your syntax is all okay. Also if you haven't already, check your connection string to make sure that you have the correct credentials. If none of these things, you can try comparing your code to the code in the GitHub repository located in the description of this video to see if there are any differences. If it still doesn't work, just let me know and I will try to help you fix it

  • @Talib683
    @Talib683 Рік тому

    Such an awesome explanation ❤

  • @ozoindaprince
    @ozoindaprince Рік тому

    the pause function does not work 😥

  • @jeremiahthompson82
    @jeremiahthompson82 Рік тому

    Thanks so much. Fantastic tutorial

  • @fazliddinfayziyev8072
    @fazliddinfayziyev8072 Рік тому

    Thank you bro. I liked it

    • @AlfieWebDev
      @AlfieWebDev Рік тому

      Glad to hear that, Thanks for your comment

  • @johnstevengonzalez2394
    @johnstevengonzalez2394 2 роки тому

    Thanks for everything men! Your tuto helps me

    • @AlfieWebDev
      @AlfieWebDev 2 роки тому

      No worries man. If you have any tutorial requests, please let me know. Thanks for viewing!

  • @AlfieWebDev
    @AlfieWebDev 2 роки тому

    I'm thankful for all the positive feedback on the video. If you have any tutorial requests, please feel free to let me know. :)

  • @denniscao8292
    @denniscao8292 2 роки тому

    Thanks for the tutorial, it worked for me.

  • @davidgallego1216
    @davidgallego1216 2 роки тому

    Amazing!. This help me.

    • @AlfieWebDev
      @AlfieWebDev Рік тому

      Fantastic. Happy to hear it helped you

  • @Ksys
    @Ksys 2 роки тому

    Thank you for this short and easy to understand video!

  • @oscargalvez7
    @oscargalvez7 2 роки тому

    Thanks for the tutorial, it was just what I needed! Keep up the amazing content! 🔥🔥🔥

  • @michaelurner3601
    @michaelurner3601 2 роки тому

    For some reason onClick is undefined. This may be a rudimentary question, but how do I define it?

    • @AlfieWebDev
      @AlfieWebDev 2 роки тому

      Sorry for my late reply. If you still have this problem, please feel free to share your code and I will help you out.

    • @michaelurner3601
      @michaelurner3601 2 роки тому

      @@AlfieWebDev Thank you for the reply. I figured it out.

  • @ArjunSingh-pm2vt
    @ArjunSingh-pm2vt 2 роки тому

    Very helpful...love you Man

  • @bravefart651
    @bravefart651 2 роки тому

    Cool vid. I have a folder with lots of mp3's, how do i get my game to play random sounds when i hit the Enter key? Same button but changing the sound each time rather than the same one all the time

    • @AlfieWebDev
      @AlfieWebDev 2 роки тому

      Hey! Did you figure it out? If not, feel free to link a repo and I'll help out

    • @bravefart651
      @bravefart651 2 роки тому

      @@AlfieWebDev No man, gave up, didn't have the time or patience.. or the brains apparently 😂

    • @AlfieWebDev
      @AlfieWebDev 2 роки тому

      @@bravefart651 Ahh sorry to hear that. My offer is open in the case that you decide to go back to it!

  • @GAGANDEEP901
    @GAGANDEEP901 2 роки тому

    hey great video, i have a query, how to play file from local folder?

    • @fattchong1619
      @fattchong1619 2 роки тому

      debes poner la carpeta con el audio en la carpeta public

    • @rotaikorailgun3261
      @rotaikorailgun3261 2 роки тому

      @@fattchong1619 hola amigo, lo pudiste hacer de esa forma? Cómo linkeaste a los archivos desde la App.js teniendo los mp3 en la carpeta public? Tuviste que agregar los mp3 al webpack? Gracias

    • @fattchong1619
      @fattchong1619 2 роки тому

      @@rotaikorailgun3261 como lo puse en el comentario anterior me resulto

    • @rotaikorailgun3261
      @rotaikorailgun3261 2 роки тому

      @@fattchong1619 si, lo pude resolver por suerte. En el src se accede como si fuese desde el html principal

    • @ozoindaprince
      @ozoindaprince Рік тому

      import audio from "/path/to/file"; src:[audio]

  • @mayank_singh_43
    @mayank_singh_43 2 роки тому

    It is showing me error that howl is not a constructer

    • @AlfieWebDev
      @AlfieWebDev 2 роки тому

      Did you solve the problem? If not, you can show me your code and I will see if I can help.

    • @nenadnovovic9697
      @nenadnovovic9697 2 роки тому

      Got the same issue when trying to import from 'react-howler'. So, change " import { Howl } from react-'howler'" to "import { Howl } from 'howler' ";