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

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

Last modified on Thursday, July 16, 2026 at 12:43 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 seven 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 as well as here.

If you have any questions, you can also reach out to me in Giscus comments at the end of any given post. 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 need 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 I changed a project name after it had already been created and migrated.

  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 would 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 talk about how to save user input to the database, build a NewTopicForm, create a new route called new_topic, a new_topic view, a new_topic form template, NewTopicTests, implement the CSRF csrf_token in the form, update topics.html template to include a listing of all topics, create a button going to the new_topic view in topics.html, add Model Meta to NewTopicForm, refactor boards/views.py to include form validation, use the Forms API in new_topic.html, add the help_text attribute to the Textarea widget in forms.py, use django-widget-tweaks with Bootstrap, implement Bootstrap validation tags in new_topic.html, and create a re-usable form template.

  15. How to create a fullstack application using Django and Python Part 15: In this section, I create an accounts app where everything related to user accounts would reside, create a signup view in accounts/views.py, a signup.html template, and I create a SignUpTests class in accounts/tests.py. I tweak templates/base.html to account for authentication, implement auth_login in the signup view, and reference the authenticated user in templates/base.html. I test for a successful signup with a SuccessfulSignUpTests class, test for signup invalid data with an InvalidSignUpTests class, and create an accounts/forms.py file. I create a test to verify HTML inputs in templates/signup.html, and modularize my boards and accounts tests so that I don't have to deal with such large files.

  16. How to create a fullstack application using Django and Python Part 16: In this section, I demonstrate an addition to the original test_form_inputs test in which I use 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 last approach to discovering the ids of the inputs I want to grab by iterating over the signup form input elements 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 the 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 the login.html template, create custom template tags to use in the form.html includes, and create tests for 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. Just as in part 15, 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, and I create @login_required tests. I update the topic posts view, create the topic_posts.html template and related tests. I update the reply post (reply_topic) view and create related tests, discuss QuerySets and use them to improve the index/home view. I improve the topics view, update the board_topics view, update the topics.html template, and add a new field to the Topic model. In section 20, I will debug the five tests that are currently failing.

  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, and add Bootstrap 5 pagination to the associated templates. I 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). I create 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 my JavaScript code. This means refactoring the copy (link) button and associated HTML markup and CSS. I refactor 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 my 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, and extend the User model using a one-to-one relationship with the built-in User. I add a profile URL to accounts.urls.py, move the account URL in boards/urls.py to accounts/urls.py, and install the pillow package to enable use of the ImageField in the Profile model. I configure urls.py for user-uploaded media files during development, implement signals in the accounts app, and create an update profile form. I create a profile.html template, delete existing users pre User profile and create new ones, and make styling adjustments to various templates. I couldn't have added image functionality to Django Boards without Hana Belay's tutorial series on dev.to. I have included links to her Django profile-related posts under Related Resources. I also have to give credit to Renne Rocha, who wrote another article regarding extending the built-in Django User with a Profile model. Renne did not get into extensive detail about the whole process, but the explanation regarding extending the built-in Django User and signals was super!

  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_tests.py, create tests for the UpdateProfileForm and profile view, and profile signals, create a ProfileListView, paginate the ProfileListView, create a profile_detail view, customize the profiles.html and profile.html navigation and create associated includes, remove the scrolldown button and refactor the scrolltop button, move footer HTML markup into a footer.html include, sanitize my Markdown, add code formatting and highlighting to my Markdown, create tests for the ProfileListView, protect the 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 and then fix them after submitting them for code review. I come to realize that there is a credential mismatch and status codes that need fixing. I also discover that I have to change the content-type in self.assertEqual(response['content-type'], 'text/html; charset=utf-8') to self.assertEqual(response['content-type'], 'application/json'). In the process of correcting my code, I realize how important it is not to develop applications alone.

  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.py, 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, and add gunicorn, dj-database-url, psycopg2 and psycopg2-binary packages. I create a requirements.txt file, a Procfile, and a .python-version file. I discuss the purpose of the os module, set DEBUG to False on Heroku, and differentiate between DEBUG value in local development and production on Heroku. I 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, create a Render account, and create a DEBUG environment variable for production. I configure my media files, static files, and my database settings for production. I add the whitenoise package to make my static files persist on Render, and create a build script for deployment on Render. I install Gunicorn and Uvicorn, create a Django project in the Render dashboard, and add the Postgres managed database service. I create a web service, a render.yaml file, a persistent Disk for my web service's media files, and an SSH key pair locally. I connect to my Render web service with SSH, add my SSH key pair to the ssh-agent on my local machine, and upload default.jpg to my django-boards web service. I transfer default.jpg to Render using the scp command via SSH, and create a superuser in the Render shell. Later I come back and create a new settings directory where I separate my local development environment from my production environment.

  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.