Blog
> VueJS + Vuetify
November 14, 2020
Overview
Project Information
VueJS + Vuetify
Progress
- To Do List (DesignCourse - Instructions)
- Punchbag + Ninja Cards + Forms + Mini Blog (The Net Ninja - Instructions)
- Project Manager (The Net Ninja - Instructions)
Project Links
- Github - Code
Useful Links
- Vue Chrome Extension
- jsonplaceholder (http requests)
- Firebase (database)
Reflection
To Do List
![](./todo-list.jpg)
Add Skills to List
Punchbag
![](./punchbag-1.jpg)
Full Health
![](./punchbag-2.jpg)
Decreased Health
![](./punchbag-3.jpg)
Game End
Ninja Cards
![](./ninja-cards-1.jpg)
Original
![](./ninja-cards-2.jpg)
Flipped Cards, Deleted Ninja, Header/Footer Title Change
Forms
![](./form-1.jpg)
Contact Us
![](./form-2.jpg)
Log In
Mini Blog
![](./mini-blog-1.jpg)
Home
/
![](./mini-blog-2.jpg)
Add New Blog
/add
![](./mini-blog-3.jpg)
Show Blog Articles
/articles
![](./mini-blog-4.jpg)
List Blog Titles
/titles
![](./mini-blog-5.jpg)
View Single Blog
/blog/:id
![](./mini-blog-6.jpg)
REST API
Project Manager
![](./project-manager-1.jpg)
Dashboard
/
![](./project-manager-2.jpg)
Projects
/projects
![](./project-manager-3.jpg)
Team
/team
![](./project-manager-4.jpg)
New Project Pop-Up Dialog
Scratch Notes
- VueJS, Vuetify, Front-End Routing, Firebase
- Front-end is more than just hardcoding HTML, CSS, and JavaScript.. Who knew?! ;)
- Vue has a lot of built-in functionalities for simplifying UI and state elements. It is very interesting that it focuses on component/view separation and modularization. Using frontend frameworks enable us to build reactive websites now, as opposed to static. Also, using bootstrap elements like Vuetify makes it so that we can easily generate UI components without dealing with the mess of HTML/CSS code.