Vigyata.AI
Is this your channel?

React Router V7 FullStack CRUD Tutorial | Learn Routing, Loaders, Actions...

26.7K views· 763 likes· 59:06· Apr 8, 2025

🛍️ Products Mentioned (8)

In this video I will be teaching you all the basics of using React Router V7 as a framework. To do this, we are building a simple crud app that will teach you everything from Routing, Data Loading, Form Actions, and So On... 🩵 Want to learn ReactJS? Check out my ultimate React Course: https://courses.pedrotech.co/ 🌟 Support My Work: https://buymeacoffee.com/pedrow 📰 Join My Newsletter: https://www.pedrotech.co/newsletter 📖 Video Resources: Code Repo: https://github.com/machadop1407/React-Router-V7-CRUD-App 🚀 Courses & Tutorials: Learn ReactJS By Building 6 Projects: https://codedamn.com/learn/reactjs-projects GraphQL Course for Beginners: https://codedamn.com/learn/graphql-for-beginners 💻 Check out my Blog: https://www.pedrotech.co 🐤 Follow me on Twitter: (https://twitter.com/pedrotech_) 📸 Follow me on Instagram: (https://www.instagram.com/pedro.fmachado_/) 🧳 Follow me on Linkedin: (https://www.linkedin.com/in/pedrotech/) 👨‍💻 GitHub: https://github.com/machadop1407 📋 Business Email: pedro@pedrotech.co Timestamps: 00:00 Intro to Full Stack CRUD 02:07 Integrating Supabase for Data 03:06 Creating a Supabase Project 04:07 Installing Supabase Client 05:22 Understanding React Router Structure 06:14 Defining Routes for CRUD Operations 09:06 Creating the Items Page 10:35 Adding New Item Route 12:07 Building the Navbar Component 13:39 Styling the Application 15:06 Submitting Form Data with Actions 17:04 Handling Form Submissions 22:00 Adding Metadata for SEO 27:03 Displaying Items from Database 31:09 Creating Item Details Page 38:11 Implementing Edit and Delete Features 50:36 Final Touches and CSS 55:34 Conclusion and Next Steps

🎬 More from PedroTech