Repository files navigation

A blog project built using

Django Web Framework,Django REST Framework,Graphene Django,Cookiecutter Django,HTMX,Vue.js 3,Quasar Framework,Tanstack Vue Query,Vue Apollo,Vue-multiselect,

Full Review

• Authenticated users can:

  • Access a GraphQL endpoint and run several Quries and CRUD Mutations.

  • Access a Rest API endpoint and run CRUD operations.

  • Create, Read, Update and Delete (CRUD) blog posts on the website.

  • Add comments on blog posts, but the comments will not be visiable until the website admin approves it.

  • Like Blog posts and Add them to their favorite list (using HTMX).

  • Access their profile which lists all their blog posts and their favorite posts.

• All users can read or search for the posts on the blog.

• Users can access separate frontend project built using Vue.js 3, Tanstack-Vue-Query, Vue-Apollo 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.

Currently in Vue frontend users can:

• Register for an account and log in to their account (users will be authenticated using Django Rest Framework Session Authentication).

• Add tags to blog using a Rest API endpoint and GraphQL endpoint.

• Perform CRUD operations to blog posts using both REST API and GraphQL.

• Perform CRUD operations to add comments to blog posts using both REST API and GraphQL.

• Add and remove posts to and form their favorite posts list.

• Access pages that show their added blog posts and their favorite posts.

• Search for blog posts by title and limiting the results using both REST API and GraphQL

• Youtube

• Article

This project is a Django project calledblog_backend and it has four registered apps and one third-party app.

• Theblog app which contains an app-level templates and urls, used for most of the functionalities of our app, like, models, forms, views, urls, and custom template tags.

• Theapi app which contains the Django Rest Framework integration used to build a REST API.

• Thegraphql_app which contains the Graphene Django integration used to build a GraphQL endpoint.

• Theusers app which usesdjango.contrib.auth.urls to allow users register and login to their accounts.

• crispy forms third-party app which beautify django forms design.

• Create Django models and define relationships between the database fields.

• Use both Django Class-based and Function-based views.

• Create custom Django template tags, (In this project I created a simple custom template tag that return the number of comments on each blog post).

• How to use page pagination on your website.

• How to associate each blog post to its author.

• How to protect your post so that only you who can modify or delete it.

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

• Create a search form on your website.

• And many more.

• Make sure that bothPostgreSQL database andMailpit Email client are installed and running in your system.

• Create a PostgreSQL database, This project uses PostgreSQL version 16.

• Open the terminal or CMD to create a virtual environment like Python virtual environment (venv) or pipenv and activate it.

  • python -m venv venvCreate the venv

  • source venv/bin/activateOn Linux

  • venv/Scripts/activateOn Windows

  • source venv/Scripts/activateGit Bash on Windows

• Change directory to django_blog_backendcd django_blog_backend

• Install local.txt requirements file:python -m pip install -r requirements/local.txt

• Export database default url using the following terminal command, In this example PostgreSQL is installed locally, database name is django-blog-backend, and database credentials are => username: admin / password: 1234:

export DATABASE_URL=postgres://admin:1234@127.0.0.1:5432/django-blog-backend

• Create the database by running the following commands:python manage.py makemigrationspython manage.py migrate

• Create a super user:python manage.py createsuperuser

• Run the project:python manage.py runserver

• Before logging in to the Django website make sure that Mailpit email client is running in your system torecieve an email activation link.

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

• Clone the repository: git clonehttps://github.com/Moustafa-Shaaban/Advanced_Django_Blog.git

• Change directory to docker_blog_backend directorycd docker_blog_backend

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

docker-compose -f docker-compose.local.yml build

• Create the database by running the following commands:

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

• Create a super user:

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

• Run the test using pytest:

docker compose -f docker-compose.local.yml run --rm django test docker_blog_backend/blog

• Now run the project:

docker-compose -f docker-compose.local.yml up

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

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

cd vue-frontendnpm install

• Run the Vue.js 3 frontend project:

    npm run dev

For more information about the available commands in this project check the Cookiecutter DjangoDocumentation

• Django HTMX Modal Forms

• Django HTMX Toasts

• Toast Up Your Django Messages with ToastifyJs

• htmx in Django by examples

• Testing

• Date Field in Forms

• How To Use the GitHub GraphQL API in Vue.js with Vue apollo

• Django Session-based Auth for Single Page Apps

• Building a CRUD client with Vue, TypeScript, vue-query

queryReturnAllPosts {allPosts {idtitlecontentupdatedAtcomments {idcommentuser {username      }    }tag {idname    }  }}

queryreturnPostBySlug($slug:String!) {postBySlug(slug:$slug) {idtitlecontentauthor {usernameavatar        }updatedAtcomments {idcommentuser {username          }        }tag {idname        }      }    }

and in the variables:

{"slug: "post-1"}

queryReturnMyPost {myPostsWithFilters {edges {node {idtitlecontentupdatedAtcomments {idcommentuser {username          }        }tag {idname        }      }    }  }}

queryPostByTitle {allPostsWithFilters(title:"Post Number 1") {edges {node {idtitleupdatedAtcontentcomments {idcomment        }      }    }  }}

queryAllComments {allComments {iduser {name    }commentpost {idtitlecontentupdatedAt    }  }}

queryAllTags {allTags {idnameslug  }}

mutationcreateTag {createTag(input: {name:"Python"  }) {tag {idname    }  }}

mutationUpdateTag {updateTag(id:1,name:"Python") {tag {idname    }  }}

mutationDeleteTag {deleteTag(id:6) {success  }}

mutationCreatePost {createPost(input: {title:"Post number 1",content:"Post number 1 content",tags: [      {slug:"python" }    ]      }) {post {idcontent    }  }}

mutationCreateComment {createComment(inputs: {postSlug:"post-1",comment:"Great post",   }) {post {title,comments {commentuser {username        }      }    }  }}

queryPostsByAuthor {postsByAuthor(author:"admin") {idtitleupdatedAttag {name    }contentcomments {iduser {username      }comment    }  }}

queryPostsByTag {postsByTag(tag:"Python") {idtitleupdatedAttag {name    }contentcomments {iduser {username      }comment    }  }}

queryPostsByTitle {postByTitle(title:"Post number 1") {idtitleupdatedAttag {name    }contentcomments {iduser {username      }comment    }  }}

queryPostsByTitleWithDjangoFilters {allPostsWithFilters(title_Icontains:"Post number") {edges {node {idtitleupdatedAttag {name        }contentcomments {iduser {username          }comment        }      }    }  }}

queryPostsByTitleWithDjangoFilters {allPostsWithFilters(title_Istartswith:"Post number") {edges {node {idtitleupdatedAttag {name        }contentcomments {iduser {username          }comment        }      }    }  }}