Build a Social Media App with Django and Vue | Full Stack Course

Welcome to this Django and Vue full-stack tutorial where we will be building a social media app using Django at the backend and Vue.js at the frontend. In this tutorial, you will learn how to create a full-fledged social media app with features like user authentication, posting updates, following other users, and more.

Before we get started, make sure you have Python, Django, and Vue.js installed on your machine. You can install Python from the official Python website and Django using pip. Vue.js can be installed using npm or yarn.

Let’s start by creating a new Django project and setting up a virtual environment. Open your terminal and run the following commands:

mkdir social_media_app
cd social_media_app
python3 -m venv env
source env/bin/activate
pip install django
django-admin startproject social_media_project
cd social_media_project

Next, let’s create a Django app for our social media functionality. Run the following command in your terminal:

python manage.py startapp social_media_app

Now, let’s create our models for the social media app. Inside the social_media_app directory, open models.py and define the following models:

from django.db import models
from django.contrib.auth.models import User

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    bio = models.TextField(blank=True)
    followers = models.ManyToManyField(User, related_name='followers')
    following = models.ManyToManyField(User, related_name='following')

class Post(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    text = models.TextField()
    timestamp = models.DateTimeField(auto_now_add=True)
    likes = models.ManyToManyField(User, related_name='likes')

Once you have defined the models, run the following commands to create and apply the migrations:

python manage.py makemigrations
python manage.py migrate

Next, let’s create serializers for our models. Create a new file serializers.py inside the social_media_app directory and define the following serializers:

from rest_framework import serializers
from .models import Profile, Post

class ProfileSerializer(serializers.ModelSerializer):
    class Meta:
        model = Profile
        fields = '__all__'

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = '__all__'

Now, let’s create views for our API endpoints. Create a new file views.py inside the social_media_app directory and define the following views:

from rest_framework import viewsets
from .models import Profile, Post
from .serializers import ProfileSerializer, PostSerializer

class ProfileViewSet(viewsets.ModelViewSet):
    queryset = Profile.objects.all()
    serializer_class = ProfileSerializer

class PostViewSet(viewsets.ModelViewSet):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

We also need to define URLs for our API endpoints. Update the urls.py file inside the social_media_app directory with the following code:

from rest_framework import routers
from .views import ProfileViewSet, PostViewSet

router = routers.DefaultRouter()
router.register(r'profiles', ProfileViewSet)
router.register(r'posts', PostViewSet)

urlpatterns = router.urls

Finally, let’s include the API URLs in the main urls.py file. Update the urls.py file inside the social_media_project directory with the following code:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('social_media_app.urls')),
]

That’s it for the Django backend. Next, let’s move on to the Vue.js frontend. Create a new Vue project by running the following commands in your terminal:

npm install -g @vue/cli
vue create social_media_frontend
cd social_media_frontend

Next, let’s install Axios, Vuex, and Vue Router libraries by running the following commands:

npm install axios vuex vue-router

Now, let’s create the frontend components for our social media app. Inside the src folder of your Vue project, create the following components:

• Profile.vue: Display user profile information
• PostList.vue: Display a list of posts
• PostForm.vue: Allow users to create new posts
• Login.vue: Allow users to log in
• Register.vue: Allow users to register

For each component, define the template, script, and style sections as needed. You can use Bootstrap or another CSS framework to style your components.

Next, let’s set up the Vuex store to manage the application state. Create a new file store.js inside the src folder and define the following store:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    posts: [],
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setPosts(state, posts) {
      state.posts = posts
    },
  },
  actions: {
    async fetchPosts({ commit }) {
      // Make API call to fetch posts
      commit('setPosts', posts)
    },
    async createPost({ commit }, post) {
      // Make API call to create a new post
    },
  },
})

Don’t forget to import and initialize the Vuex store in your main Vue instance:

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

Finally, let’s set up Vue Router to navigate between different components. Create a new file router.js inside the src folder and define the following routes:

import Vue from 'vue'
import VueRouter from 'vue-router'
import PostList from './components/PostList.vue'
import PostForm from './components/PostForm.vue'
import Login from './components/Login.vue'
import Register from './components/Register.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: PostList },
  { path: '/post', component: PostForm },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
]

export default new VueRouter({
  mode: 'history',
  routes,
})

In your main Vue instance, import and initialize the Vue Router:

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router.js'

Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

That’s it! You have now successfully built a social media app using Django at the backend and Vue.js at the frontend. You can now run your Django server and Vue development server to see the app in action.

I hope you found this tutorial helpful. Happy coding!