Building a Trello clone with vueJS, Nuxtjs and Vuetify
In this video tutorial, we build a trello clone using Nuxt.js and Vuetify. We start by building authentication so that users can login and have seperate user accounts to manage their boards, lists and cards. Once logged in, you will be able to create boards, just like in trello. You can then select a board color, or background image if you want. We also create a dynamic route for our boards and create CRUD functionality for lists and cards to be added to our boards, all stored within each board object. All of this is stored in Firebase using firestore database and firebase storage. I try to explain the code as best as possible, however, the code examples and code repository can also be downloaded for free from the link above. This is meant to be a starting point from where you can extend this trello clone even further, and I am excited to see what everyone will build.
#Trello #Firebase #Nuxt.js #Tutorial #VueJS #Vuetify #Authentication
Chapters:
00:00 What we will build
02:14 Create a new nuxt application
04:35 Create sign in page
06:30 Sign in form
09:25 Create a Firebase account
11:28 Connect Firebase with our nuxt application
14:40 Sign in with email and password
16:20 Vuex store to keep track of user state
18:28 Sign out route
19:00 Middleware to redirect logged in users
20:55 Dashboard to view and create boards
38:25 Dynamic board routes with our board id
43:40 Layout to display board title and create list
47:32 Add and remove lists to our board
59:05 Add, edit and remove cards to our lists
1:17:00 Delete board
1:18:30 Conclusion
Suggest:
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Create Shopping basket page With Vuejs and Nodejs
☞ Javascript Project Tutorial: Budget App