Скачать или смотреть 🌟 Day 40: Save Website Theme/Colors to Database in React & Next.js 🎨

Buy me a coffee: buymeacoffee.com/bartingyo

In this video, we connect our website builder app to a database to permanently store website theme/colors and enhance the sidebar with dynamic styles. 🚀 See how to save selected themes, create a styles model, and streamline your code with helper functions. 💻✨

🔹 What You’ll See:
💾 Database Integration: Set up a Styles model in Prisma to store color palettes with a 1:1 relationship to projects.
🎨 Persist Color Palettes: Save and retrieve palette data to maintain user selections after page refresh.
🛠️ Dynamic Sidebar Styling: Apply palette colors dynamically to the sidebar and pages.
🔄 Default Search Params: Add ?sidebar=pages as a default for better UX on project pages.
🧩 Code Refactoring: Create helper functions like mapPaletteToArray and mapPaletteToStyle for cleaner code.
🐛 Debugging & Fixes: Resolve type mismatches and ensure proper data mapping.
🌐 Prisma Setup: Use Prisma to manage schema updates, migrations, and data creation.

Video Timeline:

00:00:00 - Introduction and Feature Overview 💾
00:00:54 - Creating Styles Model in Prisma Schema 🗄️
00:03:11 - Establishing Model Relationship and Migration 🔗
00:04:20 - Seeding Styles with Project Creation 🌱
00:06:03 - Fetching Styles in Layout Component 📄
00:08:05 - Mapping Styles to Palette in StylesProvider 🔄
00:10:10 - Fixing Theme Type Consistency 🛠️
00:13:20 - Creating Styles on Project Creation ➕
00:16:08 - Adding Default Sidebar Search Parameter 🚪
00:18:15 - Implementing Style Update Functionality 💾
00:24:53 - Dynamically Updating Color Palette UI 🎨
00:26:10 - Refactoring with Helper Functions 🧹
00:33:06 - Final Testing and Commit ✅

🛠 Tools Used:
📋 Next.js
📋 TypeScript
📋 Tailwind CSS & ShadCN
📋 Prisma & Postgres

💬 Engage With Us!
❓ Got questions about the implementation? Ask below!
🐛 Found an issue? Help us improve by reporting it!
💡 Want to see more features? Suggest what we should build next!

🔔 Subscribe for more content:
   / @bartingyo