1. No idea how I got here. 2. Suddenly I thought I am in a different dimension in a good way. 3. A massive you thank you for your work, content, initiative and everything. Subscribed.
Hey everyone I might’ve skipped something in 2:55:00 please feel free to copy it from the git hub. Regardless im hangout in the discord voice channel helping everyone so ill see you all there ☺️ sorry about that. 11hr videos aint no joke to edit 😥Also if there is a little bit of a mix up, im there to help you as well so dw.
Dude, i wanted to say thank you very much for this fountain of knowledge and sharing this with everyone. You're a true samaritan. I've subscribed to your channel and shared it with my homies.
Thank you for believing in me. We are going to make it big and would love for you to be a part of this journey. And in return Ill provide more free value
This is so overwhelming man. The immense knowledge bundled in this 12 hrs is insane. It is going to take a while for me to actually understand each line of code, still great work man keep bringing stuffs like this.
I would like to note that the video was truly amazing and it was really entertaining to watch. For the next project, it'd be awesome if you guys could show how to maybe create a "Food Delivery App" with an ability to pay with cash/card, a driver app, and a restaurant app for restaurants to accept orders. Or maybe an ecommerce application for mobile devices, where people can list their stuff under many different categories, set a price, have a chat with the seller of the product and/or customers.
wow this Channel is the Best on RU-vid am so happy to be here am also a Computer Science student and am at my final year on Collage thanks so much u are really good teacher
Amazing. This is what I've been searching for for weeks! Realtime collaborative web applications. Please, in your next project make a Trello clone that can have images and videos uploaded to the cards and allows multiple users to see real time modifications, movements and creations of cards just like they see changes in this. Push notifications when tagging users to cards etc would be great. Integrating AI would be interesting to! Thank you so much 💥💥❤❤
Bro just woke up and chose to devour the careers of other web dev paid course gurus. Kudos to you, man! This is a little intimidating for guys like me who started web dev a few times before, to find out there’s a long way to go. But it still motivates me to push the limits and learn more and more.❤❤
Well, I'm regretting now for not discovering this channel sooner. :( But, finally, what a masterpiece. Can't imagine how you guys (all the teachers across YTverse) manage to put so much effort into these long yet super amazing learning resources for us. Can't imagine doing it myself! 😫 WE REALLY APPRECIATE YOUR CONTRIBUTION TO THE COMMUNITY! 🙇 ❤
Project settings in supabase are in settings -> API DATABASE_URL - you will find in supabase database with name as connection string To see changes in Supabase use - npm run push - And check table will appear on supabase If you're unable to add tables of stripe try to delete and recreate project in supabase, Also make sure to updates password and url in .env npm run pull - to pull changes from supabase to local schema npm run push - to push local schema changes to supabase cloud
Your Saas and Next.js tutorials are like a superhero team-up, where each lesson brings together the best strategies and techniques to tackle development challenges with the same unity and determination as the Avengers.
Great video ❤ But I'd like to add extra challenge to this tutorial which is to move some part of server side functionalities to a backend project like node js, etc.
2:50:56 Configuring default values for form inputs 2:55:03 Errors in field values and undefined 'title' 2:57:08 Setting up workspace schema and resolving errors 3:00:44 Setting up workspace and database entry in SaaS Notion Clone 3:02:40 Creating a sidebar component for the layout page. 3:06:57 Building logic for the sidebar component 3:09:19 Creating 'get folders' action 3:13:56 Creating the collaborators table for collaborating users and workspaces 3:16:13 Using npm run generate to generate SQL file 3:20:38 Fetching different types of workspaces for the same user 3:22:55 Setting up the sidebar for workspaces 3:27:18 Use effect to set workspaces if none exist 3:29:23 Addressing type error in workspaces and folder structure 3:33:18 Creating Realtime cursors with Superbase 3:35:26 Handling workspace navigation and rendering 3:39:41 Creating interactive functionality with real-time data updates. 3:41:32 Creating a custom dialogue trigger component 3:45:25 Building the workspace Creator component with permissions and user details 3:47:41 Setting up user context and subscription in Supabase 3:52:00 Implementing real-time data updates using Superbase 3:53:58 Creating components and functions in Nextjs 3:58:00 Setting up the permissions label and select component
Simply Awseome. This is the type of learning we deserve for our investments on RU-vid. It's time people stopped patronising lazy content creators and follow real LEGENDS...🎉
That project sounds super cool actually, will definitely follow it Also you might want to mention that it is somewhat of a notion clone since that might attract even more people.
Thanks you for this amazing work, and as you mentioned in the video, it would be fantastic to build an amazing hotel management system, including food ordering.
Please create one big full stack web application series by using microservices architecture and Nestjs , Nextjs , Drizzle ORM , React , AWS , Docker, AWS S3, Redis, RabbitQ ,kafka, Jest , PostgreSQL Tailwind, Shadcn, Next UI
@@asadmehboob1300 unfortunately majority of the viewers are trying to learn do not want to setup credit cards for any technology. I will include the other features that dont require credit cards! 🏆
bruh I normally don't comment but here i have too. I'm a full stack developer and I mostly prefer to work on the backend/server side but seeing you and codewithantonio putting tutorials like these makes me want to jump straight into this side too. I'm glad that you both are helping people with such amazing content. because in my journey of learning and landing a job, I've taken multiple courses from udemy/coursera of known content creators and not a single of them had projects like these. such amazing content♥🙌. keep growing
Great video, you got one more subscriber. Highly recommended to make a video on basics on React and nextjs which a beginner can follow along and use js not ts as of now later you introduce ts and other complex stuff.
Hey! oh mayn I don't even know where to start. But I had a lot of fun filming knowing that this is golden content and that you all are going to find it valuable. Lets connect ☺
I'm gonna say it like this, what the fu**. Mate this is insane! What a tutorial. I'm not even scared of taht 11h xD How can you remember all this stuff :p
Web Prodigies thank you for providing so much value,few things that I lack I am very new to web programming and I have 0 knowledge about the technology that you have used I know HTML,css and little bit of javascript so many things that you are teaching are going above my head 😅 so I need to take basics about web programming then I can watch this tutorial so that I can understand what you are teaching.If in future if you can teach us about the basics of web programming it would be great and again thank you for creating amazing tutorial.God speed to you bro ❤
Thank you for your recommendations! I suggest you try to build the app regardless from start to finish it gives you a taste of what different aspects of webdev feel like. And then you can choose which field to work in. Then start learning the technologies you need for each sector of web dev. I have a detailed breakdown in the discord if you need help.
4:00:15 Creating private and shared workspace options 4:04:05 Creating new workspace and handling permissions 4:06:14 Creating collaborators with Superbase queries 4:10:34 Creating a collaborator search component 4:12:39 Creating hooks for user access and collaboration functionality 4:16:27 Setting up collaborators and search feature 4:18:34 Creating a filter and mapping through the results 4:22:56 Display collaborators and set up scroll area for selected collaborators. 4:25:05 Creating UI components using DH Flex Gap, Avatar, Collaborator, and Button 4:29:07 Setting up a shared workspace and maintaining loading state 4:31:05 Creating private and shared workspaces with collaborators 4:34:57 Creating and managing workspaces and folders 4:37:03 Creating custom icons with SVG files 4:41:00 Custom SVGs used for hover animation 4:43:09 Creating a container to hold dropdown elements 4:47:09 Fixing timestamp and default value errors 4:49:13 Setting payload for folders and workspace ID 4:53:11 Addressing database connection error 4:55:02 Custom configuration for connection pooling in database. 4:58:45 Adding a folder to local states 5:00:37 Adding a folder to a workspace with payload set to workspace ID 5:04:21 Handling errors in the code 5:06:25 Creating and rendering new folders with linked data 5:10:23 Creating a complex dropdown component 5:12:23 Creating a superbase client and defining required functionalities 5:16:22 Setting up properties and functions for conditional rendering 5:18:16 Creating dynamic navigation based on accordion type 5:22:34 Conditional rendering for Emoji picker and API request handling. 5:24:28 Updating folder and workspace in SaaS Notion Clone with Realtime cursors 5:28:35 Setting type to partial folder for updating folder state 5:30:38 Updating a folder with new data 5:34:51 Creating folder title using useMemo hook 5:37:00 Creating State and File titles 5:41:03 Creating a handle for editing and updating data 5:43:17 Handling folder and file updates locally 5:47:43 Updating list type folder 5:50:05 Implementing functionality for the trash icon 5:54:14 Using clsx for styling in SaaS Notion clone 5:56:07 Realtime cursors and server updates 5:59:46 Special folder and file IDs are created
You are awesome. In the next app, build a custom payment form in the app that will communicate directly with stripe instead of redirecting to a stripe hosted page.
Picking up on this project was the worst decision I made in 2024 literally after every few steps there is an error no clear explanation to anything and thanks to the editors important part of coding is skipped literally Just advice for beginers don't fall for this project its is completely broken 😢 you have to fend everything on your own. Even the discord will not help
if somebody stuck in 2:55:09 and think he just quickly goes to another fram there is a missing part you have to create a bucket manually into supabase and have to create state route file from his githb after that you can follow the video from 2:58:26 .
1:12:22 Setting up authentication for the application 1:16:37 Creating a form schema and handling form submission in the SaaS Notion Clone 1:18:58 Setting up navigation and styling for the website. 1:23:16 Creating a reusable template component 1:25:23 Creating a loading spinner and modifying global buttons 1:30:03 Creating server actions for login 1:32:31 Configuring server actions for SaaS Notion Clone 1:36:40 Creating client components, fixing styling, and installing navigation menu from Shaden UI. 1:38:50 Setting path and class name for navigation menu content 1:43:33 Creating and styling components with specific class names 1:46:00 Changing IDS to pricing 1:50:57 Creating login and sign up buttons with links 1:53:14 Creating form schema for sign up with Zod 1:58:02 Setting up form and schema for signup process 2:00:12 Setting up form fields and event handlers 2:04:50 Adding form fields and button for account creation 2:06:55 Adding and configuring the alert component 2:11:42 Setting up email redirect link for user verification. 2:13:55 Setting up server-side code with Next.js and Superbase 2:18:09 Debugging and fixing form errors 2:20:13 Creating folder structure for dashboard and workspace ID 2:24:38 Handling URL errors and redirects in the application 2:27:04 Debugging a middleware TypeScript file placement issue 2:30:51 Checking and handling user workspaces 2:33:02 Creating Dashboard Setup Component 2:36:56 Generating and using types with Supabase 2:38:55 Creating types for files, products, customers, and subscriptions 2:42:52 Handling subscription errors and fixing component type 2:44:45 Creating a global Emoji picker component in TypeScript 2:48:51 Creating a state for selected Emoji
Thanks for subscribing ! I am committed to providing value that is never been done on youtube before. Please do let us know what you havent seen so far and I will make it a point to get it done.
i can give you few ideas which i tried to find but never found on youtube.. gumroad saas clone.. maybe medium clone...(blogging) yeah both're clones but still they're not available in youtube to be honest like fully working ones @@webprodigies
hey buddy, can I do these video as a student who has no experience ? And can you give me a roadmap for learning all the skills you have learnt. btw great work
9:46:26 Creating interactive toolbar options with glass morphism effect 9:50:13 Setting up real-time setup for folders and workspaces 9:52:19 Setting up real-time feature with SaaS Notion Clone 9:56:08 Creating and populating a new file with Superbase 9:58:13 Handling file and folder existance and updating 10:02:09 Resolved routing issue and implemented real-time data subscription 10:04:06 Real-time database turned on for files, workspaces, and folders 10:07:54 Setting up the profile picture upload feature 10:10:05 Creating a subscription modal component 10:14:15 Handling subscription logic in app components 10:16:08 Setting up subscriptions and product access 10:20:01 Implementing subscription management and buttons 10:21:57 Implementing subscription plans and restrictions 10:25:29 Setting up Stripe for local testing 10:27:07 Setting up Stripe and dependencies 10:31:28 Using DB to insert and update product data with real-time sync 10:33:34 Setting up pricing and inserting data into the database 10:37:54 Creating and copying billing details for a new customer using Stripe 10:40:18 Managing subscription status change 10:44:57 Debugging and fixing TypeScript error 10:46:57 Updating subscription data and inserting into database 10:51:46 Creating a post request using fetch and setting up API endpoints 10:54:02 Creating a payment session with various settings 10:58:13 Creating a webhook for handling Stripe events 11:00:13 Implementing event handling and data management for various events 11:04:29 Setting up and testing the web hook and product catalog 11:06:30 Updating products via Stripe account 11:10:21 Fetching active products using async function and error handling 11:12:22 Adding functionality for product prices and intervals 11:16:17 Checkout process and subscription confirmation 11:18:11 Setting up portal loading and error handling 11:22:10 Filter and retrieve folders in trash 11:24:23 Setting up a link with folder ID and key 11:28:42 Demonstration of folder and file restoration functionality 11:30:22 Deploying the application using Railway and GitHub 11:34:00 Updating environment variables and deploying the application 11:35:49 Deployed application showcasing real-time collaboration and functionality. 11:39:26 Superbase offers AI to provide information and help with queries and RO level policies. 11:41:08 Interactive application building on RU-vid
Thank you very much for your work, but I noticed that a lot of the explanations in the code were omitted, which is not conducive to our understanding of the application architecture. Of course, I know that if you finish explaining it all, it may take more time, but this way of explanation increases the difficulty of completing the project. The last question is that the second half of the video has no translation into other languages and can only be used in English, which is also a problem.
6:01:33 Creating real-time file and folder updates 6:05:19 Explanation of the add file action function 6:07:06 Adding a file to the workspace 6:10:40 Creating and using a custom file ID 6:12:35 Updating the file and folder titles locally 6:16:38 Handling folder and file IDs in the code 6:18:45 Updating the file locally and saving it in the database. 6:22:38 Creating an async function to get files based on workspace and folder IDs. 6:24:25 Dispatching data to store and setting files 6:28:13 Implementing subscription model and delete feature 6:30:15 Using Supabase user and saving user metadata 6:34:30 Handling folder and file deletions with error handling 6:36:32 Explaining the process of updating and deleting files and folders in the application 6:40:20 Creating settings component for SaaS app 6:42:31 Customizing the settings form and initializing state for various functionalities. 6:46:49 Managing API requests and loading states in our application 6:49:04 Setting up portal for collaborators and payment 6:53:13 Updating workspace ID and title 6:55:30 Different method for revalidating a path in a server 6:59:39 Updating workspace logo and working with permissions 7:01:28 Handling subscription status and managing collaborators 7:05:21 Creating a function to delete a workspace and route users to the dashboard
