Once you’ve done a few tutorials, usually it’s a good idea to work on something without an exact step by step guide. So, if that’s what you’re looking for, here are three project ideas that you can build. They’re all smaller projects so you can probably get them done in a couple hours to a few days.
1. QR Code Generator (Beginner)
There’s a cool little service, QRtag.net, that lets you generate QR codes on the fly without any kind of backend process. You simply append the url you want to generate a QR code for to their api url and you’re set!
Here’s an example from their documentation:
https://www.qrtag.net/api/qr_4.png?url=https://www.google.com
The goal of the app you’d build is to let a user enter a url and then press a button that generates the QR code. It’s pretty basic, but it should hopefully give you some more experience working with Vue. To make it a little more complicated, you could keep a history of all the QR codes a person has generated and save them to localStorage. Then display the person’s history on the page.
2. Blackjack Game (Intermediate)
Blackjack can be a fun thing to make when you’re first learning a new programming language. Here’s some requirements if you’re not sure of what to do:
- Create a game that’s you (player) vs the computer (dealer)
- Have the player start out with a certain amount of money
- Randomize (shuffle) a deck of cards
- Deal 2 cards to the player and 2 to the dealer
- You’ll need a way for the player to place a bet before being dealt cards
- You’ll need a way for the player to hit or stand after being dealt cards
- If the dealer’s count is under 16, you’d auto hit for them
- Once the player stands, you’d check who has the higher count to determine the winner
- If the player or dealer goes over 21, they automatically lose
Here’s some images you can use as cards: https://github.com/hayeah/playing-cards-assets/tree/master/png
3. Fandom Encyclopedia (Advanced)
There’s a bunch of APIs out there that are dedicated to certain tv shows, books, movies, video games, etc. You can take one of those APIs and build out a frontend/user interface that lets you navigate the API.
Here’s three examples:
Each of these will let you access their API without paying anything and you won’t need a backend server to access them. Every API call can be done directly from your frontend app. You’ll need to go through the documentation to see what you can do with them.
As an example of what to build, for the Harry Potter or Rick and Morty API, you can create a way to dynamically show all the characters and give each their own individual page. For the Pokemon API, you can build an actual Pokedex!
From a Vue standpoint, I think using something like vue-router to separate the different pages for this project would be helpful. And you can use axios or vue-resource to make the API calls.
Hopefully, those examples were helpful! If you have any feedback or any questions feel free to leave a comment below!