SaaS Website Builder, Project Management And Dashboard: Nextjs14, Bun, Stripe Connect, Prisma, MySQL
ฝัง
- เผยแพร่เมื่อ 1 ม.ค. 2025
- ⏰ Only 8 spots left to join PU this enrollment period. Last day to join is December 31st.
www.skool.com/...
🪪 Purchase a license to monetize the code
webprodigies.c...
🙏🏻 Help us create more free content for you with this 15 second survey:
forms.gle/8tu5...
→ Build Realtime Cursors Using Nextjs: • SaaS Notion Clone with...
Github Repo: github.com/web...
Here is the discord if you want to hangout or get support: / discord
Start your own agency for Free: www.gohighleve...
Learn how to connect a users stripe account into your app and sync products. You will also build a Website and funnel builder completely from scratch without using any libraries that can also be hosted on custom subdomains inside the app.
⏰ Timestamps
00:00 - Plura Demo
14:51 - Next’s 14 Project Setup
19:09 - Setup Local Database
24:00 - Next’s 14 Authentication
37:00 - Freelance Community
40:28 - How to build the Landing Page
01:04:53 - Sub domains Architecture Explained
01:10:20 - How to setup subdomains in nextjs 14 app in middleware file
01:18:34 - How to use Prisma in nextjs 14
01:37:51 - Building the Agency Section
02:07:20 - How to build forms in nextjs 14
02:17:04 - How to upload images in nextjs 14
03:13:23 - Nextjs14 Sidebar
03:52:39 - How to build zustand / redux natively. Global modal provider.
04:32:46 - Challenge yourself to build the route segments for the agency
04:33:44 - Solution
04:37:18 - User Details with access control
05:10:24 - Launchpad
06:10:33 - Building the Sub Account Section
06:29:10 - Media storage for Sub Accounts in Nextjs14
06:57:24 - Pipelines and project management khan ban board.
09:24:55 - Stripe Setup
09:58:40 - Agency Billing page
10:01:02 - Challenge Add more add-on products
10:14:20 - How to create Custom Stripe Form in nextjs14
10:36:41 - Test Stripe locally
10:52:45 - Challenge Add pro features
11:04:44 - Funnels and Website Builder
12:00:46 - Website builder Architecture breakdown
12:19:11 - Global State Management For Website builder
14:50:49 - Stripe Checkout form for funnels
15:15:40 - How to show websites in nextjs14
15:23:02 - Agency Dashboard
15:41:10 - Subaccount Dashboard
16:17:34 - Deployment
List of all the features.
🤯 Multivendor B2B2B Saas
🏢 Agency and Sub accounts
🌐 Unlimited funnel hosting
🚀 Full Website & Funnel builder
💻 Role-based Access
🔄 Stripe Subscription plans
🛒Stripe add-on products
🔐 Connect Stripe accounts for all users! - Stripe Connect
💳 Charge application fee per sale and recurring sales
💰 Custom Dashboards
📊 Media Storage
📈 Stripe Product Sync
📌Custom checkouts on funnels
📢 Get leads from funnels
🎨 Khanban board
📂 Project management system
🔗 Notifications
📆 Funnel performance metrics
🧾 Agency and subacc metrics
🌙 Graphs and charts
☀️ Light & Dark mode
📄 Functioning landing page
Website with background grids
bg.ibelick.com/
Shadcn UI Theme creator
gradient.page/...
Instagram:
/ webprodigies
If you installed prisma and prisma client its probably the latest version (Mine was 5.9.1 ) and almost all the types returned from db query is "any". Not sure if its an error from the newest version but a simple fix is to downgrade it to the same version as in the video, 5.7.1. Then go prisma generate again and it should work as expected.
Here is a thread talking about how to fix the relationships not being returned error as well: github.com/prisma/prisma/discussions/10928
Great job to the community for catching this! Thanks Ryan big shoutout to you.
@@armantgold quick question, do we have to use bun to develop the project?
I am on windows and bun is not supported on Windows, only Mac & Linux atm
@@username2828No you can use npm
live link is down can fix it?
@@username2828I think windows support is not here but WSL works if you need it
I registered on the webprogies but now I seem to be getting a 404 error. Are you aware of this?@@gnaneshnayak8790
I have no words! After your intro I was grabbing my money to invest into this! What an amazing project!
Master here to appreciate Grand Master 2. 👏
Thank you brother!
master appreciate master, you two are my favourite
Both of you are doing great work 😊😊
one legend appreciating other legend
My dude just raised the bar for tech tutorials.
literally.
he is the bar
Did you complete this tutorial? If you have this entirely builded up, I would give you a buytocoffee $30 for it? Im too busy and I like the project. If you well, let me know.
@@deliveryproductstore7548yes
Yes@@deliveryproductstore7548
To be honest, in 2024, this is the best project tutorial on TH-cam by far. I appreciate your blood and sweat to make this video happen. Encourage others to share this video with the rest of the world.
Have you seen a Webflow tutorial?
@@SEO-xk1ft share it plz
I have been programming and working in industry for about 5 years. worked in senior positions. never have I been this mindblown by a developer like this. I am speechless.
making a tutorial on making an app that makes apps is META AS FUCK!!!!
This is by far the best tutorial on TH-cam in 2024. There is no competition.
Feedback from someone that has watched almost the whole video: I really like the method of copy pasting and just explaining the most difficult parts, i consider that basic or repetitive things don't need to be re-done, so i really love the way you teach us and show us what's really going on behind, great video
Thank you for this valuable feedback. I want to focus on the complexity as well. Will continue this.
hey have you completed this project? from the demo it sounds too complex. if you have completed, mind sharing your mail id here or something I can connect you with.
No way this is free on youtube. Man you have my eternal respect 🙇♂️ no way I'm gonna build those clones out there on yt by renowned web dev channels (you know whom I'm talking about) but will dedicate my entire time untill i finish this super cool project building and learning❤
You are the prime example of a hustler! love it brother. Thank you for believing in Web Prodigies. Would love to see what websites/funnels you create in this project in the discord. Talk soon
Dedicating my life to do this now... I'm jobless and I need one asap... Thanks will tip you when I get paid
@@webprodigies You are incredible. Thank you!!!
@@businessuser5146 join the free community brother. From the sales training youll definitely make money👍🏻
Hey can you help me? The bun template at VS code terminal won't run, it doesn't asks for my input nor shows any error. Can you help how i fix it to move forward with this tutorial? Many thank in advance
With so much wrong in the world, it’s moving to still find people like you providing value, asking nothing in return. This is amazing. God bless you
so nice
The tutorial to end all tutorials! I'm using this for getting into NextJS as a more or less total noob and i'm so happy to see the page slowly building up in my webbrowser. Currently at 1/16th of the video, exited to see what will come. Thanks so much
I'm glad the algorithm sent me this goldmine. I can not express how long I've been looking for a video like this! I don't know who you are, but I'm glad I found you. The amount of detail in this, no effort was wasted, incredible man!
Me too. Thank u so much. I am trying to doing something like this for years along. God bless u
So did you start something over with the help of this tutorial?
@@DhvaniParghi Thank you for replying , but the issue is resolved now !
Recently, I've noticed these incredible tutorial videos on TH-cam. It's amazing to see someone put in the effort to create and explain such complex projects for free. Normally, it would require a whole team of engineers to do something like this. It's really impressive work, and as a senior engineer, I have a lot of respect for it. Back when I was learning programming, TH-cam mostly had basic tutorials. There weren't many advanced, real-world project tutorials available. I always wished for tutorials like these, so I appreciate you for making it easier for beginner engineers by creating these videos.
Thanks!
Thank you so much for recognizing my hard work! Please do send me a message on discord. Would love to have a chat and answer any questions you have! Much Love
@@webprodigiesit’s really awesome project. Appreciated for all the efforts. I like the website builder part with stripe subscription. I requested to make it complete separate video focusing on making website builder with no code drag and drop. I requested the same to @codewithantonio bro. Can you make the same no code tool like wix webflow framer website builder. Thank again bro.
@@webprodigies can we use postgres Sql in this project with prisma or it have conflicts with the queries you written??
@@gauravmandall no sir
This is crazy, seriously insane that this is on TH-cam for free. Your content is by far the best project tutorials on TH-cam - serious props man. I can't remember the last TH-cam video I clicked the like button for, but you earned it man.
i have a little experience with web development and swe, but wasn’t dedicating enough of my time to it because my laziness had taken over me for the past year. had zero motivation until i finally decided to get up off my ass and do something with my life only a couple days ago. lo and behold, you decide to drop one of the most comprehensive and extensive tutorials on this planet about building a fully featured SaaS completely for free, and THEN proceed to build a whole community of devs looking to freelance and make a living of out this. you are doing gods work. bless your soul you impeccable human.
also your action-based learning thing is very true and ik it to be helpful because one of the reasons of my lack of motivation is always finding myself stuck in tutorial hell, but I always found it hard to escape that because I seem to have the need to learn and know a concept fully before actually starting something and applying it. but this time it will be different. so what if i encounter obstacles and hurdles, i will figure it out when i get there, no more getting into my own head it’s time to take action.
Lol, keep admitting how lazy you are, i love knowing there will always be losers like you out there. Makes me feel good
hey have you completed this project? from the demo it sounds too complex. if you have completed, mind sharing your mail id here or something I can connect you with.
Hands down, this is the best video on TH-cam. I haven't seen anyone teach this level of depth in premium courses offered by others, but you provide this invaluable information for free. In just one video, you've earned my respect, man.
Did you watch the whole course??
@@alezlevi1959 I spend a few hours watching each day. I hope to complete this within 2 or 3 weeks.
hey have you completed this project? from the demo it sounds too complex. if you have completed, mind sharing your mail id here or something I can connect you with.
15 minutes just for the demo, that's a monster project.
TH-cam is amazing, guys. A $20,000 project for free
I don't have money to buy a coffees for you and you don't ask that, even what I can, I can pray for you to live long live, thank you man❤❤❤❤❤❤❤❤❤❤❤❤❤
I believe in the lord. Thank you
Remember the team one day when you make it🥰🥰. It's my turn now to try this video
Love it! Incredible build. Thank you for bringing in those advanced, lengthy projects. Can't even begin to imagine what comes next. I am a huge fan of your channel now
This is by far one of the most comprehensive tutorials on TH-cam. Many thanks
Web Prodigies
I am utterly speechless, this is more than amazing, There's no words that can explain this tutorial, and yet at 9:48 you said "and here's something that definitely going to impress you" as if this wasn't impressive enough.
thank you so much, and keep up with the amazing work.
This is the most advanced tutorial on youtube right now
Why does this video not have a billion views already?
The fact that just the Intro/demo chapter of this video is 14 minutes long, speaks volumes about the mindboggling amount of high-octane knowledge this video contains.
I can't even begin to fathom how much time, effort and blood has gone into making this masterpiece of a video.
Lets' face it, it is not just a tutorial - it is an entire freaking course in itself.
Kudos, man. Much appreciated
This ain't a tutorial,This is cinema
Thanks! I can't believe its free I don't have any words ❤
Thank you so much for this! I hope to provide more value to you in the future. all the best
This is absolutely madness. This is more value than paid courses. Salute.
Cinematic intro is on another level... amazingly done.
React and next is not my main focus right now, but I really want to watch this and understand how did you manage all that in 16 hours tutorial.
Just amazing...
After your intro, i wasn't able to eating again, this is the best video I have never seen in TH-cam, the very all in one , may God bless you bro❤
Oh my god dude. I'm one minute in and absolutely starstruck. No one is doing tutorials like this (with Stripe Connect!), this comprehensive, with the same amount of effort into the production of the video. You are a gift to this world man.
The first 14 min 45 sec was an outstanding intro. To be honest, It is the best project tutorial I've ever found on TH-cam so far.✨✨
@@user09642 Its like watching movie first 14 min
I have no doubts this will be the best channel about web development on TH-cam. Awesome job!
Thanks
Thank you so much for recognizing my work! Please do send me a message on discord. Would love to have a chat and answer any questions you have! Hope you have a blessed day.
@@webprodigies How do I join your discord pls? Or your community
@@veedjohnson Hey G! here www.skool.com/freelance-prodigies-2202/about
@@webprodigies thanks king!
If you keep dropping these kind of projects you will be the biggest tech TH-camr in no time. You just earned a new subscriber.
Bro started to create his own startup😎, great job
15 minutes in and I can confidently say I am blown away!! The level of attention to detail in this project is unreal. Talk about first impressions lol
THIS IS WHERE HUMANITY STARTS AND END. MAN WITH A HEART OF GOLD!!!! YOUR ARE BLESSED!😇
Thanks, amazing project.
❤️❤️
I had to rewatch, the demo twice to grab what the project was.... The best project ever on youtube for free, many more appreciations and I bow for your efforts
I still don't get how you can make money from this one.
Can somebody explain?
I don't know what funnels and pipelines are.
Of course I admit that from a technical perspective this is wonderful.
i am not too knowledgeable about software business but I think funnels are the capture of potential customers information and pipelines are once you have customers how to reach revenue targets step by step gradually for long term basically the maximum growth you can get to for your niche software thats what i think it means if someone else knows they can chime in cheers @@stavroskefaleas6320
yes from a technical perspective it is outstanding but i don't really understand what we are building. I only understand the tech in it and will only watch to apply in my own software you might want to do same since no one is really explaining what the project is for.@@stavroskefaleas6320
hey have you completed this project? from the demo it sounds too complex. if you have completed, mind sharing your mail id here or something I can connect you with.
Is this the craziest thing I've seen on TH-cam? Ain't no way you gave this to us for free. Thank you and bless you mate.❤
Bros intro is better then whole TH-cam.. 🎉
greatest project ever build on youtube. thank you sir from bottom of heart.
Craziest tutorial on the entire planet. Absolutely MASSIVE! Kudos to your hardwork brother 👏 💯
This is awesome! Please keep it coming! Thank you so much for all effort put into to make this and share it freely to the web!
Thank you so much brother! Cant wait to provide you with more value ❤️
First time commenting on TH-cam. As a developer i have not seen cool tutorial as good as this.
Thank God I stayed up tonight to be able to see this 😮
Wow man..I'm from MENA and this thing cannot be found. All my gratitude and thanks go to you and I appreciate your work and effort
Oh Man 🤯🤯 you are the uncrowned king of SAAS development. I dont know why this channel has very less audience.
This channel deserves millions of subscribers.
Thanks to share this valueable knowledge to the community
Bhai kaha rehte ho ?
This is craziest, groundbreaking, tutorial I have ever seen. Unbelievable. I have never seen this comprehensive tutorial, I am shaking and crying at the same time 😂.
I'm lost in words man🥵...This is the so far the best tutorial i've ever seen on TH-cam and beyond that...Huge Thanks for you man❤.Keep crushing the algorithm🔥❤❤🔥
Man.. I'm lost of words.. You've raised the level of tech education.
You got my sub and support.
Keep it up dude 🙌
What is this? dang this is the first time I am lost in a demo! thanks for such a comprehensive and creative project. I am sure something like this does not exist on TH-cam yet. Joined the community
Cant wait to get you to success in your freelance journey brother!
@@webprodigies thanks 🙏
hey have you completed this project? from the demo it sounds too complex. if you have completed, mind sharing your mail id here or something I can connect you with.
@@ajzal_ Hey, have you started it, im planning to invest my time here but i have windows os so just confused if any compatibility issue arises which i fail to solve
@@Sanjaysview i have not yet, but please start. And you're not gonna face any issues just because you're using windows. Start and update your progress here
I have never commented on a course video on TH-cam before and I have never felt like donating before but I promise man when am done with this course and get my first tech job I'll not forget you
Finally the big day has arrived, I will always be grateful to you.
Thanks for being so patient brother!
hey have you completed this project? from the demo it sounds too complex. if you have completed, mind sharing your mail id here or something I can connect you with.
Wow, this is exactly what I've been searching for! 😱 The sheer beauty and power of this project, even in the demo, moved me. I might not be sure about completing the entire 16 hours, but I'm determined to give it a shot. I've been stuck in tutorial hell for nearly 3 years, but this project seems like it might just be the thing to teach me something truly amazing. Let's do this! 💪🚀
3 years seem like a lot lol. for me it's about 4 months but I started building my own project! and from time to time I use ChatGPT for help and come back to videos like this one on youtube for specific cases. I was surprised by the amount of skill i have gotten in only 4 months from zero literally zero coding skills.
Instant subscribe.
This tutorial goes absolutely all out.
You are doing amazing work, and thanks a lot for picking Clerk!
content you won’t find anywhere else! 🔥🔥
I got goosebumbs from watching that dermo i was so focused in the vid that i didnt even notice that 15 mins went by also m gonna complete this
The man, the legend does it again. One of the most real coding tutorial on YT!
TH-cam just recommended me and I can say this one is one of the best tutorial on internet so far.
🤯, just... 🤯. This is literally an entire enterprise software system from the business dashboard to client software to literal tools for even te software engineering team. And that all in one software.
You could just replace an entire software ecosystem with this one app.
This is absolutely insane.
Edit: also the fact this is only 16 hours for such a gigantically complex app. I mean, bro even made a full website builder in it and that's just 1 tiny piece of the whole thing. Really.. 🤯🤯
This is THE tutorial. Personally I like the approach where we write the code together more than copy and explaining it tho.
Damn, the concept of and level of details to this project looks complex. Excellent work, brother. Can’t wait to dig in.
hey have you completed this project? from the demo it sounds too complex. if you have completed, mind sharing your mail id here or something I can connect you with.
Interesting, I don't know about a website builder but I love the account levels and user access levels. I do a lot of volunteer work and often for any group. I'm working with, they end up needing a way to store their media, or create short URLs with metric tracking, or manages posts across their social media. I've been tossing the idea around of building each one of these tools but the part I've been stuck on is the account/organization management side of things.
I volunteer with organizations A, B, C, D and E. Luke is another volunteer and he volunteers with organizations A, B, and C, Matt volunteers with D and E. I think your account/user management is exactly what I was struggling to visualize.
Consider me subscribed! Great content!
what the hell is this! It is unthinkably the best web dev video ever.
16 hours 39 minutes watched. This video is an absolute goldmine of information.
@@DhvaniParghi not yet but I plan on getting it done
is this fully free the develop by watching this video without spending an single dollar
@ yes it’s fully developed for free
@ did you completed the full project ?
@@Legos-o7p yes
This is insane and to believe completely free. Thanks. I will start building it after my current project.
As someone trying to build a website builder for over 6 months, this was amazing my friend.
It’s people like you that I look up to be someday. Generosity of a kind king. Thank you sir 🙌
I learn by practicing, and I believe this to be one of the best hands on tutorials for aspiring devs like myself. Let's build a great community around this!
This is massive, and top quality content. Please keep it going 🎉
There are just infinite ways to make money today, even from mom's basement. Thanks for the tutorial, incredible work, really appreciate that.
Don't know how to express. The coolest project video I've seen ever. And, I'm gonna complete this at any cost. Thank you for this great work.
You know it's a good tutorial when you have a hard time understanding the demo
Lmfao same. I was like wtf is a funnel?
16 hrs * 10 = 160 hrs to follow the tutorial and another 30 hrs to understand each and everything
I just have no words to say
True. I'm a bit confused. Is that supposed to be a website builder AND a project management app at the SAME time? And why?
Okay Okay, This is freaking amazing you sir are indeed a prodigy.Learning Js , instantly signed up for the community after watching the intro.Thank you for this amazing tutorial
My opinion:
This course was not structured well. I mean it was very hard to follow on. You also copied and pasted all the schema at once instead of going feature by feature. In agency starter also you started making queries. I think this is a complex project and needed a little more planning.
My god. What an absolute beast of an tutorial project. THANK YOU. Trying to get out of tutorial hell and we all can learn so much from this!
Whaaat is this?! Can't believe such an in-depth tutorial is here on the youtube for free!!! :O After JS Mastery and Code with Antonio, this is the best channel I've found on such content. I'm def completing this project so your hard work is worth it. Won't disappoint!!!
Respect! 💟
hey have you completed this project? from the demo it sounds too complex. if you have completed, mind sharing your mail id here or something I can connect you with.
This is insane. How in the hell did you have time to build this as a tutorial? Beyond impressive. I’m definitely going to have to join your community. Mad respect.
hahah lot of hard work and sleepless night G! Glad it helped ❤️
I have no idea what purpose this serves. How does it help me?
People want to learn code. They might understand things but they can’t code. When seeing this video and code together with him, you can lean in both with brain and muscles memory. Make the leaners level up super fast. One video for 10 years experience.
I learned by this way. You should try.
Just code together with him. Does what he does. After you finished, I would love to hear your feeling.
hey man! so this project is actually building drag and drop website with more features? am i right?
or i wanna ask can i take this as my final year project????
That was one of the best intros! You have showed us exactly what we will get to create and that spikes up the interest level. Thank you for this amazing work!
Is this localized? I’m a citizen of a third world country in Africa
tbh I was procrastinating for almost few months and just playing games, you've just made me back to coding for real.
Can’t help but join other to express how amazing this project really is. Have been seeing projects here on YT but this is absolutely on another level. Thank you for an amazing job well done. God bless your soul.
You Just raised the bar to sky for Next JS tutorials Dude..Keep it up..Thanks for this Awesomeness
Bro just casually dropped priceless content for free and thought no one would notice I'm literally speechless you might wanna slow down before you take web dev courses out of business 😉
(thank you you've single handedly helped my web dev journey by a lot)
I am wondering why I had not discovered you earlier. This is pure gold!
i wasnt familiar with SAAS but you have really sparked my imagination....am looking forward to building this with you
Hello. I have no words, I do not understand English very well, as I am from Ukraine. But this project is beyond praise. I recently finished the full stack developer course. skills are very few, came across your project now and wanted to write for you and analyze every detail. thank you for your work
man , this is the most impressive tutorial i have ever seen
I have never seen a project of this magnitude. It's crazy. Thanks, buddy.
Благодарим ви!
this is crazy!!!!
A lot of valuable information in one video
Never seen anything like this before, Who gives away the entire inner workings of a brilliant product that has a huge demand in the market! This content being free feels illegal 😅
The way the into blew my mind👏😭. My man just fucking raised the bar on web development tutorials. This is insane🔥🔥🔥🔥🔥
Thank you so much!
Thank you for this amazing tutorial. I would like to ask if this project is open source and if we are allowed to modify it and use in our commercial/personal projects.
Thank you for recognizing my hard work! Yes please go for it.
thank you for this beautiful video, I'm starting the 16h, I'll come back once I've applied your course thank you again.
CONGO BRAZZAVILLE
the way you structure the whole web editor is amazing! I've learned so much from that thanks!
oh man, this is something else. Can't believe can someone make this much effort for a free TH-cam video!
You sir have posted the exact video I wanted to see for a while now. Down to the last small detail. I thank you from the bottom of my heart
Okay please explain to me the project in terms of user perspective what is the SAAS really doing
hey have you completed this project? from the demo it sounds too complex. if you have completed, mind sharing your mail id here or something I can connect you with.