Django Vue.js Starter Blog

A simple blog application created using Django, Vue.js and GraphQL.

Interest in learning how to create this demo app with Django and Vue? Take a look at this tutorial -> How to Create a Modern App with Django and Vue

Features

• Including recent posts, category, tag, and post page
• User registration and login. Built with JWT and Vuex (migrated to Pinia, which is the recommended package for stores).
• Comment section. Only authenticated users can leave comment, and it won’t show up until approved by the admin.
• User profile page. Guest user can see and edit all comments that belong to that user.
• Like system. Guest user can like posts and comments.

Coming Soon

• Author verification. Guest user can verify to become authors, who can post new articles.

Screenshots

Home Page

All Categories

All Tags

Sign In Page

Sign Up Page

Post Page

Comment Section

User Profile Page

User Profile Page Comment Section

Django Admin Panel

Installation

For the backend, first create a virtual environment.

cd backend
python3 -m venv env
source env/bin/activate

Install required packages.

pip install -r requirements.txt

Run migrations.

python manage.py makemigrations
python manage.py migrate

If you get this error: ImportError: cannot import name 'force_text' from 'django.utils.encoding', you can replace force_text with force_str like this article. This issue should be resolved in future versions of Django.

Start dev server.

python manage.py runserver

For the frontend, install packages.

cd frontend
npm install

If you are getting errors when installing packages, just run npm install --force. Some packages has been deprecated, but everything still work for now. I will try to update this project as soon as possible.

Start frontend dev server.

npm run serve