Vigyata.AI
Is this your channel?

I Built a Full Stack Splitwise Clone ONLY using AI, Here's How

9.4K views· 257 likes· 125:48· Oct 1, 2024

🛍️ Products Mentioned (10)

Build a SplitWise clone app without writing a single line of code yourself but using AI to do it. We'll be using Galileo AI, Claude AI and Cursor AI to build the SPlitwise clone app. This app allows you to split expenses with your friends. Built with Galileo AI, Claude AI and Cursor AI and Next.js 14 App Router, Clerk for Authentication, React, NeonDb for database management, ShadCN UI library for components, TypeScript, and TailwindCSS. Utilizing Cursor AI, Claude AI and Galileo AI. 🌟 Be sure to checkout Clerk here: https://go.clerk.com/5qOWrFA Hey there! What do you think of the title and thumbnail of this video? Do you have any feedback on this? Trying to get better at packaging 👩‍💻 Github Source Code: https://github.com/kulkarniankita/splitwise-clone-app-ai 🚀 Free cheatsheet with all the prompts and links: https://bit.ly/splitai 👉 Join the Next.js Course Waitlist: https://bit.ly/nextjscourse 🔥 FREE Course on Next.js Hot Tips: https://bit.ly/nextjshottips Discord for questions/help from others: https://discord.gg/eaRWP2XV9s Key features: - 🌐 Next.js 14 App Router & Server Actions - 🔐 Authentication with Clerk (Passkeys, Github, and Google Sign-in) - 👥 Create and manage groups for expense sharing - 💰 Add and track expenses within groups - 🧮 Automatic expense splitting and balance calculation - 📊 View balances and settle up with group members - 💅 TailwindCSS for styling - 📱 Responsive design for mobile and desktop - 🎨 Beautiful UI components with ShadCN UI library - 💾 NeonDb for efficient database management - 📜 TypeScript for enhanced type safety - 💅 TailwindCSS for flexible and responsive styling - 🔔 Toast notifications for user feedback - 🚀 Deployment-ready - 🛬 Landing page 🛬 - 🚀 Deployment ready #nextjs #react #javascript #ai #typescript #cursorai ⏰ Timeline 00:00 - 00:59 What will you learn? 1:00 - 1:20 Cheatsheet with Github Source Code 1:21 - 7:21 App Demo 7:22 - 8:19 My Upcoming Next.js Course 8:20 - 17:01 Tech Stack 17:02 - 20:08 Build the Mockups for the app using Galileo AI (Text to Design) 20:09 - 24:38 Convert Mockups into Components with Claude AI (Design to Components) 24:39 - 28:30 Integrating Cursor AI and Setup Next.js Project 28:31 - 31:36 Cursor AI Walkthrough 31:37 - 42:52 Build the Beautiful Landing Page 42:53 - 48:00 Authentication Layer with Clerk 48:01 - 57:35 Building the Authentication in the app 57:36 - 1:03:44 Creating a Group Page functionality 1:03:45 - 1:10:49 Creating Groups Page with Clerk Organizations 1:10:50 - 1:16:40 Individual Group Page for Balances and Expenses 1:16:41 - 1:22:26 Adding Expenses with Split 1:22:27 - 1:42:58 Storing Expenses in the Database 1:42:59 - 1:49:12 List Your Groups for the User 1:49:13 - 2:01:51 Building the Group Page for Balances and Expenses 2:01:52 - 2:02:44 Deleting Expenses 2:02:45 - 2:05:00 Role Based Authentication Implementation 2:05:01 - Next Steps 🙏 How to Support this channel One way to thank me is to Buy me a coffee: https://buymeacoffee.com/kulkarniankita 🔗 RESOURCES: 💌 Frontend Newsletter: Frontend Snacks 🍿 https://bit.ly/fesnacks If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else. ✨ FREE Goodies: https://kulkarniankita.com/goodies ☎️ Book a 1:1 coaching session with me Opened a few coaching calls, grab them before they are gone: https://bit.ly/30mins-coaching-with-a... 🐤 Find me here Twitter: / kulkarniankita9 LinkedIn: / kulkarniankita

🎬 More from Ankita Kulkarni