@@leonardoschwartzhypnosis But svelte has a very small eco system! Its fun though not gonna lie lol. Maybe sometime in the future I could make a video on svelt if yall want, but React Wins any day honestly speaking.
This project is really fun. Can you please share resources or research done by you just wanna explore things indepth. Thanks in advance. Really nice to find this channel with unique projects.
Your contents changed the whole game of dev tutorials video on YT. I can't believe this knowledge is offered for free. You are awesome 👌 👏. You deserve a medal. 🎉
I have never waited for a video like this in my lyf :), as a heavy user of Zapier i really wanted to see how it works under the hood, this is the greatest video men, to be honest your content in youtube is 100% better than paid courses that teach people how to create weather apps, cannt wait to see what you will build next 😆
It’s more easily possible today because part of the heavy lifting is done by high quality open source libs like react-flow and shadcn/ui. We are just connecting the pipes which can be work in itself. The challenges will be branching, looping, parallelism (if you support it), convergence… devils in the details. But it’s really cool how far you can get today using tools available to you. Props to @webprodigies
Key Takeaways for quick navigation: 00:00 Introduction to SAAS Automation Builder - Introduction to Fuzzy, a SAAS application for automating business processes. 02:07 Building the Application Interface - Utilizing various technologies including Bun, Next.js 14, and Tailwind CSS for building the application interface. 04:11 Automation Workflow and Features - Explanation of automation flow creation using drag-and-drop nodes. 05:17 Application Functionality and Settings - Description of connected accounts, billing page, and credit management within the application. 08:04 Development Setup and Tool Recommendations - Introduction to ScreenStudio for cursor animations in video demonstrations. 18:41 Building the Logo and Navbar Styling - Styling the logo and navbar for the application, 20:28 Customizing Fonts and Metadata - Changing fonts in Next.js and updating the project metadata, 22:37 Adding Interactive UI Elements - Integrating interactive UI components such as buttons and icons, 24:52 Updating Tailwind Configurations - Updating Tailwind CSS configurations to accommodate external UI libraries, 25:08 Implementing Hero Section with Gradient Background - Creating a hero section with a radial gradient background, - Implementing scroll animation components for visual effects, 32:40 Incorporating Client Logos with Moving Animation - Introducing client logos with a moving animation effect, 35:07 Creating Parallax Effect for Product Showcase - Implementing a parallax effect for showcasing products, 36:29 Adding Decorative Lamp Component - Introducing a decorative lamp component for visual appeal, 37:27 Building Sparkles Component - Building a Sparkles component using a pre-made UI component from Aity UI. 43:20 Creating Multiple Plan Cards - Building multiple plan cards for different subscription tiers. 49:44 Creating Dashboard and Layout Components - Establishing a layout component to wrap website content consistently. 43:20 Building Multiple Card Components - Creating multiple card components for different subscription plans. 46:06 Creating Layout Components - Creating a layout component to wrap all pages for consistent design. 49:44 Introduction to Making Money Online - Addressing common challenges in making money online. 56:44 Criteria for Participation - Criteria for joining the community, including mindset, engagement, belief in oneself, and readiness to learn. 57:54 Community Testimonials and Results - Testimonials from community members highlighting their experiences and successes. 01:02:15 Community Engagement and Gamification - Description of the gamified community structure and engagement incentives. 01:16:11 Setting up tooltip components and importing icons - Setting up tooltip components from Chakra UI. 01:21:19 Troubleshooting 404 errors and tooltip display issues - Identifying and resolving 404 errors for missing pages. 01:22:43 Adding separator components and custom icons - Installing and implementing separator components to create visual separation. 01:26:13 Building the info bar component and integrating dark mode toggle - Creating the info bar component for search functionality and support contact. 01:29:20 Implementing search functionality and additional tooltips - Adding a search bar component for user navigation. - Setting up environment variables for project configuration. 01:34:03 Creating Profile Form Component - Setting up a form component for user profile information. 01:42:07 Setting Up Database with Prisma - Installation and initialization of Prisma for database management. 01:49:08 Implementing Profile Picture Component - Development of a component for managing user profile pictures. 01:51:01 Setting up Uploadcare with Next.js - Setting up Uploadcare involves creating a project and following a guide. 01:55:00 Troubleshooting Uploadcare Component Integration - Addressing errors related to JSX type checking. 01:59:32 Setting up Clerk Authentication - Introduction to Clerk as a user management platform. 02:05:09 Configuring OAuth Consent Screen for Google Authentication - Creating OAuth consent screen credentials for Google authentication. 02:08:11 Setting up OAuth credentials for Clerk authentication - Setting up OAuth credentials in Clerk dashboard. 02:11:12 Implementing webhooks for user authentication in Clerk - Understanding the need for webhooks in user authentication. 02:12:51 Setting up Ngrok for local development - Introducing Ngrok as a tool for local development. 02:20:16 Creating sign-in and sign-up pages for Clerk authentication - Organizing project folder structure for Clerk authentication. 02:26:09 Debugging and resolving a 404 error: - Understanding the significance of a 404 error in API development. 02:28:57 Updating user settings and integrating with external services: - Modifying user profile settings by removing profile images and handling user updates. 02:37:29 Building the connections page and implementing connection cards: - Creating the structure for the connections page. 02:42:46 Building a UI Card Component: - Building a UI card component for displaying connections. 02:45:35 Testimonials and Introduction to Prodigy University: - Testimonials from individuals who found success through Prodigy University. 02:49:32 Setting Up Workflow Page and Workflow Button Component: - Setting up the workflow page and creating a default route. 03:00:13 Building Custom Model for Global Folder - Creating a custom model for a website builder. 03:01:23 Implementing Custom Modal Functionality - Defining props for a custom modal component. - Constructing a form component with title and subtitle props. 03:05:18 Integrating Modal Provider for Component Access - Fixing modal provider usage to resolve component access issue. 03:06:01 Building Card Component - Creating a card component for displaying workflow data. 03:09:17 Rendering Workflow Components - Setting up workflow component rendering within a section tag. 03:17:20 Setting up a workflow editor in a SAAS application - Creating a workflow editor involves creating a specific workflow for users, allowing them to navigate through different states. 03:22:40 Understanding reducers and actions in state management - Reducers in React are functions that change states based on dispatched actions. 03:25:10 Implementing state management with useReducer and useContext - Utilizing the useReducer hook in React for managing complex state logic. 03:34:50 Setting up React Flow Editor - Setting up React Flow Editor for creating interactive diagrams. 03:37:06 Configuring Node Types and Handles - Defining node types and their corresponding components. 03:39:21 Completing Editor Card Component - Integrating card elements such as title, description, and logo. 03:52:13 Building a Node with Specific Attributes - Setting up a new node with specific attributes. 03:54:07 Implementing Drag and Drop Functionality 03:55:17 Managing Node Changes and Edges 03:57:42 Adding UI Controls and Enhancements 04:10:03 Debugging live on camera 04:12:33 Building missing functionality 04:22:06 Troubleshooting UI and component integration 04:27:54 Setting up content change handlers 04:29:05 Creating Google file details component 04:31:27 Templating Slack and Discord messages 04:45:25 Building User Connections 04:48:40 Automating Flow Instances 04:55:25 Finalizing Connections and Actions 05:03:09 Building Action Buttons for Different Services 05:13:10 Introduction to Prodigy University 05:17:19 Setting Up Authentication Endpoints 05:20:49 Notion Authentication Process 05:22:26 Slack Authentication Implementation 05:24:16 Setting Up Integration Apps 05:38:41 Setting up Discord authentication 05:43:57 Debugging Slack authentication issue 05:49:57 Connecting multiple platforms 05:56:26 Setting up listener and connections 05:59:55 Troubleshooting Slack integration 06:07:11 Debugging component library issue 06:14:51 Troubleshooting Database Connection 06:16:56 Setting Up Google Drive Listener 06:29:11 Configuring Workflow Actions 06:32:36 Setting up SAAS automation 06:39:49 Troubleshooting and resolving issues 06:46:38 Project completion and gratitude 06:51:12 Workflow Setup and Troubleshooting 06:54:09 Integrating Google Drive API 06:59:23 Problem Solving and Persistence 07:09:34 Setting up Stripe Checkout Session 07:13:27 Creating Credit Tracker Component 07:19:15 Understanding Stripe Product Setup 07:28:02 Changes in Application Configuration 07:29:42 Application State Management 07:30:10 Enhancing UI Components Made with HARPA AI
Bro you will be severely Hated by other youtubers for destroying their channel by this much HIGH QUALITY CONTENT! Bro keep doing and you will be the Biggest web development youtuber!!❤❤❤
Omg. I have never subbed any YT channel instantly like i did on yours with notification bell turned on. You're a beast man. What an amazing value. You're PapaYT
@@webprodigies This will be reallty great have a CRUD of db connections and a CRUD of features feature to list the rows, add/edit, remove items. But I know is not easy implement at all.
OMG, this guy's is a god, still trying to finish the plura project and you dropped this one, you are the GOAT(Greatest Of All Time) of project based youtube tutorials. And man!!! your intro, is always good. I have started pitching some of my ideas like that and my friends literally think I'm a good marketer.
I don't know why people are not raising this type of high quality and most needed content for web developers. This youtube channel will break internet 🥵🤯🤯
Key Takeaways for quick navigation: 00:00 Introduction to SAAS Automation Builder - Introduction to Fuzzy, a SAAS application for automating business processes. 02:07 Building the Application Interface - Utilizing various technologies including Bun, Next.js 14, and Tailwind CSS for building the application interface. 04:11 Automation Workflow and Features - Explanation of automation flow creation using drag-and-drop nodes. 05:17 Application Functionality and Settings - Description of connected accounts, billing page, and credit management within the application. 08:04 Development Setup and Tool Recommendations - Introduction to ScreenStudio for cursor animations in video demonstrations. 18:41 Building the Logo and Navbar Styling - Styling the logo and navbar for the application, 20:28 Customizing Fonts and Metadata - Changing fonts in Next.js and updating the project metadata, 22:37 Adding Interactive UI Elements - Integrating interactive UI components such as buttons and icons, 24:52 Updating Tailwind Configurations - Updating Tailwind CSS configurations to accommodate external UI libraries, 25:08 Implementing Hero Section with Gradient Background - Creating a hero section with a radial gradient background, - Implementing scroll animation components for visual effects, 32:40 Incorporating Client Logos with Moving Animation - Introducing client logos with a moving animation effect, 35:07 Creating Parallax Effect for Product Showcase - Implementing a parallax effect for showcasing products, 36:29 Adding Decorative Lamp Component - Introducing a decorative lamp component for visual appeal, 37:27 Building Sparkles Component - Building a Sparkles component using a pre-made UI component from Aity UI. 43:20 Creating Multiple Plan Cards - Building multiple plan cards for different subscription tiers. 49:44 Creating Dashboard and Layout Components - Establishing a layout component to wrap website content consistently. 43:20 Building Multiple Card Components - Creating multiple card components for different subscription plans. 46:06 Creating Layout Components - Creating a layout component to wrap all pages for consistent design. 49:44 Introduction to Making Money Online - Addressing common challenges in making money online. 56:44 Criteria for Participation - Criteria for joining the community, including mindset, engagement, belief in oneself, and readiness to learn. 57:54 Community Testimonials and Results - Testimonials from community members highlighting their experiences and successes. 01:02:15 Community Engagement and Gamification - Description of the gamified community structure and engagement incentives. 01:16:11 Setting up tooltip components and importing icons - Setting up tooltip components from Chakra UI. 01:21:19 Troubleshooting 404 errors and tooltip display issues - Identifying and resolving 404 errors for missing pages. 01:22:43 Adding separator components and custom icons - Installing and implementing separator components to create visual separation. 01:26:13 Building the info bar component and integrating dark mode toggle - Creating the info bar component for search functionality and support contact. 01:29:20 Implementing search functionality and additional tooltips - Adding a search bar component for user navigation. - Setting up environment variables for project configuration. 01:34:03 Creating Profile Form Component - Setting up a form component for user profile information. 01:42:07 Setting Up Database with Prisma - Installation and initialization of Prisma for database management. 01:49:08 Implementing Profile Picture Component - Development of a component for managing user profile pictures. 01:51:01 Setting up Uploadcare with Next.js - Setting up Uploadcare involves creating a project and following a guide. 01:55:00 Troubleshooting Uploadcare Component Integration - Addressing errors related to JSX type checking. 01:59:32 Setting up Clerk Authentication - Introduction to Clerk as a user management platform. 02:05:09 Configuring OAuth Consent Screen for Google Authentication - Creating OAuth consent screen credentials for Google authentication. 02:08:11 Setting up OAuth credentials for Clerk authentication - Setting up OAuth credentials in Clerk dashboard. 02:11:12 Implementing webhooks for user authentication in Clerk - Understanding the need for webhooks in user authentication. 02:12:51 Setting up Ngrok for local development - Introducing Ngrok as a tool for local development. 02:20:16 Creating sign-in and sign-up pages for Clerk authentication - Organizing project folder structure for Clerk authentication. 02:26:09 Debugging and resolving a 404 error: - Understanding the significance of a 404 error in API development. 02:28:57 Updating user settings and integrating with external services: - Modifying user profile settings by removing profile images and handling user updates. 02:37:29 Building the connections page and implementing connection cards: - Creating the structure for the connections page. 02:42:46 Building a UI Card Component: - Building a UI card component for displaying connections. 02:45:35 Testimonials and Introduction to Prodigy University: - Testimonials from individuals who found success through Prodigy University. 02:49:32 Setting Up Workflow Page and Workflow Button Component: - Setting up the workflow page and creating a default route. 03:00:13 Building Custom Model for Global Folder - Creating a custom model for a website builder. 03:01:23 Implementing Custom Modal Functionality - Defining props for a custom modal component. - Constructing a form component with title and subtitle props. 03:05:18 Integrating Modal Provider for Component Access - Fixing modal provider usage to resolve component access issue. 03:06:01 Building Card Component - Creating a card component for displaying workflow data. 03:09:17 Rendering Workflow Components - Setting up workflow component rendering within a section tag. 03:17:20 Setting up a workflow editor in a SAAS application - Creating a workflow editor involves creating a specific workflow for users, allowing them to navigate through different states. 03:22:40 Understanding reducers and actions in state management - Reducers in React are functions that change states based on dispatched actions. 03:25:10 Implementing state management with useReducer and useContext - Utilizing the useReducer hook in React for managing complex state logic. 03:34:50 Setting up React Flow Editor - Setting up React Flow Editor for creating interactive diagrams. 03:37:06 Configuring Node Types and Handles - Defining node types and their corresponding components. 03:39:21 Completing Editor Card Component - Integrating card elements such as title, description, and logo. 03:52:13 Building a Node with Specific Attributes - Setting up a new node with specific attributes. 03:54:07 Implementing Drag and Drop Functionality 03:55:17 Managing Node Changes and Edges 03:57:42 Adding UI Controls and Enhancements 04:10:03 Debugging live on camera 04:12:33 Building missing functionality 04:22:06 Troubleshooting UI and component integration 04:27:54 Setting up content change handlers 04:29:05 Creating Google file details component 04:31:27 Templating Slack and Discord messages 04:45:25 Building User Connections 04:48:40 Automating Flow Instances 04:55:25 Finalizing Connections and Actions 05:03:09 Building Action Buttons for Different Services 05:13:10 Introduction to Prodigy University 05:17:19 Setting Up Authentication Endpoints 05:20:49 Notion Authentication Process 05:22:26 Slack Authentication Implementation 05:24:16 Setting Up Integration Apps 05:38:41 Setting up Discord authentication 05:43:57 Debugging Slack authentication issue 05:49:57 Connecting multiple platforms 05:56:26 Setting up listener and connections 05:59:55 Troubleshooting Slack integration 06:07:11 Debugging component library issue 06:14:51 Troubleshooting Database Connection 06:16:56 Setting Up Google Drive Listener 06:29:11 Configuring Workflow Actions 06:32:36 Setting up SAAS automation 06:39:49 Troubleshooting and resolving issues 06:46:38 Project completion and gratitude 06:51:12 Workflow Setup and Troubleshooting 06:54:09 Integrating Google Drive API 06:59:23 Problem Solving and Persistence 07:09:34 Setting up Stripe Checkout Session 07:13:27 Creating Credit Tracker Component 07:19:15 Understanding Stripe Product Setup 07:28:02 Changes in Application Configuration 07:29:42 Application State Management 07:30:10 Enhancing UI Components
I saw a 7hr video an subscribed cause 😂 i know bro cooks i looked every video is like 11hrs who pumps out content like this that’s how you know your bringing value
I swear to God, I could literally binge-watch your videos for years without getting bored. They're a gold mine for young devs like us who don't know where to go or who to look up to. You not only provide explanations of your logic but also show us debugging, your failures, and errors too, which is incredible. In the end, I have one thing to say: your content is unparalleled and exceptionally better than 99% of devs out there on UA-cam 🙌🏻
Thank you so much. I haven't written the code yet. Instead I made some notes and diagrams to understand the complex parts of the application. (Note: I am already comfortable with tech stack). I will not create the application, instead i will try to find an use case where I can use the automation concept and build that application. This codebase will act as a great resource for building future applications.
This course was phenomenal, it's crazy that in only 8 hours (or so) we was able to get up and run an amazing website, besides that, i think you have a lot to improve when it comes to teaching, there's no diagrams to explain what's goin on, sometimes it feels that you're just copying and pasting code everywhere until we see something in the screen, i don't know if the more detail explanation is dedicated to premium users on your community or something like that, but there's a lot of room to improve when it comes to teaching and explaining, diagrams, a specific path to build the code, the architecture behind the workflows for example, this course for a beginner or even intermediate developer will be hard to understand.
Watching your Saas and Next.js tutorials is like experiencing a cinematic marvel, where every frame is meticulously crafted with precision and expertise, leaving viewers in awe of your mastery.
The people are talking blah blah blah about AAA and SMMA and never reveal the secret and my man revealed the most secret things of the web development ❤ you are true prodigy brother 🎉 Love your content. Gbuh
I greatly benefited from your video! I simply wanted to convey my appreciation for your help and guidance. The assistance and insights you offered were truly invaluable to me. Thanks once more!
After that SaaS Next.js Landing Page Builder project (that I still need to finish), I thought that would take like months for something that high quality to pop again. I was wrong. You rock man!
this is super amazing!! you are revolutionalizing the web development by providing so much value through your action driven content, really glad i found you, thanks a lot ❤
Yes! Thats exactly what Web Prodigies created. A new series of education, action driven content! In Prodigies University we do Action Driven Mentorship. Imagine what that would feel like...
Your content has been a guiding light in my learning journey, and for that, I am immensely grateful. Each video I watch is a treasure trove of knowledge, and I can't thank you enough for sharing your expertise. Your dedication to delivering high-quality content is truly admirable. I kindly request that you consider creating content focusing on full-stack AI agents, such as Chat GPT Store or an AI software engineer like Devin, utilizing tools like OpenAI, CrewAI, and open interpreter. This would be incredibly beneficial for individuals like me who aspire to delve deeper into the realm of AI development. Such content would not only broaden our understanding but also provide practical insights into building sophisticated AI applications. Once again, thank you for your exceptional content, and I eagerly anticipate the possibility of exploring the world of AI through your expert guidance.
you are the god of code, i really mean it, not only this video, a lots of very , hmmm i have no words to tell that how good you are, thank you for everything and , as i am a born Buddhist - I believe sharing the knowledge is the best way that you are going to be the best of the best guru, so I am so blessed to even meet you and see your videos, which sometimes I feel like crazy, because you are the most intelligent person and very kind heated as well. If you do ask me any help, I will do it for free, I do not want money, But I am learning from you. so i do not even think that you will need my help. nice and a very kind heart person that you are, so you are going to the heaven my dear nice teacher. love you. and thank you. :)
i'm was currenlty working on a same project and i was so worried could not found any content related to automation workflow on internet , thank you so much for the video, deff will help a lot W man keep it up
Here's a tip for using the useState hook efficiently: When you write a variable name in lowercase and hit the tab key, it will automatically convert it to camelCase and shift the cursor to the state’s initial value. For example, if you start with const [firstName, setfirstName] = useState(""), pressing tab will change it to const [firstName, setFirstName] = useState("") and move the cursor to the initial value.
My Man you are the GOAT, your a life saver, i've been looking for this exact library for months, luckily stumbled upon your video and made my day, my search for node based UI component stopped at d3 nodes, grateful, thanks man, keep up the good work, subscribed!!
sir you are like codewithantonio, all of your content is a premium ❤ you two are so amazing every student here will be overrated 😅 because of you two we can expand our knowledge about programming we can be a full stack developer ☺️
Using kebab-case, type :any, half of this tutorial is copy-paste where you dont go into any depth. Look man, this is a great copy-paste project that any person could do, but considering you're doing this as part of "teaching", it just doesn't work. You need to EXPLAIN. WHY do you use those classnames, functions etc. Not just "look guys, just read and write what is said here and it'll be good". No one is gonna learn that way.
Awesome video! Suggestion: it would be really cool if in your next tutorial, you could show us how to make a fintech application with card reader and etc.
what a project!!! Congratulations and thank you for making it available to us. I would like to ask, please, if you have subtitles with translation in the video configuration, I am not getting subtitles in Portuguese
Join Prodigies University today! Price increasing next month 👉🏻 webprodigies.com/?
My English listening ability is average and my reading ability is okay. I currently lack listening ability. Can I study?😮
why the Prisma & Neon not storing any data ? I tried multiple time but failed.Please suggest some ideas regard this .
If the projects were built in sveltekit I'd joined in a heartbeat. Love what you're doing, but I cannot tolerate react.
@@leonardoschwartzhypnosis But svelte has a very small eco system! Its fun though not gonna lie lol.
Maybe sometime in the future I could make a video on svelt if yall want, but React Wins any day honestly speaking.
This project is really fun. Can you please share resources or research done by you just wanna explore things indepth.
Thanks in advance. Really nice to find this channel with unique projects.
My man straight up teaching how to build an empire 😭 Excellent dedication, respect 🔥
This is breaking the internet. UA-cam is not ready for this type of quality content.
Then you are living in the year early 2000 my friend. 2024 is the start of thr Golden Years
@@MyDigitalHub UA-cam launched in 2004
A very little contribution. Thank you!♥💚💙💜💛❤
Thank yooouuuuu😍
🚀 This build is incredible Perrin! My jaw dropped at the polished result. This is better than most SaaS products out there today!
Thank you frank! Definitely getting a subway sandwich 👏🏻👏🏻
The things you put out there, really are exactly the tutorials I'm looking for. Thanks!😀
Thank you so much! ❤
Your contents changed the whole game of dev tutorials video on YT. I can't believe this knowledge is offered for free. You are awesome 👌 👏. You deserve a medal. 🎉
I've been using youtube for the last 16 years, and this is the first time I have happily subscribed to a channel willingly! Great Content. Thanks!!!!
Thanks G! 😉
I have never waited for a video like this in my lyf :), as a heavy user of Zapier i really wanted to see how it works under the hood, this is the greatest video men, to be honest your content in youtube is 100% better than paid courses that teach people how to create weather apps, cannt wait to see what you will build next 😆
hahah Im trying brother. It may not be the best clone but I gave it my best shot.
It’s more easily possible today because part of the heavy lifting is done by high quality open source libs like react-flow and shadcn/ui. We are just connecting the pipes which can be work in itself. The challenges will be branching, looping, parallelism (if you support it), convergence… devils in the details. But it’s really cool how far you can get today using tools available to you. Props to @webprodigies
@@TwoLeggedTriceratops can suggest resources or keyterms to learn about these and their use caes
Key Takeaways for quick navigation:
00:00 Introduction to SAAS Automation Builder
- Introduction to Fuzzy, a SAAS application for automating business processes.
02:07 Building the Application Interface
- Utilizing various technologies including Bun, Next.js 14, and Tailwind CSS for building the application interface.
04:11 Automation Workflow and Features
- Explanation of automation flow creation using drag-and-drop nodes.
05:17 Application Functionality and Settings
- Description of connected accounts, billing page, and credit management within the application.
08:04 Development Setup and Tool Recommendations
- Introduction to ScreenStudio for cursor animations in video demonstrations.
18:41 Building the Logo and Navbar Styling
- Styling the logo and navbar for the application,
20:28 Customizing Fonts and Metadata
- Changing fonts in Next.js and updating the project metadata,
22:37 Adding Interactive UI Elements
- Integrating interactive UI components such as buttons and icons,
24:52 Updating Tailwind Configurations
- Updating Tailwind CSS configurations to accommodate external UI libraries,
25:08 Implementing Hero Section with Gradient Background
- Creating a hero section with a radial gradient background,
- Implementing scroll animation components for visual effects,
32:40 Incorporating Client Logos with Moving Animation
- Introducing client logos with a moving animation effect,
35:07 Creating Parallax Effect for Product Showcase
- Implementing a parallax effect for showcasing products,
36:29 Adding Decorative Lamp Component
- Introducing a decorative lamp component for visual appeal,
37:27 Building Sparkles Component
- Building a Sparkles component using a pre-made UI component from Aity UI.
43:20 Creating Multiple Plan Cards
- Building multiple plan cards for different subscription tiers.
49:44 Creating Dashboard and Layout Components
- Establishing a layout component to wrap website content consistently.
43:20 Building Multiple Card Components
- Creating multiple card components for different subscription plans.
46:06 Creating Layout Components
- Creating a layout component to wrap all pages for consistent design.
49:44 Introduction to Making Money Online
- Addressing common challenges in making money online.
56:44 Criteria for Participation
- Criteria for joining the community, including mindset, engagement, belief in oneself, and readiness to learn.
57:54 Community Testimonials and Results
- Testimonials from community members highlighting their experiences and successes.
01:02:15 Community Engagement and Gamification
- Description of the gamified community structure and engagement incentives.
01:16:11 Setting up tooltip components and importing icons
- Setting up tooltip components from Chakra UI.
01:21:19 Troubleshooting 404 errors and tooltip display issues
- Identifying and resolving 404 errors for missing pages.
01:22:43 Adding separator components and custom icons
- Installing and implementing separator components to create visual separation.
01:26:13 Building the info bar component and integrating dark mode toggle
- Creating the info bar component for search functionality and support contact.
01:29:20 Implementing search functionality and additional tooltips
- Adding a search bar component for user navigation.
- Setting up environment variables for project configuration.
01:34:03 Creating Profile Form Component
- Setting up a form component for user profile information.
01:42:07 Setting Up Database with Prisma
- Installation and initialization of Prisma for database management.
01:49:08 Implementing Profile Picture Component
- Development of a component for managing user profile pictures.
01:51:01 Setting up Uploadcare with Next.js
- Setting up Uploadcare involves creating a project and following a guide.
01:55:00 Troubleshooting Uploadcare Component Integration
- Addressing errors related to JSX type checking.
01:59:32 Setting up Clerk Authentication
- Introduction to Clerk as a user management platform.
02:05:09 Configuring OAuth Consent Screen for Google Authentication
- Creating OAuth consent screen credentials for Google authentication.
02:08:11 Setting up OAuth credentials for Clerk authentication
- Setting up OAuth credentials in Clerk dashboard.
02:11:12 Implementing webhooks for user authentication in Clerk
- Understanding the need for webhooks in user authentication.
02:12:51 Setting up Ngrok for local development
- Introducing Ngrok as a tool for local development.
02:20:16 Creating sign-in and sign-up pages for Clerk authentication
- Organizing project folder structure for Clerk authentication.
02:26:09 Debugging and resolving a 404 error:
- Understanding the significance of a 404 error in API development.
02:28:57 Updating user settings and integrating with external services:
- Modifying user profile settings by removing profile images and handling user updates.
02:37:29 Building the connections page and implementing connection cards:
- Creating the structure for the connections page.
02:42:46 Building a UI Card Component:
- Building a UI card component for displaying connections.
02:45:35 Testimonials and Introduction to Prodigy University:
- Testimonials from individuals who found success through Prodigy University.
02:49:32 Setting Up Workflow Page and Workflow Button Component:
- Setting up the workflow page and creating a default route.
03:00:13 Building Custom Model for Global Folder
- Creating a custom model for a website builder.
03:01:23 Implementing Custom Modal Functionality
- Defining props for a custom modal component.
- Constructing a form component with title and subtitle props.
03:05:18 Integrating Modal Provider for Component Access
- Fixing modal provider usage to resolve component access issue.
03:06:01 Building Card Component
- Creating a card component for displaying workflow data.
03:09:17 Rendering Workflow Components
- Setting up workflow component rendering within a section tag.
03:17:20 Setting up a workflow editor in a SAAS application
- Creating a workflow editor involves creating a specific workflow for users, allowing them to navigate through different states.
03:22:40 Understanding reducers and actions in state management
- Reducers in React are functions that change states based on dispatched actions.
03:25:10 Implementing state management with useReducer and useContext
- Utilizing the useReducer hook in React for managing complex state logic.
03:34:50 Setting up React Flow Editor
- Setting up React Flow Editor for creating interactive diagrams.
03:37:06 Configuring Node Types and Handles
- Defining node types and their corresponding components.
03:39:21 Completing Editor Card Component
- Integrating card elements such as title, description, and logo.
03:52:13 Building a Node with Specific Attributes
- Setting up a new node with specific attributes.
03:54:07 Implementing Drag and Drop Functionality
03:55:17 Managing Node Changes and Edges
03:57:42 Adding UI Controls and Enhancements
04:10:03 Debugging live on camera
04:12:33 Building missing functionality
04:22:06 Troubleshooting UI and component integration
04:27:54 Setting up content change handlers
04:29:05 Creating Google file details component
04:31:27 Templating Slack and Discord messages
04:45:25 Building User Connections
04:48:40 Automating Flow Instances
04:55:25 Finalizing Connections and Actions
05:03:09 Building Action Buttons for Different Services
05:13:10 Introduction to Prodigy University
05:17:19 Setting Up Authentication Endpoints
05:20:49 Notion Authentication Process
05:22:26 Slack Authentication Implementation
05:24:16 Setting Up Integration Apps
05:38:41 Setting up Discord authentication
05:43:57 Debugging Slack authentication issue
05:49:57 Connecting multiple platforms
05:56:26 Setting up listener and connections
05:59:55 Troubleshooting Slack integration
06:07:11 Debugging component library issue
06:14:51 Troubleshooting Database Connection
06:16:56 Setting Up Google Drive Listener
06:29:11 Configuring Workflow Actions
06:32:36 Setting up SAAS automation
06:39:49 Troubleshooting and resolving issues
06:46:38 Project completion and gratitude
06:51:12 Workflow Setup and Troubleshooting
06:54:09 Integrating Google Drive API
06:59:23 Problem Solving and Persistence
07:09:34 Setting up Stripe Checkout Session
07:13:27 Creating Credit Tracker Component
07:19:15 Understanding Stripe Product Setup
07:28:02 Changes in Application Configuration
07:29:42 Application State Management
07:30:10 Enhancing UI Components
Made with HARPA AI
I don’t think your subscriber count justifies your content quality. You should get 1M subscribers this year
Best comment ever! ❤
sooner or later that gonna happen..! content quality is just of another level
This is literally 10 stars! If next will be the email marketing automation platform, then you guys know who's #1 on coding tutorials on UA-cam! 🎉
My guy is building projects that no one has ever done before on youtube 🙏🙏
Yet another banger! the UI looks incredible, can't wait for the next video!!!!
Bro you will be severely Hated by other youtubers for destroying their channel by this much HIGH QUALITY CONTENT! Bro keep doing and you will be the Biggest web development youtuber!!❤❤❤
Omg. I have never subbed any YT channel instantly like i did on yours with notification bell turned on.
You're a beast man. What an amazing value. You're PapaYT
Great tutorial!
Trust me. Being a newbie developer I learned a lot of things from your content. Waiting eagerly for more📚🙌🏻
Thanks Web Prodigies!
Thanks G!
Never have I subscribed so fast upon seeing a content!
Your content is awesome! Keep going!
Ps: If you teach how to create a SaaS NoCode app builder using Next.js will be nice 😊
Thank you!! Hmm interesting twist to the website builder🤔 however I do think security and the complexity of the project would be really high!! 😰
@webprodigies Let's go! I'm doing everything I can to bring the two projects together! What do you need? Take all my money! Plz 😂
@@webprodigies this Will be a game change !
@@webprodigies This will be reallty great have a CRUD of db connections and a CRUD of features feature to list the rows, add/edit, remove items. But I know is not easy implement at all.
OMG, this guy's is a god, still trying to finish the plura project and you dropped this one, you are the GOAT(Greatest Of All Time) of project based youtube tutorials. And man!!! your intro, is always good. I have started pitching some of my ideas like that and my friends literally think I'm a good marketer.
Thank you brother! means a lot
Repent
I don't know why people are not raising this type of high quality and most needed content for web developers. This youtube channel will break internet 🥵🤯🤯
Key Takeaways for quick navigation:
00:00 Introduction to SAAS Automation Builder
- Introduction to Fuzzy, a SAAS application for automating business processes.
02:07 Building the Application Interface
- Utilizing various technologies including Bun, Next.js 14, and Tailwind CSS for building the application interface.
04:11 Automation Workflow and Features
- Explanation of automation flow creation using drag-and-drop nodes.
05:17 Application Functionality and Settings
- Description of connected accounts, billing page, and credit management within the application.
08:04 Development Setup and Tool Recommendations
- Introduction to ScreenStudio for cursor animations in video demonstrations.
18:41 Building the Logo and Navbar Styling
- Styling the logo and navbar for the application,
20:28 Customizing Fonts and Metadata
- Changing fonts in Next.js and updating the project metadata,
22:37 Adding Interactive UI Elements
- Integrating interactive UI components such as buttons and icons,
24:52 Updating Tailwind Configurations
- Updating Tailwind CSS configurations to accommodate external UI libraries,
25:08 Implementing Hero Section with Gradient Background
- Creating a hero section with a radial gradient background,
- Implementing scroll animation components for visual effects,
32:40 Incorporating Client Logos with Moving Animation
- Introducing client logos with a moving animation effect,
35:07 Creating Parallax Effect for Product Showcase
- Implementing a parallax effect for showcasing products,
36:29 Adding Decorative Lamp Component
- Introducing a decorative lamp component for visual appeal,
37:27 Building Sparkles Component
- Building a Sparkles component using a pre-made UI component from Aity UI.
43:20 Creating Multiple Plan Cards
- Building multiple plan cards for different subscription tiers.
49:44 Creating Dashboard and Layout Components
- Establishing a layout component to wrap website content consistently.
43:20 Building Multiple Card Components
- Creating multiple card components for different subscription plans.
46:06 Creating Layout Components
- Creating a layout component to wrap all pages for consistent design.
49:44 Introduction to Making Money Online
- Addressing common challenges in making money online.
56:44 Criteria for Participation
- Criteria for joining the community, including mindset, engagement, belief in oneself, and readiness to learn.
57:54 Community Testimonials and Results
- Testimonials from community members highlighting their experiences and successes.
01:02:15 Community Engagement and Gamification
- Description of the gamified community structure and engagement incentives.
01:16:11 Setting up tooltip components and importing icons
- Setting up tooltip components from Chakra UI.
01:21:19 Troubleshooting 404 errors and tooltip display issues
- Identifying and resolving 404 errors for missing pages.
01:22:43 Adding separator components and custom icons
- Installing and implementing separator components to create visual separation.
01:26:13 Building the info bar component and integrating dark mode toggle
- Creating the info bar component for search functionality and support contact.
01:29:20 Implementing search functionality and additional tooltips
- Adding a search bar component for user navigation.
- Setting up environment variables for project configuration.
01:34:03 Creating Profile Form Component
- Setting up a form component for user profile information.
01:42:07 Setting Up Database with Prisma
- Installation and initialization of Prisma for database management.
01:49:08 Implementing Profile Picture Component
- Development of a component for managing user profile pictures.
01:51:01 Setting up Uploadcare with Next.js
- Setting up Uploadcare involves creating a project and following a guide.
01:55:00 Troubleshooting Uploadcare Component Integration
- Addressing errors related to JSX type checking.
01:59:32 Setting up Clerk Authentication
- Introduction to Clerk as a user management platform.
02:05:09 Configuring OAuth Consent Screen for Google Authentication
- Creating OAuth consent screen credentials for Google authentication.
02:08:11 Setting up OAuth credentials for Clerk authentication
- Setting up OAuth credentials in Clerk dashboard.
02:11:12 Implementing webhooks for user authentication in Clerk
- Understanding the need for webhooks in user authentication.
02:12:51 Setting up Ngrok for local development
- Introducing Ngrok as a tool for local development.
02:20:16 Creating sign-in and sign-up pages for Clerk authentication
- Organizing project folder structure for Clerk authentication.
02:26:09 Debugging and resolving a 404 error:
- Understanding the significance of a 404 error in API development.
02:28:57 Updating user settings and integrating with external services:
- Modifying user profile settings by removing profile images and handling user updates.
02:37:29 Building the connections page and implementing connection cards:
- Creating the structure for the connections page.
02:42:46 Building a UI Card Component:
- Building a UI card component for displaying connections.
02:45:35 Testimonials and Introduction to Prodigy University:
- Testimonials from individuals who found success through Prodigy University.
02:49:32 Setting Up Workflow Page and Workflow Button Component:
- Setting up the workflow page and creating a default route.
03:00:13 Building Custom Model for Global Folder
- Creating a custom model for a website builder.
03:01:23 Implementing Custom Modal Functionality
- Defining props for a custom modal component.
- Constructing a form component with title and subtitle props.
03:05:18 Integrating Modal Provider for Component Access
- Fixing modal provider usage to resolve component access issue.
03:06:01 Building Card Component
- Creating a card component for displaying workflow data.
03:09:17 Rendering Workflow Components
- Setting up workflow component rendering within a section tag.
03:17:20 Setting up a workflow editor in a SAAS application
- Creating a workflow editor involves creating a specific workflow for users, allowing them to navigate through different states.
03:22:40 Understanding reducers and actions in state management
- Reducers in React are functions that change states based on dispatched actions.
03:25:10 Implementing state management with useReducer and useContext
- Utilizing the useReducer hook in React for managing complex state logic.
03:34:50 Setting up React Flow Editor
- Setting up React Flow Editor for creating interactive diagrams.
03:37:06 Configuring Node Types and Handles
- Defining node types and their corresponding components.
03:39:21 Completing Editor Card Component
- Integrating card elements such as title, description, and logo.
03:52:13 Building a Node with Specific Attributes
- Setting up a new node with specific attributes.
03:54:07 Implementing Drag and Drop Functionality
03:55:17 Managing Node Changes and Edges
03:57:42 Adding UI Controls and Enhancements
04:10:03 Debugging live on camera
04:12:33 Building missing functionality
04:22:06 Troubleshooting UI and component integration
04:27:54 Setting up content change handlers
04:29:05 Creating Google file details component
04:31:27 Templating Slack and Discord messages
04:45:25 Building User Connections
04:48:40 Automating Flow Instances
04:55:25 Finalizing Connections and Actions
05:03:09 Building Action Buttons for Different Services
05:13:10 Introduction to Prodigy University
05:17:19 Setting Up Authentication Endpoints
05:20:49 Notion Authentication Process
05:22:26 Slack Authentication Implementation
05:24:16 Setting Up Integration Apps
05:38:41 Setting up Discord authentication
05:43:57 Debugging Slack authentication issue
05:49:57 Connecting multiple platforms
05:56:26 Setting up listener and connections
05:59:55 Troubleshooting Slack integration
06:07:11 Debugging component library issue
06:14:51 Troubleshooting Database Connection
06:16:56 Setting Up Google Drive Listener
06:29:11 Configuring Workflow Actions
06:32:36 Setting up SAAS automation
06:39:49 Troubleshooting and resolving issues
06:46:38 Project completion and gratitude
06:51:12 Workflow Setup and Troubleshooting
06:54:09 Integrating Google Drive API
06:59:23 Problem Solving and Persistence
07:09:34 Setting up Stripe Checkout Session
07:13:27 Creating Credit Tracker Component
07:19:15 Understanding Stripe Product Setup
07:28:02 Changes in Application Configuration
07:29:42 Application State Management
07:30:10 Enhancing UI Components
The most unique project i have seen in 3 years
I am very excited to start
The Roman god of Next js has returned.
Take a bow for the GOAT!!!!
Tooooooooo fired up for this project.. Hope I can finish this before the next one is out
I saw a 7hr video an subscribed cause 😂 i know bro cooks i looked every video is like 11hrs who pumps out content like this that’s how you know your bringing value
These contents are the best free content there is on the internet today. ♥♥
I swear to God, I could literally binge-watch your videos for years without getting bored. They're a gold mine for young devs like us who don't know where to go or who to look up to. You not only provide explanations of your logic but also show us debugging, your failures, and errors too, which is incredible. In the end, I have one thing to say: your content is unparalleled and exceptionally better than 99% of devs out there on UA-cam 🙌🏻
Thank you so much. I haven't written the code yet. Instead I made some notes and diagrams to understand the complex parts of the application. (Note: I am already comfortable with tech stack). I will not create the application, instead i will try to find an use case where I can use the automation concept and build that application. This codebase will act as a great resource for building future applications.
I love this channel and dedication to all the projects........never sell out keep helping our community to grow with complex projects like this 💌
The best tech channel for sure
Perfect for building a scalable, user-friendly SAAS. Thanks for the detailed walkthrough-can’t wait to see what’s next in this stack!
bro are u serious. you're the real mvp ! crazy how this is on yt for free. gods gift to mankind
This is so under rated. Thanks for the effort, instant subscribe!
The pause after "introducing.... Fuzzie" 😂 Golden. You're my new favorite creator and I barely started with your content 😍
1st video watched in your channel, I know my life is going to change from now!
This course was phenomenal, it's crazy that in only 8 hours (or so) we was able to get up and run an amazing website, besides that, i think you have a lot to improve when it comes to teaching, there's no diagrams to explain what's goin on, sometimes it feels that you're just copying and pasting code everywhere until we see something in the screen, i don't know if the more detail explanation is dedicated to premium users on your community or something like that, but there's a lot of room to improve when it comes to teaching and explaining, diagrams, a specific path to build the code, the architecture behind the workflows for example, this course for a beginner or even intermediate developer will be hard to understand.
As a beginner can I start this course ??😊
Watching your Saas and Next.js tutorials is like experiencing a cinematic marvel, where every frame is meticulously crafted with precision and expertise, leaving viewers in awe of your mastery.
I can't believe it's free 😮....Thank you so much brother ❤
The people are talking blah blah blah about AAA and SMMA and never reveal the secret and my man revealed the most secret things of the web development ❤ you are true prodigy brother 🎉 Love your content. Gbuh
This guy comes up with something different everytime. 😮😮😮🙏🙏🙏
You do really listen to your followers. I never thought you'd show us how to make such an app.
Congratulations, You earned a fan for the rest of your life. 🎉
Welcome back with new project. Thank you ❤❤
UA-cam is not ready for this type of quality content.
Damn, this is awesome! Thanks for using Aceternity UI :)
Respect to you Manu … you are the legend 💪
I have never seen your video before, but Man: the INTRO was stunning, You got a new subscriber :)
The best project i ever saw, by so far....
Wow this is mind blowing Sir. I love your content and the way you teach. Big thanks for this new video. You are the best. 💥💯😍🤩
Finally after the long wait the legend has returned!!❤❤
I greatly benefited from your video! I simply wanted to convey my appreciation for your help and guidance. The assistance and insights you offered were truly invaluable to me. Thanks once more!
After that SaaS Next.js Landing Page Builder project (that I still need to finish), I thought that would take like months for something that high quality to pop again.
I was wrong. You rock man!
you are the best person i ever seen on youtbe providng most premium projects and source code for free love from india... you are my teacher
this is super amazing!! you are revolutionalizing the web development by providing so much value through your action driven content, really glad i found you, thanks a lot ❤
Yes! Thats exactly what Web Prodigies created. A new series of education, action driven content! In Prodigies University we do Action Driven Mentorship. Imagine what that would feel like...
@webprodigies totally!! just recently joined the discord and it's the best community of people to be around 🫶
@webprodigies totally!! just recently joined the discord community it's the best you grow more u deserve more subs🫶
@@webprodigies hope u grow u really deserve a lot more subscribers 🫶
🧡
G! Thank you😍👏🏻
You just earned yourself a subscriber. Good job man!
Your content has been a guiding light in my learning journey, and for that, I am immensely grateful. Each video I watch is a treasure trove of knowledge, and I can't thank you enough for sharing your expertise. Your dedication to delivering high-quality content is truly admirable.
I kindly request that you consider creating content focusing on full-stack AI agents, such as Chat GPT Store or an AI software engineer like Devin, utilizing tools like OpenAI, CrewAI, and open interpreter. This would be incredibly beneficial for individuals like me who aspire to delve deeper into the realm of AI development. Such content would not only broaden our understanding but also provide practical insights into building sophisticated AI applications.
Once again, thank you for your exceptional content, and I eagerly anticipate the possibility of exploring the world of AI through your expert guidance.
you are the god of code, i really mean it, not only this video, a lots of very , hmmm i have no words to tell that how good you are, thank you for everything and , as i am a born Buddhist - I believe sharing the knowledge is the best way that you are going to be the best of the best guru, so I am so blessed to even meet you and see your videos, which sometimes I feel like crazy, because you are the most intelligent person and very kind heated as well. If you do ask me any help, I will do it for free, I do not want money, But I am learning from you. so i do not even think that you will need my help. nice and a very kind heart person that you are, so you are going to the heaven my dear nice teacher. love you. and thank you.
:)
i'm was currenlty working on a same project and i was so worried could not found any content related to automation workflow on internet , thank you so much for the video, deff will help a lot
W man
keep it up
Your effort deserve 1 mil sub bro!!!!
Love your work! I'm a complete newbie but my learning style is practical learning.
It helps me actually applying what I'm learning
This is the best course i already see in internet thanks for all
Speechless. Thanks legend for the great tutorial ❤❤❤
Thanks!
Thank you so much ❤️
You are a gem! Truely!
A million$ worth video
Absolute goat. Would love a tutorial on a Real Estate CRM 🙏🏼
Here's a tip for using the useState hook efficiently: When you write a variable name in lowercase and hit the tab key, it will automatically convert it to camelCase and shift the cursor to the state’s initial value. For example, if you start with const [firstName, setfirstName] = useState(""), pressing tab will change it to const [firstName, setFirstName] = useState("") and move the cursor to the initial value.
Getting better by the day 🏆👏🏻
Really shocked 😮
And waiting for next video
bro, fuckingggg love youu brooo. My degreee not event near this level!!!
loved the intro commercial feel haha! Superb video and project🙌
My Man you are the GOAT, your a life saver, i've been looking for this exact library for months, luckily stumbled upon your video and made my day, my search for node based UI component stopped at d3 nodes, grateful, thanks man, keep up the good work, subscribed!!
Subscribed. This is next level.
Another amazing one it looks like, cant wait to start this one, only one propblem, i started one of the other ones last week :D
sir you are like codewithantonio, all of your content is a premium ❤ you two are so amazing every student here will be overrated 😅 because of you two we can expand our knowledge about programming we can be a full stack developer ☺️
you have just earned a new subscriber. looking forward for more contents like this:)
Thanks Web Prodigies!
This is amazing. Can you do a project next with an embeddable ai chat for example something that you can embed and customize?
Content quality 🔥🔥🔥
very good content, amazing job man
Thanks for providing us this valuable course
Spotted a GOAT 🐐 on yt 💖
Wow this is huge!!!! Thank you
You have earned a new subscriber....Holy damn this is crazy brother ❤❤
I'm speechless... great work
Using kebab-case, type :any, half of this tutorial is copy-paste where you dont go into any depth. Look man, this is a great copy-paste project that any person could do, but considering you're doing this as part of "teaching", it just doesn't work. You need to EXPLAIN. WHY do you use those classnames, functions etc. Not just "look guys, just read and write what is said here and it'll be good". No one is gonna learn that way.
Skill issue
@@iq_prodigy you really thought you did something huh💀
@@666_ezio ohh if you can't understand it then you are highly inexperienced
@@666_ezio also there is a level of tutorial I mean they just can't teach you everything you should take some other easy courses before making this
would have definitely rejected his PR if this was pushed as production code.
Awesome video!
Suggestion: it would be really cool if in your next tutorial, you could show us how to make a fintech application with card reader and etc.
he always delivers 🔥
Your efforts are insane ❤
Finally ❤❤❤❤❤
I have to subscribe to you otherwise I'm gonna lose ALOT. Huge respect man❤
Thank you so much
I will get all knowledge this weekend
Thank you so much for sharing your experience and knowledge, Sir.
Watching a dev tutorial ❌
Watching a Hollywood's movie ✅
Great job on this type of tutorial, thanks for the video I learned a lot!!!!
what a project!!! Congratulations and thank you for making it available to us.
I would like to ask, please, if you have subtitles with translation in the video configuration, I am not getting subtitles in Portuguese
Absolute gem 💪
Never seen anything like this before on YT! Simply Excellent! Would love to see something like inkeep if possible