How to create a fullstack application using Django and Python Table of Contents

Tuesday, September 3, 2024 at 4:01 AM | 10 min read

Last modified on Tuesday, May 26, 2026 at 8:10 PM

#macOS, #django, #fullstack development, #python3, #table of contents, #series

A photo of Venus, a banana ball python, coiled up and surrounded by sprinkles

Photo by Timothy Dykes on unsplash.com

This series is based on a series entitled A Complete Beginner's Guide to Django by Vitor Freitas on his site simpleisbetterthancomplex.com/ from over 7 years ago. I have made updates to outdated code/content, added features, and am making some changes and additions to the structure, functionality, and design. It is thanks to him that I learned a lot I did not learn anywhere else about Django! Check it out to compare what he did in his series and development sequence compared to mine. I hope you will enjoy building this project, I know I have!

You can also check out the GitHub repository for django-boards. Each section is associated with a different branch, so you can go back in history on GitHub to follow the development of this project from the beginning. The link to the repository is included under Related Resources in each section of this series. It is also available under Related Resources here.

If you have any questions, you can also reach out to me in Giscus comments at the end of any given posts. Simply click on "Load comments" at the bottom of a post. I will be initiating discussions so that you can do so. Please note that you do have to have an account on Github to be able to post comments.

Series Table of Contents

  1. How to create a fullstack application using Django and Python Part 1: In this section, I create the project directory, install pyenv with Homebrew, install Python 3.12.5 with pyenv, execute the pyenv local command, install virtualenv and create a virtual environment, activate and deactivate the environment, and install Django.
  2. How to create a fullstack application using Django and Python Part 2: In this section, I create a Django project inside the Django Boards application, break down the project structure and describe what each component means and does, and after creating the Django project, I start up the development server.
  3. How to create a fullstack application using Django and Python Part 3: In this section, I compare Django projects vs apps, create my first app in the Django project, configure the boards app in the django_boards project, write the first boards app view, tell the Django project when to serve the view, break down the code in urls.py, and run the development server to view the results of the changes made to views.py and urls.py.
  4. How to create a fullstack application using Django and Python Part 4: In this section, I discuss how to install the python-dotenv package and why it is crucial to do so as to safeguard sensitive information the Django application depends on.
  5. How to create a fullstack application using Django and Python Part 5: In this section, I discuss and show how one can change a project name after it has already been created and migrated. It's really not as difficult as it sounds!
  6. How to create a fullstack application using Django and Python Part 6: In this section, I go over aspects of designing Django Boards. I discuss the basic functionalities and structure of Django Boards, the difference between a standard and admin user, use case diagrams, UML class diagrams, Class diagram relationships, and wireframes.
  7. How to create a fullstack application using Django and Python Part 7: In this section, I discuss the Django model basics, I compare the UML Class Fields Diagram to the models.py source code, I migrate the models with the makemigrations command, apply the model migrations with the migrate command, play with the Models API, and discuss the Django Model manager.
  8. How to create a fullstack application using Django and Python Part 8: In this section, I add an index.html template to a directory called static, test the index (home) page, set up the static files, download Bootstrap, configure the static directory in settings.py, discuss the collectstatic command, load the Bootstrap CSS file in index.html, and edit index.html to include Bootstrap styling.
  9. How to create a fullstack application using Django and Python Part 9: In this section, I introduce the Django Admin, configure the Django Admin by creating a superuser, register the boards app in boards/admin.py, add a board in the Django Admin interface, and delete a board in the Django Admin interface.
  10. How to create a fullstack application using Django and Python Part 10: In this section, I update the UML Class Diagrams and wireframe(s) to include the PostLike Model, and I clarify the concepts of "topic" and "post".
  11. How to create a fullstack application using Django and Python Part 11: In this section, I update the class models in boards/models.py to include PostLike, migrate the updated models, add the dynamic path for a single board in django_boards/urls.py, create the board_topics view inside boards/views.py, create the topics.html template inside the templates directory, and create/run tests for BoardTopics.
  12. How to create a fullstack application using Django and Python Part 12: In this section, I add the IndexTests class to boards/tests.py, update templates/index.html to make a failed test pass, write a test for linking back to the index/home page from the single Board page, update templates/topics.html to link back to the index/home page, and update templates/topics.html so a failed test will pass.
  13. How to create a fullstack application using Django and Python Part 13: In this section, I create a reusable, base template called base.html, integrate it into index.html, integrate it into topics.html, test django_boards after making those changes, add a navigation menu to base.html, create an app.css file in the static/css directory, change the logo font with a Google font which I import into app.css, and tweak the logo styling with CSS.
  14. How to create a fullstack application using Django and Python Part 14: In this section, I build a NewTopicForm.
  15. How to create a fullstack application using Django and Python Part 15: In this section, we create an accounts app where everything related to user accounts resides.
  16. How to create a fullstack application using Django and Python Part 16: In this section, I demonstrate an alternative to the original test_form_inputs test in which we used the .assertContains() method to verify the existence of specific inputs residing in the signup form. I install Beautiful Soup 4 and Soup Sieve along with the html5lib HTML parser, and then re-create the test_form_inputs test using those packages. The test is much shorter, and my approach to discovering the ids of the inputs I want to grab by inspecting the signup form element in the browser is quicker and much easier to read!
  17. How to create a fullstack application using Django and Python Part 17: In this section, I improve signup.html template design, add a logout view and route, create a dropdown menu for logged in users, create a login.html template, url, and redirect, create a reusable template, add non-field errors to login.html, create custom template tags to use in form.html, and test the template tags.
  18. How to create a fullstack application using Django and Python Part 18 : In this section, I create the password_reset routes, views, tests, and templates. The results of the password reset process are output to the Terminal console. I debug the password_reset_confirm_tests tests to find out what the actual csrf token is and hard code it into the test_csrf (function) test. I re-use the Beautiful Soup 4 and Soup Sieve packages to refactor the test_form_inputs (function) test.
  19. How to create a fullstack application using Django and Python Part 19: In this section, I implement protecting views, I configure the Login next redirect, I create @login_required tests, I update the topic posts view, create the topic_posts.html template and related tests, update the reply post (reply_topic) view and create related tests, discuss QuerySets and use them to improve the index/home view, improve the topics view, update the board_topics view, update the topics.html template, and add a new field to the Topic model.
  20. How to create a fullstack application using Django and Python Part 20: In this section, I re-organize the accounts and boards tests content, refactor password reset-related django_boards/urls.py, fix the password reset-related accounts tests failures, add the password_change URL to templates/base.html, fix the 302 redirect-related failure in the boards.tests.test_view_reply_topic_tests, and add the reply_topic URL to templates/topic_posts.html.
  21. How to create a fullstack application using Django and Python Part 21: In this section, I create a generic class-based (GCBV) PostUpdateView, PostDeleteView, and PostDetailView, create the associated urls and templates, create PostUpdateView, PostDeleteView, and PostDetailView tests, debug the code and tests, and check the test coverage of the django_boards project code.
  22. How to create a fullstack application using Django and Python Part 22: In this section, I experiment with the Python shell to demonstrate how pagination works under the hood, I implement a Generic Class Based view and pagination to the index/home view, add Class Based View pagination to the topics view and topic_posts view, add Bootstrap 5 pagination to the associated templates, refactor the associated urls in urls.py, and refactor the associated tests. I also add a copy link button to copy the link to a topic's replies (posts), a scroll top and scroll bottom button using JavaScript to enable their functionality, and add JavaScript code to make the scrollbar return to the bottom of the page when a pagination item (page number) is clicked.
  23. How to create a fullstack application using Django and Python Part 23: In this section, I create a generic class based view called UserUpdateView (My Account view), associated tests, a URL, and template.
  24. How to create a fullstack application using Django and Python Part 24: In this section, I add markdown functionality to the Post model, the reply_topic.html and topic_posts.html templates, and I implement ES6 modules to our JavaScript code. This means refactoring the copy (link) button and associated html markup and CSS. I refactored and modularize the scroll top and bottom button JavaScript code and associated CSS, modularize the pagination behavior JavaScript code, import the ES6 modules into a new file called app.js, and add the type="module" attribute to the app.js script tag in templates/base.html.
  25. How to create a fullstack application using Django and Python Part 25: In this section, I add the Humanize package to our templates/topics.html, add the Gravatar package for user gravatars, and add the django-avatar package for automatic implementation of a user avatar when one is absent.
  26. How to create a fullstack application using Django and Python Part 26: In this section, I extend the built-in Django User with a Profile model containing extra fields, create the Profile model in accounts/models.py, extend the User model using a one-to-one relationship with the built-in User, add a profile url to accounts.urls.py, moved the account url in boards/urls.py to accounts/urls.py, install the pillow package to enable use of the ImageField in the Profile model, configure urls.py for user-uploaded media files during development, implement signals.py in the accounts app, create an update profile form, create a profile.html template, delete existing users pre User profile and create new ones, and make styling adjustments to various templates.
  27. How to create a fullstack application using Django and Python Part 27: In this section, I add timezone.now() to templates/reply_topic.html, implement better control over the view count in templates/index.html, limit replies to the last 10 posts on templates/reply_topic.html, redirect the user to the last topic posts page instead of the first, update boards/tests/test_view_reply_topic.py, create tests for the UpdateProfileForm and profile view, and profile signals, create a ProfileListView, paginate the ProfileListView, create a ProfileDetailView, customize the profiles.html and profile.html navigation and create associated includes, remove the scrolldown button and refactore the scrolltop button, move footer HTML markup into a footer.html include, sanitize our Markdown, add code formatting and highlighting to our Markdown, create tests for the ProfileListView, protect function based profile view, and profile_detail view, update accounts/tests/test_form_signup_test.py, fix the topic posts avatar issue, and explain the extended profile functionality.
  28. How to create a fullstack application using Django and Python Part 28: In this section, I add a like button to the post_detail.html template. I add a likes field to my Post model, create a function based like_post view in boards/views.py, create JavaScript using the fetch() method for the Like button functionality on the client side, implement history.go(0) in the JavaScript to reload the page after the Like button is clicked to update the number of likes, create a like URL in boards/urls.py, and add post.likes to templates/post_detail.html.
  29. How to create a fullstack application using Django and Python Part 29: In this section, I create tests for the like_post view.
  30. How to create a fullstack application using Django and Python Part 30: In this section, I place the default Django authentication system related templates into a new directory called registration inside the templates directory, I move the associated URLs into accounts/urls.oy, and add the associated default url pattern to django_boards/urls.py. This helps ensure that django-boards deployment to Heroku would be successful.
  31. How to create a fullstack application using Django and Python Part 31:In this section, I modify settings in django_boards/settings.py for deployment on Heroku. I create a new SECRET_KEY for use on Heroku, add gunicorn, dj-database-url, psycopg2 and psycopg2-binary packages, create a requirements.txt file, create a Procfile, create a .python-version file, discuss the purpose of the os module, set DEBUG to false on Heroku, differentiate between DEBUG value in local development and production on Heroku, configure database access, run the collectstatic command for serving static files in production, and install and configure whitenoise.
  32. How to create a fullstack application using Django and Python Part 32: In this section, I prepare my django-boards application for deployment to Render. I update my existing project for deployment to Render, create a Render account, create a DEBUG environment variable for production, configure my media files for production, configure my static files for production, configure ny database settings for production, add the whitenoise package to make my static files persist on Render, create a build script for deployment on Render, install Gunicaon and Uvicorn, create a Django project in the Render dashboard, add the Postgres managed database service, create a web service, create a render.yaml file, create a persistent Disk for my web service's media files, create an SSH key pair locally, connect to my Render web service with SSH, add my SSH key pair to the ssh-agent on my local machine, upload default.jpg to my django-boards web service, transfer default.jpg to Render using the scp command via SSH, and create a superuser in the Render shell.
  33. How to create a fullstack application using Django and Python Part 33: In this section, I get a custom domain for my Django Boards application from Namecheap, connect the custom domain to Render, configure domain verification with Namecheap for Mailtrap backend email service, add a new app called faqs, create the models for faqs, create a view for faqs, create a URLconf for the faqs_index view, configure the global URL configuration for faqs_index view in django_boards/urls.py, migrate faqs, and make the faqs app modifiable in the admin interface.