MoustafaShaaban/Django-Notes-Project

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

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

• Make sure that Docker and docker-compose are installed in your system.

• Clone the repository: git clone https://github.com/MoustafaShaaban/Django-Notes-Project.git

• Change directory to backend directory cd backend

• Build the docker image to develop the project locally using docker-compose:

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:

• Django Session-based Auth for Single Page Apps

• Use React and Spring Boot to Build a Simple CRUD App

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
        }
    }