Full Stack Project with Vue.js and Flask (Games Library App)

This is a Full-Stack project to create a Games Library application using VueJs for the frontend UI and Flask for the backend server and Flask Rest API to connect to the frontend.
We are also using Axios to send requests and receive responses, as well as Bootstrap and BootstrapVue for the modals.

⭐⭐⭐ Special Thanks to Michael Hermann who was Ok to let me use his codebase and create this course.

✨Michael Hermann's Twitter:

✨Michael's web site for blogs and articles:

✨Michael's GirtHub:

📅 Project Contents:
------------------------------------
Introduction [ 00:00 ]
App demo [ 06:42 ]
Tutorial front and back [ 08:08 ]
App testing and outro [1:27:45]

💥Sources
----------------------
Source Code:

VueJs Website:

Bootswatch cdn :
​​
Axios ( GitHub ):

🔗Social Media
--------------------------

[BekBrace]

Hope you’ll enjoy this project and learn something new from it

[animeshmishra]

Finally a video that uses 3 tier architecture concept and not just simply Flask that renders html pages to provide dynamic content

[luizferez]

This is gold, please more of such vue projects, super work thank you very much man

[lovelyalicekim]

Thank you so much for this amazing tutorial. It tooks 2days to finish but I understand the rough concept of flask and vue through the journey. Your explanation is so easy to understand as I have an experience in node.js and express, made broaden my knowledge so much!! Really appreciate 💌

[gabrielteuchert]

Not the commenting guy on YouTube but man, this is awesome and I just have to thank you for such a well guided tutorial! Thank you! The first steps are kinda overwhelming if one want to take the step from python coding to a full-stack project 🦈
You saved me days of scrolling through documentations with this vid and it is indeed really enjoyable to watch - thank you Bek (:

[avinashpatel]

Thanks Bek, and I would like to see more VueJs tutorials with FastAPI or Django plzz man

[monasser]

Great explanation, thank you so much for the effort

[marcus]

I was looking for this Thank you so much sir for your great videos

[stephenthumb]

seems like a good tutorial but there's just way too many issues with eslint. problem doing the edits, eslint errors. trying to install axios, more eslint errors. not sure if this is just my installation of node but I started brand new and still more eslint issues. kind of weird to me that a linter dependency would cause so many issues.

[farizabduhakimov]

Hi I really liked your lessons and started learning flask as well, please make a video tutorial on Flask music web application. Thanks

[dixdltr]

The video is great! That's real full stack !

[Lanciz]

I find this video-tutorial is AMAZING, but unluckily I cannot follow it cause of a lot of errors (prob outdated versions and conflicts).
Is there any chance you publish a 2024 version of this project? Thanks for what you do!

[ahmedssss]

More Vue and Vite also please _ great tutorial man, thanks 👍

[waelmohameddd]

Subscribed because of this great tutorial too Thanks a bunch 🙂

[mischeiwiller]

The tutorial so far is pretty nice! I enjoy it. I just have some issue with the eslint: Probably something in my configs is not right, because i always get outputs like this:

Compiled with problems:
×
ERROR
[eslint]

2:3 error Delete `··` prettier/prettier
3:1 error Delete `····` prettier/prettier
...


3:19 error Replace `'../components/Shark.vue'` with `"../components/Shark.vue";` prettier/prettier
9:9 error Replace `·:·'/shark'` with `:·"/shark"` prettier/prettier
...


✖ 18 problems (18 errors, 0 warnings)
17 errors and 0 warnings potentially fixable with the `--fix` option.

And i am not able to fix it yet. Do you have any idea where this comes from? Thanks a lot if you can help out on this issue!

[owlsjkl]

Prettier formatter is not working I have to do it manually.

[pinheirobastos]

Amazing tutorial! Could you share which kind of extension/app you use for the icons?

[mauricefakhry]

Hit Like before even opening it :) thanks a lot, bro

[limxunyi]

Hi Bek! Thank you for the video, i definitely learned a lot from this video. I was just wondering if you have any videos or experience deploying this type of builds (where you have to run both the Flask and Vue server)? I am a bit confused how to deploy them.

[gleb.stachev]

First of all, thank you for the explanation. There are two question: How to transfer data that cannot be displayed on the flask route for free access (after deploy). And the second question - is it possible to make part of the routes on flask, and part on vue for one site ?