Skip to content

Notes app built with Django, Django Rest Framework, Graphene Django (GraphQL), Vue.js 3 and Quasar Framework

License

Notifications You must be signed in to change notification settings

MoustafaShaaban/Django-Notes-Project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Django-Notes-Project

A notes project built using Django Web Framework, Django REST Framework, Graphene Django, Cookiecutter Django, Vue.js 3, Quasar Framework, Tanstack Vue Query, Vue Apollo

Project Goals

  • Users can register for an account and sign in (handled by cookiecutter Django).

  • Authenticated users can:

    • Perform Create, Read, Update and Delete (CRUD) operations on notes and list all their added notes on the website.

    • Protect the notes so that only its owner can update or delete it (in the website and GraphQL endpoint).

    • Throw a 403 forbidden page to any user who try to guess the URL to change something they are not authorized to do.

    • Access a GraphQL endpoint and Run several Quries and Mutations including (CRUD) Mutations.

    • Access a REST API endpoint and perform CRUD operations.

  • Users can access separate frontend project built using Vue.js 3 and Quasar Framework which connects with django through Django Rest Framework using Session Authentication.

  • The frontend vue.js app also allows users to perform CRUD operations through connecting to a REST API and a GraphQL endpoints.

To get started with this project

docker-compose -f local.yml build

  • Create the database by running the following commands:

docker-compose -f local.yml run --rm django python manage.py makemigrations

docker-compose -f local.yml run --rm django python manage.py migrate

  • Create a super user:

docker-compose -f local.yml run --rm django python manage.py createsuperuser

  • Now run the project:

docker-compose -f local.yml up

  • Open the web browser and go to http://localhost:8000/ to see the results.

  • Start a new terminal and change directory to vue-frontend directory and install the requirements:

cd vue-frontend

npm install
  • Run the Vue.js 3 frontend project:
    npm run dev

References:

GraphQL Queries and Mutations with Variables Examples:

  • Get all Notes:
    query getNotes {
        allNotes {
            id
            title
            content
            createdOn
            user {
                username
            }
        }
    }
  • Query note instance by its Id:
    query noteById($id: Int!) {
        noteById(id: $id) {
            id
            title
            content
        }
    }
  • Create note mutation:
    mutation createNote($title:String, $content: String) {
            createNote(input: {
            title: $title,
            content: $content
        }) {
            success
            note {
                id
                title
                content
                createdOn
                user {
                    username
                }
            }
        }
    }
  • Update note mutation:
    mutation updateNote($id: Int!,$title:String!, $content: String!) {
        updateNote(id: $id, input: {
            title: $title,
            content: $content
        }) {
            success
            note {
                id
                title
                content
                createdOn
                user {
                    username
                }
            }
        }
    }
  • Delete note mutation:
    mutation deleteNote($id: Int!) {
        deleteNote(id: $id) {
            success
        }
    }