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

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.

⭐️ 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)

--

[CodeWithStein]

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

[DevBishwasBh]

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)

[CaliFlower]

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

[vedkorla]

1:38:30, if you're wondering how adding and removing from the cart functionality worked just like me then here's something:
In VueJS props are passed by reference not by value, so when we pass down the item down to cartItem component from Cart.vue component, we basically modify the parent's data.

[tytalksYT]

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

[BitCloud]

CODE WITH STIEN IS THE BEST!! I just wish he explained a little more but I love his stuff

[ataberkuygur]

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

[microman]

The longer I watch and try to follow the more dizzy I become, damn this is quite a hard tutorial

I definitely learned a lot (and don't understand a lot, too) though, thank you!

[tanvirashraf]

Stein love to see you an amazing guy....it continuously happens , that i ask him anything and he explains clearly that to me

[Rajnishdangar]

Just want to add note:
At 11:46 to install Vue, you first haf to download note. Js from browser . Thank you great tutorial

[peterhebden]

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

[resai]

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

[takudzwamupanesure]

Thanks, Stein, I'm loving this tutorial.

[nouhmohammedsahnoun]

made a typo -porductBox-, 2 H searching, questioning my entire for the series tho, really good start point for a fullstack webdev much appreciated

[sebastiancastillo]

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

[kudangkoding]

this is what I've been waiting for.

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

[thereversejosh]

Overall good tutorial. I would have really liked for it to be more detailed, especially on the backend part because I felt that there were some things I just copied from you not knowing why or what they do. Also, I understand that having code snippets help a lot while doing the tutorial but I didn't like when you copied big chunks of code without going over them.

[prakashkumarbhanja]

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

[lecturer]

Someone please help me with this problem. I was coding along and my code worked until the 45 minutes where the product was supposed to be displayed on the homepage but mine did not display. I suspect that the frontpage is not communicating with the backend but I followed everything in the tutorial