Skip to content

gustsu/30-days-of-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 

Repository files navigation

30 Days of Vue Challenge

Resources

Vue Mastery - Multiple Classes (Free)

Laravel Cast - Learn Vue 2 Step by Step (Free)

Net Ninja YouTube Channel - Learn Vue 2 (Free)

Udemy - Vue JS 2 The Complete Guide (Paid)

Fullstack.io - FullStack Vue Book (Paid)

Vue Cheatsheet

Project Ideas

Simple Vue Product Page

Vue Weather App

Vue Cryptocurrency Price Tracker

Vue To Do List

Vue Calculator

Vue Portfolio Site

Vue Powered Trello Board

Basic CRUD App with Vue and Node

Create a Dynamic Page using the Marvel API and Vuex

Build a Progressive Web App with Vue and Nuxt.js

Log

Day 0: April 22 2019

Today's Progress: Setup Project.

Thoughts: Happy with the resources I've picked. Ready to get started!

Link(s) to work: This Repo


Day 1: April 23 2019

Today's Progress: Restarted Vue Mastery - Intro to Vue JS. Finished lessions 1 - 4.

Thoughts: Felt like this was a good tutorial to start with since I have already completed the first course once but that was a little while ago and I don't recall everything. I'm having with fun the course, adding my own css and assets to make it a little more unique. Vue seems pretty neat and easy to pick up.

Link(s) to work: vuemastery-course1


Day 2: April 24 2019

Today's Progress: Continued with Vue Mastery - Intro to Vue JS. Finished lesson 5 - 6.

Thoughts: Enjoying this course and enjoying Vue. Didn't spend a ton of time tonight but feels good to at least put in 30 minutes. Happy I've commited to 30 days, looking forward to some cool projects.

Link(s) to work: vuemastery-course1


Day 3: April 29 2019

Today's Progress: Continued with Vue Mastery - Intro to Vue JS. Finished lesson 7 - 8.

Thoughts: Learned about Computed Properties and Componets.

Link(s) to work: vuemastery-course1


Day 4: April 30 2019

Today's Progress: Continued with Vue Mastery - Intro to Vue JS. Finished lesson 9. Also read a little from the book Fullstack Vue The Complete Guide to Vue.js

Thoughts: Learned about how events are handled in vue and about passing props between componets.

Link(s) to work: vuemastery-course1


Day 5: May 7 2019

Today's Progress: Continued with Vue Mastery - Intro to Vue JS. Finished lesson 10.

Thoughts: Learned how to nest components inside of other components. Also learned about 2 way data binding.

Link(s) to work: vuemastery-course1


Day 6: May 12 2019

Today's Progress: Finished the last lesson of Vue Mastery - Intro to Vue JS. Finished vuemastery-course1 for now.

Thoughts: Learned about state management. Implemented tabs on my project. Worked on the CSS as well. First project is complete for now!

Link(s) to work: vuemastery-course1


Day 7: May 14 2019

Today's Progress: Started on Vue Mastery - Real World Vue JS

Thoughts: Setup Vue CLI.

Link(s) to work: vuemastery-course2


Day 8: May 23 2019

Today's Progress: Continued with Vue Mastery - Real World Vue JS

Thoughts: Learning about the Vue Router and API calls with Axios.

Link(s) to work: vuemastery-course2


Day 9: May 26 2019

Today's Progress: Took a break from the vuemastery courses to start on some project ideas.

Thoughts: I'm planning on building a weather or cryptocurrency price tracking app after I finish vuemastery-course2, so today I played around with Vue Material. It is a really neat framework based on Googles Material Design. I've read mixed reviews regarding the framework but it seems very straight forward and well documented to me. Excited to use it in the future.

Link(s) to work: vue-material-testing


Day 10: May 30 2019

Today's Progress: Continued with Vue Mastery - Real World Vue JS

Thoughts: Learned about the vue router and client side routing. Excited to finish Vue Mastery - Real World Vue JS so I can move onto some projects of my own. Tutorials are nice but there is nothing like doing it yourself to learn something new.

Link(s) to work: vuemastery-course2


Day 11: June 12 2019

Today's Progress: Continued with Vue Mastery - Real World Vue JS. Finished Lesson 5, 4 more to go!

Thoughts: Learned more about the vue router and how to setup dynamic routes. Also learned how to configure a web server to work with the vue router (just always serve index.html).

Link(s) to work: vuemastery-course2


Day 12: June 14 2019

Today's Progress: Continued with Vue Mastery - Real World Vue JS. Finished Lesson 6

Thoughts: Learned more components and how import/export them for use with other components.

Link(s) to work: vuemastery-course2


Day 13: June 17 2019

Today's Progress: Continued with Vue Mastery - Real World Vue JS. Finished Lesson 7

Thoughts: Learned about global components

Link(s) to work: vuemastery-course2


Day 14: June 18 2019

Today's Progress: Finished Vue Mastery - Real World Vue JS

Thoughts: Learned about making API calls with axios as well as how to set it up as a service file so you only have one axios instance. Happy to be done with the tutorials, ready to move on and do some of my own projects.

Link(s) to work: vuemastery-course2


Day 15: July 1 2019

Today's Progress: Started a vue-cryptocurrency-app

Thoughts: Started a vue cryptocurrency price tracking app. It will be a simple app that lets users see the current price of the top 100 cryptocurrency by market cap. It will also display news and possibily allow users to add their own portfolio.

Link(s) to work: vue-cryptocurrency-app


Day 16: July 9 2019

Today's Progress: Worked on vue-cryptocurrency-app

Thoughts: Broke the Navbar into its own component. Added vuematerial.io

Link(s) to work: vue-cryptocurrency-app


Day 17: July 13 2019

Today's Progress: Worked on vue-cryptocurrency-app

Thoughts: Adding more vue material components and developing the UI.

Link(s) to work: vue-cryptocurrency-app


Day 18: July 16 2019

Today's Progress: Worked on vue-cryptocurrency-app

Thoughts: Adding more vue material components and developing the UI more. Getting started with axios.

Link(s) to work: vue-cryptocurrency-app


Day 19: July 21 2019

Today's Progress: Worked on vue-cryptocurrency-app

Thoughts: Setup Axois and a CoinApiService file for handling API requests.

Link(s) to work: vue-cryptocurrency-app


Day 20: July 30 2019

Today's Progress: Worked on vue-cryptocurrency-app

Thoughts: Finished up the News and Rankings pages. Would still like to improve the rankings page, possibly add a search, sort, and an load more cryptos option to it. I would also like to add a Portfolio page.

Link(s) to work: vue-cryptocurrency-app


Day 21: August 2 2019

Today's Progress: Worked on vue-cryptocurrency-app

Thoughts: Improved the Rankings page a little bit more. Added a select box that lets you control how many coins are output. Basically an API Request is made everytime the select box change event is ran with the select box value as the limit. Done with Rankings and News page for now. I might come back and add a Portfolio page, a mobile navigation, etc to the app but I'm happy with it for now.

Link(s) to work: vue-cryptocurrency-app


Day 22: August 16 2019

Today's Progress: Started a Vue Weather App

Thoughts: Got started on a vue weather app, it will be a simple mobile app that gets the location of a user and then displays the current weather at the users location.

Link(s) to work: vue-weather-app


Day 23: August 20 2019

Today's Progress: Worked on my Vue Weather App

Thoughts: Working on the UI and on adding axios to make the an API call to weather service and get weather data.

Link(s) to work: vue-weather-app


Day 24: August 23 2019

Today's Progress: Worked on my Vue Weather App

Thoughts: Finished up the main page with a static location (Spokane, wa). I'm pretty happy with the app so far, it is just a basic weather app. I would still would like to develop the rest of the pages out further and would also like to dynamically pull the user's location.

Link(s) to work: vue-weather-app


Day 25: September 10 2019

Today's Progress: Worked on my Vue Weather App

Thoughts: Working on adding in the geolocation API to display weather based on the users location. Not done with that yet. Improved/Change the UI a little bit.

Link(s) to work: vue-weather-app


Day 26: September 16 2019

Today's Progress: Finished my Vue Weather App

Thoughts: Finished displaying the weather based on the users location using the geolocation API. Also added a few more features like a dynamic background that changes based on the weather. Moving onto a Personal Portfolio Vue App for the last 4 days of the challenge.

Link(s) to work: vue-weather-app


Day 27: October 3 2019

Today's Progress: Started a Vue Calculator app

Thoughts: I decided to hold off on a Vue Personal Portfolio and build a Vue Calculator instead. Setup project and watched some tutorials on Vue Calculators.

Link(s) to work: vue-calculator


Day 28: October 7 2019

Today's Progress: Worked on my Vue Calculator

Thoughts: Followed the tutorial from above to create the calculator. Restyled the calculator based on a mockup. Redid all the css using flexbox instead of css grid. Calculator is basically complete but I would still like to add some color features.

Link(s) to work: vue-calculator


Day 29: October 11 2019

Today's Progress: Worked on my Vue Calculator

Thoughts: Worked on the design and on adding in some small little features like 3d mode.

Link(s) to work: vue-calculator


Day 30: October 14 2019

Today's Progress: Finished my Vue Calculator

Thoughts: Finished adding 3d mode and also finished up some UI changes. Calculator is done for now.

Link(s) to work: vue-calculator


Final Thoughts

I really enjoyed this challenge. It forced me to get out of my jQuery comfort zone and to finally try out some JavaScript Frameworks. It also gave me some nice experience with a CLI. Before the challenge I had very little experience with CLIs, now they are the only thing I want to develop with. I feel like I have gained a pretty solid understanding of Vue JS and of JavaScript Frameworks in general. 10/10 would recommend.

Releases

No releases published

Packages

No packages published