E-commerce Website With Django and Vue Tutorial (Django Rest Framework)

Wordpress sites

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:

32 thoughts on “E-commerce Website With Django and Vue Tutorial (Django Rest Framework)”

  1. You guys are so appreciated. Reminding you of the positive impact this has on the community

  2. Code With Stein

    Thank you so much for publishing my course 😄 I feel so honored to contribute to this community 😁

    1. @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?

    2. @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

    3. Hello why my page reloading when i add product to cart? And content is not apdates when i change category

  3. Paolo e Basta

    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?

    1. bro, I have an authetication error 401 , I can’t solve it.I’m still stucked.in Checkout

  4. 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

    1. @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.

  5. Thank you so much for this video. I was searching a video which contains DRF and Vue JS with clear explanation. THX MANNN!

  6. Sebastian Castillo

    Pure magic!!
    Very grateful for this invaluable content, I love django and Vuejs

  7. Thank you so much for this. The single most helpful tutorial I have ever found on the internet.

  8. 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

  9. Developer Bishwas

    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)

  10. Prakash Kumar Bhanja

    This tutorial is so nice , that i learned Vue js and DRF so easily and in like 15 days thanks @stein

  11. Awesome work but I have still confused about how we create the addToCart method only for logged-in users?

  12. 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.

  13. 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?

  14. Done to the point of 55:58. So good explanation and good design of the website with less effort than normal.

  15. Mohammad saeed Amini

    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

  16. Thnx for this tutorial amazing
    I”m having a problem accessing the success page after putting in the card details

  17. programming_duck

    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.

Comments are closed.