AskMe App

This single page application is a Quora-like website that is built with Django and VueJS. Once registered, users will be able to post questions on any topic and answer any question(s) on the site. In addition, they will be able to vote for the best answers added to each question using a Like button; they will also be able to edit or delete their questions or answers at anytime.

The backend of the application was built first, followed by the frontend interface.

Table of Contents

• Main Technologies
• REST APIs
• Demo
  • 1 - Authentication
  • 2 - Account Creation
  • 3 - Question Component
  • 4 - Answer Component
  • 5 - 404 Not Found
• Configuration
  • Create a virtual environment in the directory
  • Install packages
  • Django
• Additional Resources
• Commands
  • Slug Testing
  • Vue CLI

Main Technologies

• Django
• Django Rest Framework
• Vue.JS
• Node.JS
• Postman

REST APIs

All the APIs were built in Django REST Framework, read api.md for more

Demo

1 - Authentication

• User cannot access “JustAsk!” site until he or she is logged in
• User will be asked to enter the correct username and/ or password if the incorrect credentials were entered
• User will be directed to “JustAsk!” homepage after successful login, he or she can choose to logout anytime

2 - Account Creation

3 - Question Component

• Ask new question
  • User can post a new question by clicking on the “Ask Question” button on the homepage
  • The question cannot be empty and can only have maximum length of 240 characters
• Edit the question
  • User can only edit his/ her own question
  • The question content will be reflected instantly after the edit
• Delete the question
  • User can only delete his/her own question, this cannot be undone

4 - Answer Component

• Each question has a counter (in the homepage) to count its number of answers
• Publish an answer
  • User can answer to any question, but only once in each question
  • The answer cannot be empty and can only have maximum length of 240 characters
• Edit the answer
  • User can only edit his/ her own answer
  • The answer content will be reflected instantly after the edit
• Delete the answer
  • User can only edit his/ her own answer, this cannot be undone
• Like or unlike the answer
  • User can only like or unlike the other users’ answers
  • Each answer has its own counter to count how many people like that answer

5 - 404 Not Found

Configuration

Create a virtual environment in the directory

In Windows environment: python -m venv ./venv source ./venv/Scripts/activate

Install packages

• Django and Django Rest Framework: pip install django djangorestframework
• View installed packages: pip freeze
• Export the list of installed packages to requirements.txt: pip freeze > requirements.txt
• Django Rest Auth: pip install django-rest-auth

Django

• Initialize the project: django-admin startproject JustAsk .
• Create users application: python manage.py startapp users

Additional Resources

• Using a custom user model
• django-registration Documentation
• DRF - Permissions

Commands

Slug Testing

python manage.py shell
>>> from django.contrib.auth import get_user_model
>>> custom_user = get_user_model()
>>> u = custom_user.objects.first()
>>> u
<CustomUser: joshua>
>>> from questions.models import Question
>>> q = Question.objects.create(author=u, content="First Question!")
>>> q.slug
'first-question-8cb6ay'

Vue CLI

In Node.js Command Prompt:

• Install Vue CLI: npm i -g @vue/cli
• Create Vue project: vue create <project-name>
• Run Vue project: npm run serve