Learn how to build an e-commerce website using Django and Vue from scratch. Django uses Python Vue uses JavaScript.
Django Rest Framework is used to build the API and backend.
The frontend is a separate Vue project. To handle the payments, we implement Stripe.
✏️ The course was developed by CodeWithStein. Check out his channel:
🐦 CodeWithStein on twitter:
💻 Code – Django:
💻 Code – Vue:
🔗 Live demo:
🔗 The files and commands I use on the server can be found in the repository here:
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:55) Demo
⌨️ (0:02:41) Install and setup (Django)
⌨️ (0:11:39) Install and setup (Vue)
⌨️ (0:15:49) Include Font Awesome
⌨️ (0:16:28) Set up the base template
⌨️ (0:22:55) Create django app and models for products
⌨️ (0:33:19) Create serializer and views for the products
⌨️ (0:39:50) Create simple front page (latest products)
⌨️ (0:45:40) View a product
⌨️ (0:55:57) Sette opp Vuex / State
⌨️ (0:57:27) Make it possible to add to cart
⌨️ (1:05:31) Implement a loading bar
⌨️ (1:08:59) Set document title (All pages)
⌨️ (1:09:58) Make it possible to view a category
⌨️ (1:21:07) Add search functionality
⌨️ (1:28:07) View cart
⌨️ (1:34:34) Change contents of cart
⌨️ (1:38:14) Make it possible to sign up
⌨️ (1:43:34) Make it possible to log in
⌨️ (1:48:38) Create a simple my account page
⌨️ (1:53:24) Proceed to checkout (Authentication)
⌨️ (1:58:59) Create a simple success page
⌨️ (2:14:29) Show my orders on the my account page
⌨️ (2:18:41) Deploy Django
⌨️ (2:40:39) Deploy Vue (Generate files locally, Send files to server, Set up nginx virtual host)
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
You guys are so appreciated. Reminding you of the positive impact this has on the community
Thank you so much for publishing my course 😄 I feel so honored to contribute to this community 😁
@Deejay Serious Thanks 😀
@Isaac Groisman Hi! It’s a bit hard to say exactly whats wrong. It’s most likely a typo somewhere. Are you seeing any errors in the browsers console or the terminal?
@Code With Stein Hi thanks for the reply, Im seeing errors on both the console (Error: Request failed with status code 400) and in the terminal ( “POST /api/v1/checkout/ HTTP/1.1” 400 2)
Im not sure if there is an error in the frontend or in the backend, I have exactly your code with my stripe api testing keys (private in backend in settings.py) (public in checkout). I see payment does go through in stripe account, but no redirection to success page and have error Something went wrong. Please try again. Let me know if you have more ideas, thanks Stein
Hello why my page reloading when i add product to cart? And content is not apdates when i change category
Tack så mycket 🙂
very informative, thanks! A thing that always puzzles me (I’m literally stuck) is about authentication and security, mainly because internet is full of discordant opinions about it; I wouldn’t like to ask, but should it be consider OK to store the token in local storage as you did?
bro, I have an authetication error 401 , I can’t solve it.I’m still stucked.in Checkout
@Mr.rEaL1sT it’s been long time. I guess I’ve solved.
Doesn’t discord do this?
Make a Laravel + vue3 course please. Thank you for all you do!
this was awesome. notes:
– LOVE how you went all the way through, with a checklist, in one take, serious talent & planning
– similar note about having snippets already, perfect balance between showing us code, but not having to watch you type every letter
– would have liked explanations in the beginning about vue setup in the same way you explain dependencies – *why* are we making these selections?
– similarly, what was behind the decision to make the api and app separated – why not have the api as an app within the django project?
– in browser view and later in terminal, you reference errors/text but we cannot see them as your thumbnail view covers the console
– love your monstera
@4 Django is just bad choice for making SPA. However its great for APIs, and vue (along with axios) is great for front end powered with external api. As for me – perfect combination.
Thank you so much for this video. I was searching a video which contains DRF and Vue JS with clear explanation. THX MANNN!
Thanks for sharing this tutorial, it is very useful and helpful to me.
Thank you so much 😀
Pure magic!!
Very grateful for this invaluable content, I love django and Vuejs
Thank you so much for this. The single most helpful tutorial I have ever found on the internet.
Nice! Thanks for the feedback 😀
Hi Stein, thanks very much for this tutorial. However, I encountered one problem: I deployed backend at Pythoneverywhere and Frontend at Vercel – everything is Ok on the PC, but images are not displayed (shown as broken) on mobile phone browsers… Can you please hint me what’s wrong? Thanks in advance
This course is totally *astonishing* . What you can *learn from this course* :
1. Vue 3, with routing and Vuex
2. Django Rest Framework
3. Bulma (some sorta)
I loved this. This is a totally useful video to learn drf and vue 3.
This tutorial is so nice , that i learned Vue js and DRF so easily and in like 15 days thanks @stein
Awesome work but I have still confused about how we create the addToCart method only for logged-in users?
Thank you so much for such Great work and Nice app from start to finish with hosting. Got lots of Motivation as it is explained to the level of finished product.
Really nice course, timing is perfect (less than 3h for the entire fullstack), the content is massive and the final result is a real project! Thanks you so much. I’m doing the code in parrallel, second time i watch this tuto but i think i missed something… i cannot modify the ‘vue’ files App.vue, index.html, the .json… i can maybe trick this by replacing the files with the ones from your repo but how do you in the video?
Done to the point of 55:58. So good explanation and good design of the website with less effort than normal.
Nice! Thank you 😀
First of all it was great my question is: If we want to create an admin panel for this website (to publish posts and content), how do we do that? That is, should we define admin root in vue-router or in django?
I’m really confused
Thanks
Thnx for this tutorial amazing
I”m having a problem accessing the success page after putting in the card details
Really great course, im at 1:30:25 min and its been great so far. I just wonder I changed v-if=”cartTotalLength” to v-if=”cart.items.length > 0″, I am not sure why there is a need for a computed value.