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

Introduction

This tutorial will guide you through the process of building an e-commerce website using Django for the backend and Vue.js for the frontend. By following these steps, you will create a fully functional online store, complete with product listings, a shopping cart, user authentication, and payment processing using Stripe.

Step 1: Install and Setup Django

1. Install Python and Django:

   • Ensure you have Python installed on your machine.
   • Install Django using pip:

     pip install django
     

2. Create a Django Project:

   • Create a new project named djackets:

     django-admin startproject djackets
     

3. Set Up the Django App:

   • Navigate into your project directory:

     cd djackets
     

   • Create a new app for products:

     python manage.py startapp products
     

Step 2: Install and Setup Vue.js

1. Install Node.js:

   • Make sure Node.js is installed on your system.

2. Create a Vue Project:

   • Use Vue CLI to create a new project:

     vue create djackets_vue
     

3. Navigate to Vue Project:

   • Change to the Vue project directory:

     cd djackets_vue
     

Step 3: Include Font Awesome

• Add Font Awesome for icons:

  npm install --save font-awesome
  

• Import Font Awesome in your main.js file:

  import 'font-awesome/css/font-awesome.css';
  

Step 4: Set Up the Base Template

1. Create a Base Template:

   • Create base.html in your Django templates directory.
   • Add necessary HTML structure, including links to CSS and JavaScript files.

2. Extend Base Template in Other Templates:

   • Use Django’s template inheritance to extend base.html in your other templates.

Step 5: Create Django Models for Products

1. Define Product Model:

   • In models.py of the products app, define a Product model.

     from django.db import models
     
     class Product(models.Model):
         name = models.CharField(max_length=100)
         price = models.DecimalField(max_digits=10, decimal_places=2)
         description = models.TextField()
         image = models.ImageField(upload_to='products/')
     

2. Run Migrations:

   • Create and apply migrations:

     python manage.py makemigrations
     python manage.py migrate
     

Step 6: Create Serializer and Views for Products

1. Create a Serializer:

   • In serializers.py, create a serializer for the Product model.

     from rest_framework import serializers
     from .models import Product
     
     class ProductSerializer(serializers.ModelSerializer):
         class Meta:
             model = Product
             fields = '__all__'
     

2. Create Views:

   • In views.py, create API views to handle product data.

     from rest_framework import viewsets
     from .models import Product
     from .serializers import ProductSerializer
     
     class ProductViewSet(viewsets.ModelViewSet):
         queryset = Product.objects.all()
         serializer_class = ProductSerializer
     

Step 7: Create a Simple Front Page

• Use Vue to create a front page that displays the latest products by fetching data from the Django API.

Step 8: Implement Shopping Cart Functionality

1. Set Up Vuex for State Management:

   • Install Vuex:

     npm install vuex
     

   • Create a store to manage the shopping cart state.

2. Add to Cart Feature:

   • Implement functionality to add products to the cart.

Step 9: Implement User Authentication

1. Create User Registration and Login:

   • Set up Django’s built-in authentication system.
   • Create API endpoints for registration and login.

2. Create Account Page:

   • Design a simple my account page to manage user information and orders.

Step 10: Payment Processing with Stripe

1. Set Up Stripe:
   • Create a Stripe account and get your API keys.
   • Implement payment functionality in your checkout process.

Step 11: Deployment

1. Deploy Django Application:

   • Use a platform like Heroku or DigitalOcean to host your backend.

2. Deploy Vue Application:

   • Generate production files and configure your server (e.g., Nginx) to serve your Vue app.

Conclusion

You have successfully built an e-commerce website using Django and Vue.js, complete with product management, user authentication, and payment processing. To enhance your site, consider adding features like order tracking, user reviews, and advanced search options. Explore the provided repository links for source code and additional resources. Happy coding!