Build and Deploy a Full Stack SaaS Trello Clone Using Nuxt JS 3, MongoDB, Tailwindcss, Stripe
#nuxtjs #saas #mongodb
In this video course, we're diving deep into building a Trello/Google Taskboard clone, a popular project management tool, using some of the most exciting technologies in web development today: Nuxt.js, MongoDB, Tailwind CSS, Stripe, and many more. This course is tailored for those who aspire to create scalable, efficient, and visually appealing SaaS applications.
✨ Need help? Contact Me: https://jahid.dev/contact
🔗 Useful Resources:
Discord for Problems or Error: https://jahid.dev/d
Twitter: https://jahid.dev/go/tt
GitHub Repository: https://github.com/jahidanowar/nuxt-t...
Live Website: https://nrello.vercel.app/
☁️ Other Deployment tutorials
Bare-Metal (With Dokku): • Deploying Nuxt 3 App to Digital Ocean...
Digital Ocean App Platform: • Deploy Nuxt 3 App on Digital Ocean Ap...
⏰ Chapters
00:00 Introduction
00:38 Project Demo
08:20 Project Setup
18:00 Authentication
01:46:00 Board Resource
02:46:00 List Resource
02:46:45 Building Dynamic Image Picker
02:57:58 Using Provide/Inject Vue Proeprty
03:45:00 Drag & Drop List feature
04:15:00 Card Resource
04:35:00 Card Drag & Drop to Move between lists
05:44:00 Adding SaaS Feature
05:47:20 Setup Stripe Product
05:50:00 Stripe CLI setup to test Webhooks locally
06:43:00 Creating Stripe Webhooks Listener in Nuxt
07:21:40 Fine-tuning
07:34:00 Deployment
👨💻 Who is this for?
This course is perfect for:
Developers looking to enhance their full-stack skills.
Anyone interested in building real-world web applications.
Learners curious about modern web technologies and SaaS development.
📄 Project Details
Nuxtrello is a full-stack web application inspired by Trello. This project is built using Nuxt 3, MongoDB, and Tailwind CSS, focusing on creating an efficient, user-friendly task management and organization tool.
👉 Topics
Introduction
Overview
Project Demo
Project Data model
Project Setup
Installing Nuxt 3
Adding Required Dependencies
Connecting to MongoDB
Creating basic layout
User Authentication
Creating User Model
Creating User API Routes
Creating User Authentication API Routes
Creating User Authentication Pages
Boards Resource
Creating Board Model
Creating Board API Routes
Creating Board Pages
Creating Image Picker Component
Lists Resource
Creating List Model
Creating List API Routes
Creating List Pages
Adding List Editor
Adding Drag and Drop Functionality
Card Resource
Creating Card Model
Creating Card API Routes
Creating Card Pages
Adding Rich Editor
Adding Drag and Drop Functionality
SaaS Features
Modify User Model for SaaS
Integrate Stripe
Create essential SaaS API endpoints
Create useSubscription composable
Design payment modals
Deployment
Deploying to Vercel/Netlify/Digital Ocean
⚙️ Technologies and Tools Used:
Nuxt.js 3
MongoDB
Tailwind CSS
Vue.js
Node.js
🙌 Stay Connected:
For more exciting content, tutorials, and updates, make sure to subscribe to our channel and hit the bell icon for notifications.
💬 Join the Conversation:
Got questions or feedback? Leave your comments below, and let's discuss! I'm here to help and interact with all of you.
👍 Support the Channel:
If you find this tutorial helpful, please like, share, and consider subscribing. Your support means a lot!
Смотрите видео Build and Deploy a Full Stack SaaS Trello Clone Using Nuxt JS 3, MongoDB, Tailwindcss, Stripe онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Jahid Anowar 23 Ноябрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 16,356 раз и оно понравилось 525 людям.