Add Task | Make Apps Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Vuetify 2: Create an App with Vue JS 2 & Vuex - in 5 Hours!

1: Introduction

Introduction (5:08)
What is Vuetify? (1:15)
Editor & Software Setup (5:36)

2: Getting Started

Install Node.js & Vue CLI (0:52)
Create a Vue Project & Add Vuetify (2:22)
Folder & File Structure (3:48)
Install Vue Devtools on Chrome (1:14)
Vue.js Basics (2:13)
Clean up the Project (0:29)

3: Layout, Pages & Routes

Start with a Wireframe (1:04)
Setup the Drawer (3:14)
Setup Pages & Routes (3:57)
Get Pages Ready (2:58)
Header Styles (2:40)
Replace Image & Title (2:05)
Finished Module Code

4: Todo Page

Create a List of Tasks (2:26)
Add a Data Property for the Tasks (3:45)
Mark Task as Done (6:55)
Delete Task (2:52)
Add Task (6:45)
No Tasks Fallback (5:00)
Finished Module Code

5: Vuex

What is Vuex? (6:06)
Move Tasks into Vuex Store (1:27)
Move addTask() Method into Vuex Store (4:59)
Move doneTask() Method into Vuex Store (1:24)
Move deleteTask() Method into Vuex Store (1:35)
Finished Module Code

6: Child Components

Why Use Child Components? (0:58)
Create Add Task Field Child Component (4:29)
Create Task List Child Component (1:42)
Create Task Child Component (3:19)
Create “No Tasks” Child Component (2:39)
Finished Module Code

7: Snackbars

Create a Snackbar Component (4:26)
Show Snackbar when Task Added (4:00)
Show Snackbar when Task Deleted (1:48)
Make the Snackbar Text Dynamic (2:11)
Allow Snackbars to be Shown in Quick Succession (3:11)
Allow Snackbar to be Dismissed (1:52)
Finished Module Code

8: Dialogs

Show a “Prompt to Delete” Dialog (3:47)
Customize Dialog and Show on Delete Click (2:32)
Delete the Task when “Yes” Button Clicked (2:06)
Close the Dialog on “No” Click (1:28)
Finished Module Code

9: Task Menu

Add a Task Menu (2:53)
Add the Menu Items & Icons (2:21)
Handle Clicks (2:22)
Delete Task (3:32)
Finished Module Code

10: Edit Task

Create the Dialog (3:07)
Display Current Task Title in Dialog (1:43)
Save the Task (3:41)
Close the Dialog (1:45)
Field Validation (4:12)
Add Task Field Validation (4:00)
Show a Snackbar (1:25)
Finished Module Code

11: Due Dates

Setup the Data & Styles (4:09)
Filter the Date with date-fns (3:39)
Create the Dialog (3:37)
Show Dialog and Select Current Date (2:04)
Save Due Date & Close Dialog (4:23)
Finished Module Code

12: Expanding Search

Add the Search Field (1:55)
Improve the Style (3:54)
Close the Search Field (1:31)
Open on Focus, Close on Blur (2:01)
Add Animation (2:03)
Only Close if Empty (2:27)
Fix Header Issues (3:38)
Hook it up to Vuex State (3:25)
Create a Getter to Filter the Tasks (5:21)
Finished Module Code

13: Live Date & Time

Create a Live Date & Time Component (3:32)
Show the Real Date (2:11)
Display Full Date & Time and Make it Live (2:18)
Finished Module Code

14: Beautify the Drawer

Add an Image (3:03)
Add an Avatar (1:50)
Add Name & Username (3:01)
Show the Drawer by Default on Tablet & Above (3:51)
Finished Module Code

15: Dynamic Page Titles & Environment Variables

Set a Base Page Title (1:45)
Add Page Name to Title on Route Change (4:00)
Environment Variable for App Title (3:54)
Use Environment Variable in HTML Page & Router (1:26)
Use the Environment Variable in Our Components (1) (2:02)
Use the Environment Variable in Our Components (2) (2:37)
Finished Module Code

16: Reorder Tasks with Vue Draggable

Add the Sort Handle & Setup State (2:54)
Add Sort Menu Item & Done Sorting Button (5:18)
Install Vue Draggable (3:34)
Add Some Style (3:53)
Update the Vuex State (4:03)
Finished Module Code

17: Persistent Data with Localbase

Install Localbase (2:54)
Make Add Task Persist (4:41)
Get Tasks from Localbase on Load (3:24)
Make Done Task Persist (5:22)
Make Update Title Persist (2:00)
Make Due Date Persist (1:16)
Make Delete Task Persist (1:22)
Make Reordering Persist (5:09)
Finished Module Code

18: Mobile, Testing & Fixing

Testing on iOS (4:45)
Testing on Android (4:16)
Fix the Add Task Field (8:32)
Hide Add Task Field on About Page (2:55)
Fix Scrolling Issues (6:43)
Fix the Snackbars (1:43)
Disable Sorting when Searching (3:17)
Finished App Code

19: Deploy to Netlify

Build for Production (1:35)
Setup a Local Git Repository (2:37)
Setup a Remote Repository on GitHub (1:54)
Deploy to Netlify (5:47)

20: What Next?

Bonus Lecture: What Next? & Learn More from Me (1:25)

Teach online with

Add Task

Complete and Continue

Discussion

0 comments