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.
✏️ The course was developed by CodeWithStein. Check out his channel: / codewithstein
🐦 CodeWithStein on twitter: / codewithstein
💻 Code - Django: github.com/SteinOveHelset/dja...
💻 Code - Vue: github.com/SteinOveHelset/dja...
🔗 Live demo: djackets.codewithstein.com/
🔗 The files and commands I use on the server can be found in the repository here: github.com/SteinOveHelset/dja...
⭐️ 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@CodeWithStein]

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

[@ihsanmohamad521]

Glad to see you here. Been following you from back when you only have around 700 subscribers. Check his channel guys. Lots of good realworld project you can learn!

[@CodeWithTomi]

Great tutorial!

[@deejayserious6981]

Awesome to see you on freecodecamp Stein, i hope you will get more views on your videos, since you definitely deserve them!

[@CodeWithStein]

@@ihsanmohamad521 Thank you so much for the kind words :-D

[@CodeWithStein]

@@deejayserious6981 Thank you so much :-D

[@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)

[@takudzwamupanesure7765]

Thanks, Stein, I'm loving this tutorial.

[@ataberkuygur9501]

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

[@sebastiancastillo3560]

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

[@peterhebden1557]

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

[@CodeWithStein]

Nice! Thanks for the feedback :-D

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

[@Suluu00]

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

[@Player-ix7rx]

Finally I found what I was looking for, thanks guys!

[@tytalksYT]

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

[@franciscomartinez2664]

this course is absolutely flawless.

[@tanvirashraf728]

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

[@MorganPageTech]

What a fantastic find, immediately subscribed to your channel Stein!

[@CodeWithStein]

Thank you Morgan :-D

[@vedkorla300]

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.

[@BitCloud047]

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

[@CodeWithStein]

Thanks :-D

[@resai17]

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

[@CodeWithStein]

Nice! Thank you :-D

[@RichellyItalo]

Great combination of technologies.

[@prakashkumarbhanja6270]

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

[@microman99]

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!

[@saminserge2674]

Many thanks for your efforts appreciated this tutorial.

[@rajnishdangar9051]

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

[@alexanderslessor410]

This is really good. Applicable to anyone writing a backend in python regardless of framework.

[@mayolspace1454]

not to any

[@kudangkoding]

this is what I've been waiting for.

[@EmotionspkByTayyab]

very good instructor good explaination well advannced.i recommended

[@njjayme8776]

Thank you so much it help me boost my confi

[@nyagah243]

Found this just at the right time. Thanks.

[@CodeWithStein]

Great :-D

[@sanjaydhande6573]

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.

[@softcoda]

This is amazing...I have been thinking about how to implement Vue over Django

[@z0hyrrashed674]

me too!!!!

[@excellentnomad9514]

Make a Laravel + vue3 course please. Thank you for all you do!

[@godofking2004]

Thanks for sharing this tutorial, it is very useful and helpful to me.

[@CodeWithStein]

Thank you so much :-D

[@davebudah]

I love this. Thank you.

[@ongong8209]

thank you so much for this course

[@prakashkumarbhanja6270]

Thanks stein ❤

[@gabrielrochasantana]

Very good learning course.congrats

[@mahmudsajib8648]

Thanks Stein. It’s awesome

[@pradyumnan100]

Great work, thank you!

[@CodeWithTomi]

Love the tutorial!

[@arnavmehta3669]

Love yourself🔥

[@charlesenglebert8226]

it looks so easy when just watching this

[@robertoperez7468]

Thanks, I want to learn django rest framework and this will help me a lot!!

[@kelvinnjoro7421]

Thank you Stein. This is great

[@CodeWithStein]

Thanks! I'm glad you liked it :-D

[@programming_duck3122]

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.

[@DanteMishima]

So, I'll build this, but with next as my frontend 😁😁😁

[@mplovecraft]

A new combo for me. Why not :D

[@nouhmohammedsahnoun7014]

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

[@maxchan4440]

Thank you so much for this video!

[@isaacgroisman6889]

Hi, I'm getting a = Error: Request failed with status code 400, after filling stripe details in the checkout, I do see the that the payment went through but it didn't redirect to success page because of the error, do you know what could it be ?

[@CodeWithStein]

Thank you :-D

[@mahendranath2504]

Thank you so much 👍🏼🙏

[@Emezir]

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?

[@ashwathama4045]

Going to try making this using react or Svettle

[@sheetalkumar3572]

amazing and smooth.... thankyou

[@CodeWithStein]

Thanks :-D

[@temiloluwaogundiran2351]

This is very Nice Can you guys try creating a Blog with Django or React

[@zoulkifilakomedi690]

Merci pour cette publication.

[@radeshf]

very helpful, thank you

[@el_conta]

This is an amazing tutorial, if it were a bit more paused and detailed it would be a greatest 5 hours tutorial!!

[@rogostep4875]

Thank you very much!

[@user-bc2ec6dg4e]

Very raw tutorial

[@bishwasbh]

You deserve more popularity.

[@CodeWithStein]

Thanks :-D

[@davidadu-tenkorang3186]

You guys are the best!

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

[@lucasdarianschwendlervieir3714]

Probably best way to learn is trying to code the solution to a particular problem on your own before seeing how he did it. You will have to use other resources + documentation for this, but it's far more rewarding.

[@Rightlime7923]

For free - unbelievable

[@mohammadsaeedamini5587]

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

[@dreido_it2952]

He sounds like he's about to rap every time he says Axios😂

[@albertfsumo3139]

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

[@bishwobhandari7219]

you should make another video of this deploying with docker!

[@CodeWithStein]

Good suggestion ;-) I will take it into consideration when I make a similar video on my own channel ;-)

[@imadsaddik]

Thank you so much!

[@mahfuzkhandaker3224]

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

[@roronoazoro5259]

This is a great video, thank you!

[@khadimhusen]

thanks for Very good tutorial Stein. But i have a little doubt, Search functionality is reloading whole page. even i just followed you tutorial step by step.

[@ravinadangar8196]

This video deserve million's

[@CodeWithStein]

Thank you! That would have been awesome :-D

[@sanyalpartha864]

Sir, can you please show the deployment process on Herouko or any other free hosting platform

[@christopher6752]

Amazing ! Could you do the same with Golang and Vue js one day ?

[@CodeWithStein]

Probably not :P I have never tried Golang before, and it will probably take a long time before I start using something else on the backend. But here are probably thousands of other content creators who can do it :-)

[@mr.z5289]

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

[@jessicatarra9]

Amazing! Thank you so much.

[@SimpleCoding]

Thanks!

[@firojacharya]

This is awesome.

[@feras_khabata20]

I can't believe this is nonprofit organization !

[@JJ-ot3ps]

hi nice video, but how do you connect vue html to django? i thought they have two different local host address?

[@khalidshaikh8168]

Please make a video on an e-commerce using angular and django

[@RichIslam]

Good job bro

[@user-nr3pj5fj3v]

Amazing course and I like it! I just have a small issue: when I login as A and add some items into the cart, then I logout and then login as B, the cart content is still the same as A's instead of B's. How to fix that? Thanks so much!

[@ravinadangar8196]

Heaven for codelovers

[@gesangwibawono7570]

Great content Sir

[@CodeWithStein]

Thanks :-D

[@svenjensen2022]

How should i go about changing the style of the site(colors, fonts, etc...)??

[@DanielCodContent]

Wonderfull course !!!

[@saishyam8583]

45:30 When using axios i am not getting the image can anyone help me out with this

[@saishyam8583]

Does that like mean you can help?

[@alexi_space]

I have same problem, the div with image is not exist even in source code..

[@chrisr2063]

did you find the solution? ive gone through this twice from scratch and both times not able to render the images

[@fadlydestrianarusmana1076]

Hi. Can we use this tutorial but change the front end to flutter for mobile?

[@Dakilangmanok]

For Vue is it possible to split JS and CSS into their own files or is this not allowed?

[@xamantiwari]

i am getting error - `Instance of 'ForeignKey' has no 'slug' member` 29:08

[@sambitraze]

can we get a video on a dashboard using vue for this same project

[@refrefwgwgwegew]

Amazing tutorial! I got stuck around 45:00 the backend seems not to return the latest products to my home page. Woudve been nice if code was presented around given timepoint.

[@keysh2418]

@The_Real_Moodjho I am having the same problem as you. Is yours saying blocked by CORS error regarding the Access-Control-Allow-Origin Header?

[@user-ow4km5zs5r]

Hi! Did you fix it? I have the same problem...

[@luisdiiaz7149]

You have to fix the cors_allowed_origins at setting.py to localhost:8080

[@user-xq7dm7mf2d]

@@luisdiiaz7149 brooooooo thank u so much

[@idk____idk6530]

I'm really want to know Dose KZbin Algorithm read my mind 😂 I just search on google About Full-stack django project and after 2 hours I got a notification 😂 About this video Lol what happened 😂

[@mohammedmubeen1963]

Same company called alphabet

[@ericksonboang]

why do you have v1 in the api url ?

[@PlacesEarth69]

Very Nice

[@parth2teja]

Can you upload a kivy tutorial?

[@lecturer4912]

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

[@swastikranjan713]

Did you figure out the issue?

[@afraseeyad1005]

​@@swastikranjan713I am facing the same

[@mailtosrajesh]

I am a experienced desktop developer. Have knowledge on python. But new to web , Django and Vue.js . Can I start with this course? Any recommended tutorials to start vue and django?

[@ayoubnachat5920]

we want a full stack e-commerce with react and express

[@aangcrdbl]

Can someone explain how he is pasting the text so fast in VS? For example, at 19:00 he's not typing anything just pasting the lines out of nowhere. I'm new to coding in general.

[@davebudah]

Usually, since they will have built the project earlier before redoing it in the recording they keep the code next to them to copy and paste, so they don't waste your time typing it all out. It helps shorten the video length plus minimizes errors during recording.

[@AlThePal78]

@@davebudah and so with that said he haves to monitors and we can only see the one he is coding on : )

[@davebudah]

@@AlThePal78 Yes it can be two monitors or one ultra wide screen

[@2railnation]

You can see his cam jumping so he's editing out the typing.

[@louiee123]

what Node.js version is he using and what NPM version? thank you

[@liefwerk]

If you have the error: 'TypeError: right-hand side of 'in' should be an object', delete your localstorage file named 'cart'. You should find it within your browser's console under the Storage tab.

[@goodyonsen77]

hey I don’t get any errors of that kind but the cart icon isn’t visible at all. I tried to open localhost location in two different browsers it’s still not there. You have any idea about that?

[@aldinjaviermezaruiz9212]

@@goodyonsen77 Font awesome you should figure it out that he paste a link but the link is in another update and if you tried the latest it might work.

[@mr.z5289]

Thanks a lot. 👍👍👍That was my headache for the last three days

[@mdminecraft11]

The deployment process would have been cleaner with docker, still great vid tho

[@CodeWithStein]

I know Docker could be a good alternative. I'm not a huge fan of Docker (probably because I don't know it really well). It's on the list of things I want to learn :-)

[@teklysest3271]

how do you get category_slug/product_slug at 53.08 [View Details], for loop make only product_slug here. Could you please make me understand?