DEV Community: Atharva Shah

Setting Up CI/CD to Netlify for Static Sites via Github

Atharva Shah — Wed, 10 May 2023 17:49:07 +0000

This tutorial was originally published on my technical blog. Check it out if you like Python, Data Science, AI, Web Development, and NLP related guides.

Description

This article provides step-by-step instructions on how to set up continuous integration and continuous deployment (CI/CD) to Netlify for static site deployments using Github. Readers will learn how to optimize their deployment pipeline for maximum efficiency, streamline their workflow and reduce the risk of errors.

I. Introduction

In today's fast-paced software development landscape, Continuous Integration and Continuous Deployment (CI/CD) have become crucial for ensuring high-quality software releases at a rapid pace. Netlify is a popular cloud-based hosting platform that provides an easy way to deploy static sites. By automating the deployment process with CI/CD, developers can focus on writing code and delivering features rather than manually deploying changes. In this article, we will explore how to set up CI/CD to Netlify for static site deployments. We will discuss the benefits of this approach, and provide a step-by-step guide for integrating Github with Netlify for a streamlined deployment process.

For this article, I will be using a Hugo static site that I used to build a personal portfolio and blog for my audience to demonstrate the CI/CD pipeline. Please take a close look at the Github Repository for the same.

II. Setting Up a Netlify Account

In order to set up CI/CD to Netlify for static site deployment, you will need to create a Netlify account. If you already have a Netlify account, you can skip this section and move on to the next section.

Netlify is a cloud-based service that offers continuous deployment, hosting, and serverless backend functionality for static websites. With Netlify, you can easily deploy and manage static sites with automatic CI/CD capabilities.

Creating a Netlify account To create a Netlify account, go to netlify.com and click the "Sign up" button in the upper right corner of the page. You can sign up with your GitHub, GitLab, or Bitbucket account or by using your email address.
Setting up a new site on Netlify Once you have created a Netlify account, you can set up a new site by clicking the "New site from Git" button on the Netlify dashboard. From there, you will need to select the Git provider that hosts your repository. In this case, we will be using GitHub.
Linking the site to a GitHub repository After selecting GitHub as the Git provider, Netlify will prompt you to authenticate with your GitHub account. Once authenticated, you will be able to select the repository that you want to link to your Netlify site. After selecting the repository, you will be presented with a list of configuration options for your site.

In the next section, we will discuss how to configure your GitHub repository for automatic deployments to Netlify.

III. Setting Up CI/CD to Netlify

CI/CD (Continuous Integration and Continuous Deployment) is a process that automates the building, testing, and deploying of code changes. By setting up CI/CD to Netlify for your static site via Github, you can ensure that your code changes are automatically tested, built, and deployed to your production site every time you make a commit.

Netlify provides a simple and intuitive way to configure CI/CD for your static site. Here's how to do it:

Configuring the Build Settings on Netlify

Before you can set up CI/CD to Netlify, you need to configure the build settings on Netlify. Netlify uses build plugins to configure the build process. Build plugins are reusable pieces of code that can be shared across different sites and projects.

To configure the build settings, follow these steps:

Go to your site's settings page on Netlify.
Click on the "Build & deploy" tab.
Scroll down to the "Build plugins" section.
Click the "Add build plugin" button.
Select the "Build Command" plugin.
In the "Command" field, enter the build command for your static site. For example, if you're using Jekyll, the build command would be "jekyll build". If you're using Hugo, the build command would be "hugo".
Click "Save".

Configuring the Deployment Settings on Netlify

Once you've configured the build settings, you need to configure the deployment settings on Netlify. Netlify provides several deployment options, including manual deploys, continuous deployment, and branch deploys.

To configure the deployment settings, follow these steps:

Go to your site's settings page on Netlify.
Click on the "Build & deploy" tab.
Scroll down to the "Deploy notifications" section.
Click the "Add notification" button.
Select the deployment method you want to use. For example, if you want to use continuous deployment, select "GitHub". If you want to use manual deploys, select "Manual deploys".
Follow the prompts to authenticate with GitHub and select the repository and branch you want to deploy.

That's it! Netlify will now automatically build and deploy your static site every time you push a new commit to the linked GitHub repository. If there are any errors in the build process, Netlify will notify you via email or Slack.

IV. Setting Up CI/CD with Github Actions

In the previous section, we set up the basic CI/CD configuration on Netlify. However, we haven't automated the process yet. In this section, we'll use Github Actions to automate our CI/CD process.

Introduction to Github Actions

Github Actions is a powerful tool that allows you to automate tasks directly in your Github repository. It works by defining workflows as code that are triggered by specific events such as push, pull request, or cron schedules. A workflow is made up of one or more jobs that can be run on different operating systems and virtual environments. Each job is made up of one or more steps that are executed in sequence. Steps are individual tasks, such as building and testing your code or deploying it to a server.

Github Actions provides a wide range of pre-built actions, which are individual tasks that can be used within your workflows. These actions are reusable, making it easy to build custom workflows without having to write much code.

Creating a Github Actions Workflow for the Static Site

To create a workflow, we need to create a YAML file in the .github/workflows directory in our Github repository. This file defines the workflow and its associated jobs and steps.

First, we need to define the event that triggers the workflow. In our case, we want the workflow to be triggered whenever changes are pushed to the main branch. Here's an example YAML configuration that achieves this:

codename: Deploy to Netlify
on:
  push:
    branches:
      - main

Next, we need to define the jobs that make up the workflow. In our case, we only need one job, which will build and deploy our site. Here's an example YAML configuration for the job:

codejobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Build site
        run: npm run build
      - name: Deploy site to Netlify
        uses: nwtgck/actions-netlify@v1
        with:
          publish-dir: ./dist
          production-command: echo 'No production command required for static site deployment'
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Let's go through each step of the job:

runs-on: ubuntu-latest specifies that the job will run on a Ubuntu environment.
actions/checkout@v2 checks out the code from Github so that it can be built and deployed.
npm install installs the dependencies required to build the site.
npm run build builds the site using the build command specified in our package.json file.
nwtgck/actions-netlify@v1 is an action that deploys our site to Netlify.
publish-dir: ./dist specifies the directory containing our built site.
production-command: echo 'No production command required for static site deployment' is not required for static site deployments.
NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID are environment variables that contain the API key and site ID for our Netlify account. These are passed in as secrets in the Github repository settings.

Once we've created this YAML configuration file, Github Actions will automatically detect it and run it whenever changes are pushed to the main branch.

Configuring the Workflow to Deploy to Netlify

Before we can deploy to Netlify using Github Actions, we need to configure the workflow to tell it where to deploy and how to authenticate with Netlify.

First, we need to set up an access token in Netlify to allow Github to deploy to our site. To do this, navigate to the Netlify dashboard and click on the site we want to deploy to. Then, click on the "Settings" tab and scroll down to the "Access tokens" section. Click the "New access token" button, and give it a name that reflects its use, such as "Github Actions deployment."

Next, select the desired permissions for the token. For deployment purposes, we only need to grant the "deploy" permission. Once we have selected the "deploy" permission, click the "Generate token" button at the bottom of the page. Netlify will generate a new access token, which we need to copy and store safely in our Github repository's secrets.

To add the Netlify access token to our repository's secrets, we need to navigate to the repository's "Settings" tab and click on "Secrets" on the left-hand side. Then, click the "New repository secret" button, and enter "NETLIFY_AUTH_TOKEN" as the name of the secret. In the "Value" field, paste the access token we just copied from Netlify. Finally, click the "Add secret" button to save the token.

Now that we have our access token set up and safely stored, we can add the deployment step to our Github Actions workflow. To do this, we need to modify the workflow YAML file we created earlier. We will add a new step at the end of the workflow to deploy the site to Netlify.

Here's an example deployment step that we can add to our YAML file:

codename: Deploy to Netlify
  uses: nwtgck/actions-netlify@v1
  with:
    NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
    NETLIFY_SITE_ID: your_site_id
    DIR_TO_UPLOAD: your_dir_to_upload

This step uses the "nwtgck/actions-netlify" Github Action, which simplifies the deployment process to Netlify. We need to provide the access token we just created, along with the site ID and directory we want to upload.

To find the site ID, navigate to the site's "Settings" tab in the Netlify dashboard and scroll down to the "Site details" section. The site ID will be listed under the site name.

Finally, we need to specify the directory we want to upload to Netlify. This directory should contain the built version of our static site. The directory can be specified using the "DIR_TO_UPLOAD" parameter in the YAML file.

Once we have added the deployment step to the workflow YAML file, we can commit and push the changes to Github. Github Actions will automatically run the workflow when changes are pushed to the repository, which will trigger the build and deployment process to Netlify.

With everything set up, we can now sit back and watch as our site is automatically built and deployed to Netlify every time we push changes to Github. This is a powerful workflow that simplifies the deployment process and frees up time to focus on developing our site.

V. Best Practices for CI/CD with Netlify and Github

Setting up CI/CD to Netlify via Github is a powerful combination that allows for seamless deployments of static sites. However, there are some best practices that can help optimize the process and ensure smooth operations. Here are some tips for optimizing your CI/CD pipeline and managing your Github repository and Netlify site:

Regularly test your deployment process: It's important to test your deployment process regularly to catch issues early on. You can do this by creating a test branch and testing the deployment process on a separate staging site before deploying to production.
Use version control effectively: Make sure to use version control effectively by using clear commit messages, creating meaningful branch names, and enforcing code reviews. This helps keep your codebase organized and makes it easier to roll back changes if needed.
Use environment variables: Netlify allows for the use of environment variables to keep sensitive information secure, such as API keys or access tokens. Make sure to use these variables and not hardcode any sensitive information into your deployment scripts.
Optimize build time: Netlify has a limit of 15 minutes for the build time of each deployment. If your build time exceeds this limit, you may run into issues. To optimize build time, make sure to only install necessary dependencies and remove any unnecessary files or processes.
Use caching: Caching is a great way to speed up build times and reduce the number of API calls needed. Netlify supports caching of dependencies, and Github Actions supports caching of build artifacts.
Monitor your deployments: Keep an eye on your deployments to ensure they are successful and catch any errors early on. You can set up notifications to alert you of failed deployments or use tools like Sentry or New Relic for error monitoring.
Backup your data: Regularly backup your data to prevent data loss. Netlify provides built-in backup functionality, but it's always a good idea to have an offsite backup as well.

By following these best practices, you can optimize your CI/CD pipeline and ensure smooth deployments of your static site to Netlify. Remember to test regularly, use version control effectively, keep sensitive information secure with environment variables, optimize build time, use caching, monitor your deployments, and backup your data to prevent data loss.

VI. Troubleshooting CI/CD Issues

Even with the best practices in place, issues can arise during the CI/CD process that can cause headaches for developers. Here are some common issues and troubleshooting steps to help you diagnose and resolve problems with the deployment pipeline.

Build Fails

One of the most common issues that developers face is a failed build. This can be caused by a number of factors, including incorrect build settings, missing dependencies, or errors in the code. When a build fails, the first step is to check the build logs to identify the source of the problem. Netlify provides detailed logs that can help you diagnose the issue. Once you have identified the problem, you can make the necessary changes to the build settings or code to resolve the issue.

Deployment Fails

Another common issue is a failed deployment. This can occur if there are errors in the deployment settings or if there are issues with the Netlify API. When a deployment fails, check the deployment logs to identify the source of the problem. If the issue is with the deployment settings, make the necessary changes and try again. If the issue is with the Netlify API, you may need to contact Netlify support for assistance.

Slow Builds or Deployments

Sometimes, builds or deployments may take longer than expected. This can be caused by a variety of factors, including slow network speeds, large files, or complex code. To resolve this issue, try optimizing your code or reducing the size of your files. You can also consider upgrading to a higher-tier Netlify plan for faster build and deployment speeds.

Caching Issues

Caching can also cause issues during the CI/CD process. If changes are not reflected in the deployed site, it may be due to caching. To resolve this issue, you can clear the cache in Netlify or disable caching in your browser.

Authentication Issues

Authentication issues can also cause problems during the CI/CD process. If you are having trouble authenticating with Github or Netlify, double-check your credentials and make sure that you have the necessary permissions to access the repository or site.

VII. Conclusion

In conclusion, setting up CI/CD to Netlify for a static site via Github provides a streamlined approach to deploying code changes. It eliminates the need for manual deployment processes, saves time and increases productivity.

To set up this process, you will need to create a Netlify account, link it to your Github repository, configure the build and deployment settings on Netlify, and create a Github Actions workflow.

In the workflow, you will define the steps to build and deploy the site to Netlify. Github Actions is a powerful tool that allows for a wide range of customization, making it possible to fine-tune the deployment process to your specific needs.

To optimize the pipeline, we recommend implementing best practices such as using Git branches and pull requests, setting up automatic testing, and monitoring the deployment pipeline for errors.

In case of any issues during the CI/CD process, it is important to have a troubleshooting plan in place. This includes diagnosing and resolving issues with the pipeline, using tools such as logs and error messages to determine the root cause of the issue.

Overall, setting up CI/CD to Netlify for a static site is a valuable addition to any development workflow. It simplifies the deployment process and frees up developers' time to focus on building and improving the site itself. With the steps outlined in this guide, you can easily set up and customize the pipeline to fit your specific needs.

Django Crypto App Part 3: Wrap-Up and Testing

Atharva Shah — Wed, 10 May 2023 17:44:43 +0000

This tutorial was originally published on my technical blog. Check it out if you like Python, Data Science, AI, Web Development, and NLP-related guides.

Introduction

Welcome to the final part of the 3-part technical tutorial series, where have been building a Django project that enables users to manage their cryptocurrency portfolios. To implement the functionalities and additional features, we'll be utilizing API calls to coingecko or any other cryptocurrency API.

In the first part, we set up the project and created the models. In the second part continued off from that point and added all the templates, views and urls and code up the entire crypto project. So, if you haven't read the previous parts, I highly recommend you to do so before continuing with this part. Here, we will exclusively discuss testing approach by writing test cases for Models, Views and Templates using Pytest. We will also write a ton of tests to ensure that our code is working as expected and generate a coverage report to see how much of our code is covered by the tests.

The code for the entirety of the project can be found here -> Github Repo for Django Crypto App

Testing is an important part of software development. It helps us to ensure that our code is working as expected and also helps us to catch bugs early on. It also helps us to ensure that our code is maintainable and readable. So, let's get started.

Test Driven Development Approach Explained

In Django, automated testing can be performed at three levels: URL testing, model testing, and view testing.

URL Testing

URL testing in Django is used to check if the endpoints specified in the URL patterns are correctly configured and pointing to the appropriate views. This is important because if an endpoint is incorrect or pointing to the wrong view, the application will not be able to process the request, leading to errors or incorrect behavior. URL testing is typically performed using the Django Client class, which simulates a web client and allows the developer to send requests to the application.

Model Testing

Model testing in Django is used to check if the data stored in the database matches the expected schema and constraints specified in the models.py file. It helps ensure that the application is storing and retrieving data correctly and that the database is working as expected. Model testing is typically performed using the Django TestCase class and its various assertion methods, which allow the developer to create test data, save it to the database, and verify that the data has been saved correctly.

View Testing

View testing in Django is used to check if the business logic defined in the views.py file is functioning correctly. It is used to test whether the views are handling requests as expected and returning the appropriate responses. View testing is typically performed using the Django TestCase class and its various assertion methods, which allow the developer to simulate requests and verify the responses.

For this crypto-wallet app, I used all three types of automated testing.

For URL testing, I created a series of test cases that used the Django Client class to simulate requests to various endpoints in the application. Each test case sent a request to the endpoint and verified that the response was the expected template.

For model testing, I created a series of test cases that used the Django TestCase class to create test data, save it to the database, and verify that it had been saved correctly. Each test case tested a specific model or relationship between models to ensure that the data was being stored and retrieved correctly.

For view testing, I created a series of test cases that used the Django TestCase class to simulate requests to various views in the application. Each test case sent a request to the view and verified that the response was the expected result.

Writing Tests

Go to the tests.py file in the mainapp folder and add the following imports since we will be using them in our tests.

from decimal import Decimal
from unittest.mock import patch

from django.contrib.auth import authenticate, login
from django.contrib.auth import views as auth_views
from django.contrib.auth.forms import AuthenticationForm, UserCreationForm
from django.contrib.auth.hashers import make_password
from django.contrib.auth.models import User
from django.core.exceptions import ValidationError
from django.test import Client, TestCase
from django.urls import resolve, reverse
from test_plus import TestCase

from .forms import CustomUserCreationForm
from .models import *
from .views import *

Now that we have understood the theory, motivation and the approach, let's start writing tests.

Testing URLS

This is a test class for testing the URLs of a web application. The test class inherits from Django's TestCase class, and it has test methods for each of the URLs in the application.

The class has a setUp() method that creates a test user to use for the tests.

The test methods are named according to the following convention:

test[PageName] tests that the page with the given name can be accessed by the client.
test[PageName]Url tests that the URL for the given page resolves to the correct view function.
test[PageName]Template tests that the correct template is used for the given page.
test[PageName]ContainsCorrectHtml tests that the correct HTML content is displayed on the given page.
test[PageName]FormCorrect tests that the correct form is used for the given page.
test[PageName]RedirectsTo[OtherPageName] tests that the given page redirects to the correct other page.
test[PageName]RedirectIfAlreadyLoggedIn tests that the given page redirects to the correct page if the user is already logged in.

The test methods use Django's testing client to make requests to the application's URLs and check the responses. They use Django's reverse() function to generate URLs for the application's views, and they use Django's resolve() function to match URLs to view functions. They also use Django's assertTemplateUsed() function to check that the correct template is used, and they use Django's assertContains() and assertNotContains() functions to check for the presence or absence of specific HTML content in the response.

class UrlTest(TestCase):

    # CREATE THE TEST USER
    def setUp(self):
        self.user = User.objects.create_user(
            username='testuser',
            email='testuser@example.com',
            password='12345'
        )


    """ 
    ----------------
    HOME PAGE TESTS
    -----------------
    """
    def testHomePage(self):
        response = self.client.get('/')
        self.assertEqual(response.status_code, 200)

    def testHomePageUrl(self):
        url = reverse('home')
        self.assertEqual(resolve(url).func, home_view)  

    def testHomePageTemplate(self):
        response = self.client.get('/')
        self.assertTemplateUsed(response, 'home.html')

    def testHomePageContainsCorrectHtml(self):
        response = self.client.get('/')
        self.assertContains(response, 'Top 10 CryptoCurrency Rankings')
        self.assertNotContains(response, 'Hi there! I should not be on the page.')


    """ 
    ----------------
    LOGIN PAGE TESTS
    -----------------
    """
    def testLoginPage(self):
        response = self.client.get('/login/')
        self.assertEqual(response.status_code, 200)

    def testLoginPageUrl(self):
        url = reverse('login')
        self.assertEqual(resolve(url).func, login_view)

    def testLoginPageTemplate(self):
        response = self.client.get('/login/')
        self.assertTemplateUsed(response, 'login.html')

    def testLoginPageContainsCorrectHtml(self):
        response = self.client.get('/login/')
        self.assertContains(response, 'Login')
        self.assertNotContains(response, 'Hi there! I should not be on the page.')

    def testLoginPageRedirectsToPortfolioPage(self):
        self.client.login(username=self.user.username, password='12345')
        response = self.client.get('/login/')
        self.assertRedirects(response, '/portfolio/')

    def testLoginPageRedirectIfAlreadyLoggedIn(self):
        self.client.login(username=self.user.username, password='12345')
        response = self.client.get('/login/')
        self.assertRedirects(response, '/portfolio/')

    def testLoginPageFormCorrect(self):
        response = self.client.get('/login/')
        form = response.context.get('form')
        self.assertIsInstance(form, AuthenticationForm)
        self.assertContains(response, 'csrfmiddlewaretoken')

    """ 
    ----------------
    SIGNUP PAGE TESTS
    -----------------
    """
    def testSignupPage(self):
        response = self.client.get('/signup/')
        self.assertEqual(response.status_code, 200)


    def testSignupPageUrl(self):
        url = reverse('signup')
        self.assertEqual(resolve(url).func, signup_view)

    def testSignupPageTemplate(self):
        response = self.client.get('/signup/')
        self.assertTemplateUsed(response, 'signup.html')

    def testSignupPageContainsCorrectHtml(self):
        response = self.client.get('/signup/')
        self.assertContains(response, 'Signup')
        self.assertNotContains(response, 'Hi there! I should not be on the page.')

    def testSignupPageRedirectIfAlreadyLoggedIn(self):
        self.client.login(username=self.user.username, password='12345')
        response = self.client.get('/signup/')
        self.assertRedirects(response, '/portfolio/')

    def testSignupPageFormCorrect(self):
        response = self.client.get('/signup/')
        form = response.context.get('form')
        self.assertIsInstance(form, UserCreationForm)
        self.assertContains(response, 'csrfmiddlewaretoken')

    """ 
    ----------------
    PORTFOLIO PAGE TESTS
    -----------------
    """
    def testPortfolioPageNoLogin(self):    
        # check if logged out user can access portfolio page
        response = self.client.get('/portfolio/')
        self.assertEqual(response.status_code, 302)

    def testPortfolioPageLogin(self):
        # check if logged in user can access portfolio page
        self.client.login(username=self.user.username, password='12345')
        response = self.client.get('/portfolio/')
        self.assertEqual(response.status_code, 200)

    def testPortfolioPageUrl(self):
        url = reverse('portfolio')
        self.assertEqual(resolve(url).func, portfolio_view)

    def testPortfolioPageTemplate(self):
        self.client.login(username=self.user.username, password='12345')
        response = self.client.get('/portfolio/')
        self.assertTemplateUsed(response, 'portfolio.html')

    def testPortfolioPageContainsCorrectHtml(self):
        self.client.login(username=self.user.username, password='12345')
        response = self.client.get('/portfolio/')
        self.assertContains(response, 'Wallet')
        self.assertNotContains(response, 'Hi there! I should not be on the page.')


    """    
    ----------------
    RESET PAGE TESTS
    -----------------
    """

    def testResetPasswordPageUrl(self):
        url = reverse('password_reset')
        self.assertEqual(resolve(url).func.view_class, auth_views.PasswordResetView)

    def testResetPasswordPageTemplate(self):
        response = self.client.get('/password_reset/')
        self.assertTemplateUsed(response, 'reset/password_reset.html')

    def testResetPasswordPageContainsCorrectHtml(self):
        response = self.client.get('/password_reset/')
        self.assertContains(response, 'Reset Password')
        self.assertNotContains(response, 'Hi there! I should not be on the page.')

    def testResetPasswordDonePageUrl(self):
        url = reverse('password_reset_done')
        self.assertEqual(resolve(url).func.view_class, auth_views.PasswordResetDoneView)

    def testResetPasswordDonePageTemplate(self):
        response = self.client.get('/password_reset_done/')
        self.assertTemplateUsed(response, 'reset/password_reset_done.html')

    def testResetPasswordDonePageContainsCorrectHtml(self):
        response = self.client.get('/password_reset_done/')
        self.assertContains(response, 'An email has been sent with instructions to reset your password')
        self.assertNotContains(response, 'Hi there! I should not be on the page.')

    def testResetPasswordCompletePageUrl(self):
        url = reverse('password_reset_complete')
        self.assertEqual(resolve(url).func.view_class, auth_views.PasswordResetCompleteView)

    def testResetPasswordCompletePageTemplate(self):
        response = self.client.get('/password_reset_complete/')
        self.assertTemplateUsed(response, 'reset/password_reset_complete.html')

    def testResetPasswordCompletePageContainsCorrectHtml(self):
        response = self.client.get('/password_reset_complete/')
        self.assertContains(response, 'Your password has been set.')
        self.assertNotContains(response, 'Hi there! I should not be on the page.')

    """    
    ----------------
    SEARCH PAGE TESTS
    -----------------
    """

    def testSearchPageNoLogin(self):
        response = self.client.get('/search/')
        self.assertEqual(response.status_code, 302)

    def testSearchPageUrl(self):
        url = reverse('search')
        self.assertEqual(resolve(url).func, search_view)

    # check if search page can only be accessed by POST request
    def testSearchPagePostOnly(self):
        self.client.login(username=self.user.username, password='12345')
        response = self.client.get('/search/')
        self.assertEqual(response.status_code, 405)

        response = self.client.post('/search/')
        self.assertEqual(response.status_code, 200)

Testing Models

These test cases are written using the Python unittest framework and are designed to test the functionality of different models in a Django web application.

The setUp() method is a special method that is run before every test method. In this method, two User objects are created - one to serve as a test user and the other as a referral user.

The individual test methods are defined using the def keyword, followed by the name of the test method. Each test method tests a specific aspect of a particular model, such as the User, Cryptocurrency, Referral, Portfolio, or Profile model.

Within each test method, specific actions are taken to test certain aspects of the model, such as creating an instance of the model, setting its attributes, and checking that the expected values are returned. For example, the testUserModelCorrectData() method checks that the attributes of the User model, such as username and email, are correctly set.

The assert statements are used to check that the expected values are equal to the actual values. If the test fails, an error is raised and the test method stops running.

Overall, these test cases aim to ensure that each model in the Django web application functions correctly and behaves as expected.

class ModelTest(TestCase):
    # CREATE THE TEST USER
    def setUp(self):
        self.user = User.objects.create_user(
            username='testuser2',
            email='testuser2@example.com',
            password='12345'
        )

        self.referral = User.objects.create_user(
            username='referraluser',
            email='referreduser@example.com',
            password='12345'
        )

    """
    ----------------
    USER MODEL TESTS
    -----------------
    """

    def testUserModelCorrectData(self):
        test_user = self.user
        self.assertEqual(test_user.username, 'testuser2')
        self.assertEqual(test_user.email, 'testuser2@example.com')
        self.assertTrue(isinstance(test_user, User))
        self.assertTrue(test_user.is_active)
        self.assertFalse(test_user.is_staff)

    def testErrorOnDuplicateUsername(self):
        with self.assertRaises(IntegrityError):
            User.objects.create_user(
                username='testuser2',
                email='testuser2@example.com',
                password='12345'
        )

    def testErrorOnDuplicateEmail(self):
        with self.assertRaises(IntegrityError):
            User.objects.create_user(
                username='testuser3',
                email='testuser2@example.com',
                password='12345'
            )

    """ 
    ----------------
    CRYPTOCURRENCY MODEL TESTS
    -----------------
    """

    def testCryptocurrencyModel(self):
        cryptocurrency = Cryptocurrency.objects.create(
            user = User.objects.create(username='testuser'),
            id_from_api = 'bitcoin',
            name = 'Bitcoin', 
            symbol = 'BTC',
            current_price = 10000,
            quantity = 1
        )
        self.assertEqual(cryptocurrency.name, 'Bitcoin')
        self.assertEqual(cryptocurrency.symbol, 'BTC')
        self.assertEqual(cryptocurrency.current_price, 10000)
        self.assertEqual(cryptocurrency.quantity, 1)
        self.assertEqual(cryptocurrency.user.username, 'testuser')
        self.assertTrue(isinstance(cryptocurrency, Cryptocurrency))

    def testCryptocurrencyModelErrorOnDuplicate(self):
        Cryptocurrency.objects.create(
            user = User.objects.create(username='testuser'),
            id_from_api = 'bitcoin',
            name = 'Bitcoin', 
            symbol = 'BTC',
            current_price = 10000,
            quantity = 1
        )
        with self.assertRaises(IntegrityError):
            Cryptocurrency.objects.create(
                user = User.objects.create(username='testuser'),
                id_from_api = 'bitcoin',
                name = 'Bitcoin', 
                symbol = 'BTC',
                current_price = 10000,
                quantity = 1
            )
            self.fail('Cryptocurrency model should not allow duplicate cryptocurrencies')

    def testCryptocurrencyCurrentPrice(self):
        crypto = Cryptocurrency.objects.create(
            user=self.user,
            id_from_api='bitcoin',
            name='Bitcoin', 
            symbol='BTC',
            current_price=10000,
            quantity=1
        )
        self.assertEqual(crypto.current_price, 10000)

    def testCryptocurrencyStr(self):
        crypto = Cryptocurrency.objects.create(
            user=self.user,
            id_from_api='bitcoin',
            name='Bitcoin', 
            symbol='BTC',
            current_price=10000,
            quantity=1
        )
        self.assertEqual(str(crypto), 'Bitcoin (BTC)')

    def testCryptocurrencyQuantityDefaultValue(self):
        crypto = Cryptocurrency.objects.create(
            user=self.user,
            id_from_api='bitcoin',
            name='Bitcoin', 
            symbol='BTC',
            current_price=10000
        )
        self.assertEqual(crypto.quantity, 1)


    """
    ----------------
    REFERRAL MODEL TESTS
    -----------------
    """

    # make a referral and check if it is created correctly
    def testReferralModel(self):
        referral = Referal.objects.create(
            user=self.user,
            referrer=self.referral
        )
        self.assertEqual(referral.user.username, 'testuser2')
        self.assertEqual(referral.referrer.username, 'referraluser')
        self.assertTrue(isinstance(referral, Referal))



    """ 
    ----------------
    PORTFOLIO MODEL TESTS
    -----------------
    """

    def testPortfolioModel(self):
        portfolio = Portfolio.objects.create(
            user=self.user,
            total_value=10000
        )
        self.assertEqual(portfolio.user.username, 'testuser2')
        self.assertEqual(portfolio.total_value, 10000)
        self.assertTrue(isinstance(portfolio, Portfolio))


    """ 
    ----------------
    PROFILE MODEL TESTS
    -----------------
    """
    def testProfileModel(self):
        # referral code should be generated automatically using small uuid
        import shortuuid
        shortuuid.ShortUUID().random(length=10)

        referral_code = shortuuid.uuid()

        # make a dummy user
        dummy_user = User.objects.create_user(
            username='dummyprofile',
            email = 'dummyemail@example.com',
            password='12345'
        )


        profile = Profile.objects.create(
            user=dummy_user,
            referral_code=referral_code
        )

        self.assertEqual(profile.user.username, 'dummyprofile')
        self.assertEqual(profile.referral_code, referral_code)
        self.assertTrue(isinstance(profile, Profile))

Testing Views


""" 
MAKING SEPERATE TEST CLASSES FOR VIEWS
"""

class LoginViewTest(TestCase):
    def setUp(self):
        self.client = Client()
        self.user = User.objects.create_user(username='testuser', email="example@example.com", password='testpass')

    def test_login_view_with_valid_credentials(self):
        url = reverse('login')
        response = self.client.post(url, {'username': 'testuser', 'password': 'testpass'})
        self.assertRedirects(response, reverse('portfolio'))

    def test_login_view_with_invalid_credentials(self):
        url = reverse('login')
        response = self.client.post(url, {'username': 'invaliduser', 'password': 'invalidpass'})
        self.assertEqual(response.status_code, 200)
        self.assertContains(response, "Invalid username or password.")


class TestAddToPortfolioView(TestCase):

    def setUp(self):
        self.client = Client()
        self.user = User.objects.create_user(
            username='testuser', password='testpassword')
        self.client.login(username='testuser', password='testpassword')

    def test_add_to_portfolio_view_success(self):
        with patch('mainapp.views.requests.get') as mock_get:
            mock_data = {
                'name': 'Bitcoin',
                'id': 'bitcoin',
                'symbol': 'BTC',
                'market_data': {
                    'current_price': {
                        'usd': 50000.00
                    }
                }
            }
            mock_get.return_value.json.return_value = mock_data

            data = {
                'id': 'bitcoin',
                'quantity': 10
            }
            response = self.client.post(
                reverse('add_to_portfolio'), data=data)

        self.assertEqual(response.status_code, 302)
        self.assertRedirects(response, reverse('portfolio'))

        crypto_currency = Cryptocurrency.objects.get(
            user=self.user, id_from_api='bitcoin')
        self.assertEqual(crypto_currency.name, 'Bitcoin')
        self.assertEqual(crypto_currency.symbol, 'BTC')
        self.assertEqual(crypto_currency.quantity, 10)
        self.assertEqual(crypto_currency.current_price, 50000.00)

        portfolio = Portfolio.objects.get(user=self.user)
        self.assertEqual(portfolio.total_value, 500000.00)

    def test_add_to_portfolio_view_get_request(self):
        response = self.client.get(reverse('add_to_portfolio'))
        self.assertEqual(response.status_code, 200)
        self.assertContains(response, 'Need a crypto currency to add to your portfolio. Go back to the home page and search for a crypto currency.')

from django.contrib.auth.models import User
from django.test import Client, TestCase


class SearchViewTestCase(TestCase):
    def setUp(self):
        self.client = Client()
        self.user = User.objects.create_user(
            username='testuser', password='testpassword'
        )
        self.client.login(username='testuser', password='testpassword')

    def test_valid_search(self):
        response = self.client.post('/search/', {'search_query': 'bitcoin'})
        self.assertEqual(response.status_code, 200)
        self.assertContains(response, 'BTC')

    def test_invalid_search(self):
        response = self.client.post('/search/', {'search_query': 'invalid_crypto_currency'})
        self.assertEqual(response.status_code, 200)
        self.assertContains(response, 'No crypto currency found based on your search query.')


class DeleteFromPortfolioViewTest(TestCase):
    def setUp(self):
        self.client = Client()
        self.user = User.objects.create_user(username='testuser', password='testpass')
        self.crypto_currency = Cryptocurrency.objects.create(user=self.user, id_from_api='bitcoin', name='Bitcoin', symbol='BTC', current_price=Decimal('10000'), quantity=Decimal('2'))
        self.portfolio = Portfolio.objects.create(user=self.user, total_value=Decimal('20000'))

    def test_delete_from_portfolio_view(self):
        self.client.login(username='testuser', password='testpass')
        url = reverse('delete_from_portfolio', args=[self.crypto_currency.pk])
        response = self.client.post(url)
        self.assertRedirects(response, reverse('portfolio'))
        self.assertFalse(Cryptocurrency.objects.filter(pk=self.crypto_currency.pk).exists())
        self.portfolio.refresh_from_db()
        self.assertEqual(self.portfolio.total_value, Decimal('0'))

    def test_delete_from_portfolio_view_with_unauthenticated_user(self):
        url = reverse('delete_from_portfolio', args=[self.crypto_currency.pk])
        response = self.client.post(url)
        self.assertRedirects(response, reverse('login') + '?next=' + url)
        self.assertTrue(Cryptocurrency.objects.filter(pk=self.crypto_currency.pk).exists())
        self.portfolio.refresh_from_db()
        self.assertEqual(self.portfolio.total_value, Decimal('20000'))



class TestHomeView(TestCase):
    def setUp(self):
        self.client = Client()
        self.top_10_crypto_url_global = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=USD&order=market_cap_desc&per_page=10&page=1&sparkline=true'
        self.top_10_crypto_data_global = requests.get(self.top_10_crypto_url_global).json()
        self.user = User.objects.create_user(username='testuser', password='testpass')
        self.crypto = Cryptocurrency.objects.create(name='Bitcoin', symbol='BTC', id_from_api='bitcoin', user=self.user, current_price=Decimal('10000'), quantity=Decimal('2'))
        self.portfolio = Portfolio.objects.create(user=self.user, total_value=Decimal('20000'))
        self.url = reverse('home')

    def test_home_view_authenticated(self):
        self.client.login(username='testuser', password='testpass')
        response = self.client.get(self.url)
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'home.html')
        self.assertTrue('top_10_crypto_data_global' in response.context)
        self.assertTrue('user_cryptocurrencies' in response.context)
        self.assertTrue('user_portfolio' in response.context)
        self.assertTrue('crypto_price_changes' in response.context)

    def test_home_view_unauthenticated(self):
        response = self.client.get(self.url)
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'home.html')
        self.assertTrue('top_10_crypto_data_global' in response.context)
        self.assertFalse('user_cryptocurrencies' in response.context)
        self.assertFalse('user_portfolio' in response.context)
        self.assertFalse('crypto_price_changes' in response.context)

class SignupWithReferrerViewTestCase(TestCase):
    def setUp(self):
        self.client = Client()
        self.referrer = User.objects.create_user(
            username='test_referrer', email='test_referrer@example.com', password='testpassword')
        self.referrer_profile = Profile.objects.get(user=self.referrer)
        self.referral_code = self.referrer_profile.referral_code

    def test_signup_with_referrer_view_GET(self):
        response = self.client.get(reverse('signup_with_referrer_view', args=[self.referral_code]))
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'signup.html')

    def test_signup_with_referrer_view_POST(self):
        data = {
            'username': 'testuser',
            'email': 'testuser@example.com',
            'password1': 'testpassword',
            'password2': 'testpassword'
        }
        response = self.client.post(reverse('signup_with_referrer_view', args=[self.referral_code]), data)
        self.assertEqual(response.status_code, 302)
        self.assertEqual(User.objects.count(), 2)
        # get the user object from the database

        self.assertEqual(Referal.objects.get(user__username='testuser').referrer, self.referrer)
        self.assertEqual(Profile.objects.get(user__username='test_referrer').bonus, 100)
        self.assertRedirects(response, reverse('login'))

class SignupViewTestCase(TestCase):
    def setUp(self):
        self.client = Client()
        self.signup_url = reverse('signup')
        self.valid_data = {
            'username': 'johndoe',
            'email': 'johndoe@example.com',
            'password1': 'passw0rd',
            'password2': 'passw0rd'
        }

    def test_signup_view_get(self):
        response = self.client.get(self.signup_url)
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'signup.html')
        self.assertIsInstance(response.context['form'], CustomUserCreationForm)

    def test_signup_view_post_invalid_data(self):
        invalid_data = self.valid_data.copy()
        invalid_data['password2'] = 'different_password'
        response = self.client.post(self.signup_url, invalid_data)
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'signup.html')
        self.assertIsInstance(response.context['form'], CustomUserCreationForm)
        self.assertEqual(User.objects.count(), 0)

class LogoutViewTestCase(TestCase):
    def setUp(self):
        self.client = Client()
        self.user = User.objects.create_user(
            username='testuser', password='testpass'
        )
        self.client.login(username='testuser', password='testpass')

    def test_logout_view(self):
        # make sure user is logged in
        response = self.client.get(reverse('home'))
        self.assertEqual(response.status_code, 200)
        # this is only visible to logged in users below the Top 10 Cryptocurrencies table
        self.assertTrue('24 Hour Price Changes' in str(response.content))

        # logout
        response = self.client.get(reverse('logout'))
        self.assertEqual(response.status_code, 302)

        # check if user is logged out
        response = self.client.get(reverse('home'))
        self.assertEqual(response.status_code, 200)
        self.assertFalse('testuser' in str(response.content))

class LoginViewTestCase(TestCase):
    def setUp(self):
        self.client = Client()
        self.login_url = reverse('login')
        self.user = User.objects.create_user(
            username='testuser',
            email='testuser@test.com',
            password='testpass'
        )

    def test_login_view_get(self):
        response = self.client.get(self.login_url)
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'login.html')

    def test_login_view_post_valid_credentials(self):
        response = self.client.post(self.login_url, {
            'username': 'testuser',
            'password': 'testpass',
        })
        self.assertRedirects(response, reverse('portfolio'))
        user = authenticate(username='testuser', password='testpass')
        self.assertIsNotNone(user)
        self.assertEqual(user, self.user)
        self.assertTrue(user.is_authenticated)

    def test_login_view_post_invalid_credentials(self):
        response = self.client.post(self.login_url, {
            'username': 'wronguser',
            'password': 'wrongpass',
        })
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'login.html')
        self.assertContains(response, "Invalid username or password.")

    def tearDown(self):
        self.user.delete()

These are unit tests for a Django web application, testing various views in the application. Here's a detailed explanation of each of the views being tested and the purpose of the tests:

LoginViewTest:
- test_login_view_with_valid_credentials: This test checks if a user can successfully log in to the application with valid credentials. It sends a POST request to the login URL with a valid username and password, and expects to be redirected to the portfolio page (assuming successful login).
- test_login_view_with_invalid_credentials: This test checks if a user is unable to log in with invalid credentials. It sends a POST request to the login URL with an invalid username and password, and expects to receive a status code of 200 (assuming failed login) and to see an error message on the login page.
TestAddToPortfolioView:
- test_add_to_portfolio_view_success: This test checks if a user can successfully add a cryptocurrency to their portfolio. It sends a POST request to the add-to-portfolio URL with a valid cryptocurrency ID and quantity, and expects to be redirected to the portfolio page (assuming successful addition). It also checks if the added cryptocurrency and its details (name, symbol, quantity, and current price) have been saved in the database, and if the user's portfolio value has been updated accordingly.
- test_add_to_portfolio_view_get_request: This test checks if a user cannot add a cryptocurrency to their portfolio through a GET request. It sends a GET request to the add-to-portfolio URL and expects to receive a status code of 200 and an error message on the page.
SearchViewTestCase:
- test_valid_search: This test checks if a user can successfully search for a cryptocurrency by sending a POST request to the search URL with a valid search query. It expects to receive a status code of 200 and to see the cryptocurrency's symbol on the search results page.
- test_invalid_search: This test checks if a user receives an error message when searching for an invalid cryptocurrency. It sends a POST request to the search URL with an invalid search query and expects to receive a status code of 200 and an error message on the search results page.
DeleteFromPortfolioViewTest
- This test case is testing a view called DeleteFromPortfolioView. The view is expected to receive a POST request with the primary key of a cryptocurrency object. The view should delete that cryptocurrency object from the database and update the user's portfolio value accordingly.
- The setUp method creates a test client, a test user, a test cryptocurrency object, and a test portfolio object in the database.
- The test_delete_from_portfolio_view method tests the view when the user is authenticated. It logs in the user using the test client, makes a POST request to the view with the primary key of the test cryptocurrency object, and asserts that the response redirects to the portfolio page. It then checks that the test cryptocurrency object no longer exists in the database and that the portfolio's total value is 0.
- The test_delete_from_portfolio_view_with_unauthenticated_user method tests the view when the user is not authenticated. It makes a POST request to the view with the primary key of the test cryptocurrency object and asserts that the response redirects to the login page. It then checks that the test cryptocurrency object still exists in the database and that the portfolio's total value is still 20000.
TestHomeView
- This test case is testing a view called HomeView. The view is expected to render a template called home.html and display a list of the top 10 cryptocurrencies, the user's cryptocurrencies, the user's portfolio, and the percentage changes in cryptocurrency prices.
- The setUp method creates a test client, a test user, a test cryptocurrency object, and a test portfolio object in the database. It also makes a request to an external API to get the top 10 cryptocurrencies.
- The test_home_view_authenticated method tests the view when the user is authenticated. It logs in the user using the test client, makes a GET request to the view, and asserts that the response status code is 200 and the correct template is used. It also checks that the response context contains the top 10 cryptocurrencies, the user's cryptocurrencies, the user's portfolio, and the percentage changes in cryptocurrency prices.
- The test_home_view_unauthenticated method tests the view when the user is not authenticated. It makes a GET request to the view and asserts that the response status code is 200 and the correct template is used. It also checks that the response context contains the top 10 cryptocurrencies but does not contain the user's cryptocurrencies, the user's portfolio, or the percentage changes in cryptocurrency prices.
SignupWithReferrerViewTestCase
- This test case checks the behavior of the view used for signing up with a referral code. In the setUp() method, a test user (referrer) is created, and the referral code is obtained from their profile.
- The test_signup_with_referrer_view_GET() method sends a GET request to the view using the referral code and checks that the response status code is 200 and the 'signup.html' template is used.
- The test_signup_with_referrer_view_POST() method sends a POST request with valid user data and the referral code. It checks that the response status code is 302, indicating a successful redirect, the User object count is 2, and the referrer of the test user is the referrer created in setUp(). Additionally, it checks that the bonus of the referrer is now 100, and the response redirects to the 'login' view.
SignupViewTestCase
- This test case checks the behavior of the view used for normal user sign up. The setUp() method initializes the Client object, the URL of the view, and valid user data.
- The test_signup_view_get() method sends a GET request to the view and checks that the response status code is 200, the 'signup.html' template is used, and the context form is of type CustomUserCreationForm.
- The test_signup_view_post_invalid_data() method sends a POST request with invalid user data, and it checks that the response status code is 200, the 'signup.html' template is used, and the form is of type CustomUserCreationForm. Additionally, it checks that no User objects have been created.
LogoutViewTestCase
- This test case checks the behavior of the view used for user logout. The setUp() method initializes the Client object, creates a test user, and logs them in.
- The test_logout_view() method sends a GET request to the home page and checks that the response status code is 200 and the '24 Hour Price Changes' element is present.
- It then sends a GET request to the logout view and checks that the response status code is 302. Finally, it sends another GET request to the home page and checks that the response status code is 200, and the test user's name is not present.
LoginViewTestCase
- This test case checks the behavior of the view used for user login. The setUp() method initializes the Client object, the URL of the view, and creates a test user. The test_login_view_get() method sends a GET request to the view and checks that the response status code is 200, and the 'login.html' template is used.
- The test_login_view_post_valid_credentials() method sends a POST request with valid user credentials and checks that the response is a successful redirect to the portfolio view, the user object is authenticated, and the user object is the same as the one created in setUp().
- The test_login_view_post_invalid_credentials() method sends a POST request with invalid user credentials and checks that the response status code is 200, the 'login.html' template is used, and an error message is displayed. Finally, the tearDown() method deletes the test user object.

How to Run Tests

All tests are written in the tests.py file in the mainapp folder.

# to run all tests
python manage.py test

# to run tests for a specific class
python manage.py test -k <class-name>

# start coverage
coverage run --source='.' --omit=mainapp\tests.py manage.py test mainapp

# generate coverage report
coverage html

# check the htmlcov folder and open the index.html file

Conclusion

This concludes the third and the final part of the series. Here we learned how to write tests for our Django project as well as the TDD approach. We saw how to write tests for models, views, and reverse urls and wrote over 60 test cases for our project achieving 90%+ test coverage.

This project was a great learning experience for me. I learned a lot about Django, and I also learned how to use the CoinGecko API. I also learned how to use the unittest module to write tests for my Django project. I hope you enjoyed reading this article. If you have any questions or suggestions, feel free to leave a comment below. Thank you for reading! 😊

Django Crypto App Part 2: Templates, Views and URLs

Atharva Shah — Wed, 10 May 2023 17:40:37 +0000

This tutorial was originally published on my technical blog. Check it out if you like Python, Data Science, AI, Web Development, and NLP-related guides.

Introduction

Welcome to the second part of the 3-part technical tutorial series, where we'll be building a Django project that enables users to manage their cryptocurrency portfolios. To implement the functionalities and additional features, we'll be utilizing API calls to coingecko or any other cryptocurrency API.

In the previous part, we set up the project and created the models. Now, we will continue off from that point and add the templates, views and urls and code up the entire project. This will be the most complex and detailed part of this series.

The code for the entirety of the project can be found here -> Github Repo for Django Crypto App

Setting up the URLs

In Django, URLs are defined in the urls.py file for each app. The URL patterns are matched to a view function that will handle the request/response.

In the given code snippet, we can see the import statements for the path and views modules. We are also importing auth_views which is a Django module for handling authentication views. Additionally, we are importing the admin module from Django's contrib package.

The urlpatterns list contains all of the URL patterns for our app. Each URL pattern is defined using the path() function, which takes the following parameters:

route: A string that contains a URL pattern.
view: The view function that should be called when the URL pattern is matched.
name: A unique name for the URL pattern.

For our project, we have defined URLs for several views:

home_view: The default view for our app, accessed at the root URL.
login_view, logout_view: Views for user authentication.
signup_view, signup_with_referrer_view: Views for user registration.
portfolio_view: View for displaying user's portfolio.
search_view: View for searching and adding new cryptocurrencies to a user's portfolio.
add_to_portfolio_view, delete_from_portfolio_view: Views for adding/deleting cryptocurrencies from a user's portfolio.
password_reset: View for resetting the user's password.
password_reset_done: View displayed after password reset email is sent.
password_reset_confirm: View for confirming the password reset.
password_reset_complete: View displayed after the password has been reset.

from django.contrib import admin
from django.contrib.auth import views as auth_views
from django.urls import path

from . import views

urlpatterns = [
    path("", views.home_view, name="home"),

    # user authentication
    path("login/", views.login_view, name="login"),
    path("logout/", views.logout_view, name="logout"),

    path("signup/", views.signup_view, name="signup"),
    path('signup/<str:referral_code>/', views.signup_with_referrer_view, name='signup_with_referrer_view'),

    # wallet page
    path("portfolio/", views.portfolio_view, name="portfolio"),

    # CRUD operations on cryptos
    path("search/", views.search_view, name="search"),
    path("add_to_portfolio/", views.add_to_portfolio_view, name="add_to_portfolio"),
    path('delete_from_portfolio/<int:pk>/', views.delete_from_portfolio_view, name='delete_from_portfolio'),

    # password reset stuff
    path('password_reset/', auth_views.PasswordResetView.as_view(template_name="reset/password_reset.html"), name='password_reset'),

    path('password_reset_done/', auth_views.PasswordResetDoneView.as_view(template_name="reset/password_reset_done.html"), name='password_reset_done'),

    path('password_reset_confirm/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(
    template_name='reset/password_reset_confirm.html'), name='password_reset_confirm'),

    path('password_reset_complete/', auth_views.PasswordResetCompleteView.as_view(
    template_name='reset/password_reset_complete.html'), name='password_reset_complete'),
]

Overall, the urlpatterns list provides a clear mapping between URLs and the corresponding views, allowing us to easily navigate and use our web application.

Setting Up Templates

Views and templates are important components of the Model-View-Template (MVT) architecture in Django. Views handle the request/response flow and business logic of the application, while templates provide the presentation layer for the user interface.

We will be using some custom CSS and JavaScript files in our templates. These files are located in the static directory of our app. We can import these files using the static template tag in our templates. So go ahead and create a static directory in the main app and add the following files to it:

style.css

We will not be covering a ton of CSS explanation since Django is the focus of this article. The content of the style.css file is as follows:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');


::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}


body {
  overflow-x: hidden !important;
  color: white !important;
  font-family: 'Roboto', sans-serif !important;
  background-color: #130f40 !important;
  background-image: linear-gradient(315deg, #130f40 0%, #000000 74%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  min-height: 100vh !important;
}

.green-arrow {
  font-size: 18px;
  color: green
}

.red-arrow {
  font-size: 18px;
  color: red
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.crypto-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 1px solid gray;
  padding: 10px;
  width: 300px;
}

.crypto-info {
  margin-left: 10px;
}

.tt-menu {
  width: 100%;
}

.tt-suggestion {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  background-color: #fff;
}

.tt-suggestion:hover {
  background-color: #f5f5f5;
}

.tt-suggestion.tt-cursor {
  background-color: #f5f5f5;
}

.typeahead {
  border-radius: 0;
}


.custom-nav-logo {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 500;

}

nav {
  box-shadow: -10px 8px 0px rgb(196 181 253);
  background: #0f0f0f;
  color: white;
  margin-bottom: 50px;
  position: fixed ;
  top: 0;
  width: 100%;
  z-index: 1;
}


footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(0, 0, 0);
  color: white;
  text-align: center;
}

.referral-code {
  background-color: #080808;
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #fff;
}

.referral-code p {
  font-size: 1.1rem;
}

.custom-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: underline #fff solid 1px;
  text-underline-offset: 10px;
  margin-bottom: 1rem;
}

.custom-table {
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 1rem;
  color: #fff;
  background-color: rgba(255, 255, 255);
  box-shadow: 10px -8px 0px rgb(253 230 138);
}

th,
td {
  padding: 0.75rem;
  vertical-align: middle;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

th {
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 5px solid rgb(0, 0, 0) text-align: center;
  font-family: 'Roboto', sans-serif;
}

tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.alert {
  border-radius: 2px !important;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em !important;
  font-weight: 300 !important;
  padding: 0.5rem 1rem !important;
}

.alert-success {
  background-color: #007f1e;
  color: rgb(0, 0, 0) !important;
  font-weight: bold !important;
}

.alert-info {
  background-color: #009cb4;
  color: rgb(0, 0, 0) !important;
  font-weight: bold !important;
}

.alert-danger {
  background-color: #520008 !important;
  color: rgb(0, 0, 0) !important;
  font-weight: bold !important;
}

.fancy-color {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.custom-title {
  margin-left: -175px !important;
  margin-top: -30px !important;
  margin-bottom: 50px !important;
  padding: 0.5rem 0.5rem !important;
  width: fit-content !important;
  background: rgba(255, 255, 255, 0.9);
}

.welcome-user-text {
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}

Remember we defined the urlpatterns list in the urls.py file? Each URL pattern in the list is mapped to a view function. For example, the home_view function is mapped to the root URL of our app. And we also made a templates folder in our app directory. This is where we will store all of our HTML templates and link them to the corresponding views.

Just to give you a peek into the structure of our app, here is a screenshot of the templates folder:

We will be creating the following templates in our app so you can go ahead and make empty HTML files for them. Now let's start writing our views and templates.

Before writing the views, let us first create a base.html file in the templates folder. This file will contain the common HTML code that will be used in all of our templates. We will be using the Bootstrap CSS framework for styling our templates. So we will add the Bootstrap CDN link in the base.html file. We will also add the CSS code that we wrote in the style.css file in the base.html file. The base.html file will look like this:

{% load static %}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--Custom CSS-->
    <link href="{% static 'css/custom.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">


    <!--Clipboard-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>

    <!--Sweet Alert-->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>


    <title>Crypto App | {% block title %}{% endblock title %}</title>
  </head>
  <body>
    {% include 'navbar.html' %} 
    <div class="container">
      {% block content %}
      {% endblock content %}
    </div>
    {% include 'footer.html' %} 
    {% block scripts %}
    {% endblock scripts %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Now, since we are referencing the navbar.html and footer.html files in the base.html file, we need to create these files in the templates folder. The navbar.html file will contain the navigation bar of our app and the footer.html file will contain the footer of our app. The navbar.html file will look like this:

<nav class="navbar navbar-expand-md">
  <a class="navbar-brand text-light my-2 my-sm-0 custom-nav-logo" href="{% url 'home' %}">Crypto App</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
      </ul>
      <ul class="navbar-nav">
        {% if user.is_authenticated %}
        <div class="btn-group" role="group">
          <a class="btn btn-primary my-2 my-sm-0 mr-2" href="{% url 'portfolio' %}">View My Wallet</a>
          <a class="btn btn-danger my-2 my-sm-0 mr-2" href="{% url 'logout' %}">Logout</a>  
        </div>


        {% else %}
        <div class="btn-group" role="group">
          <a class="btn btn-primary my-2 my-sm-0 mr-2" href="{% url 'login' %}">Login</a>
          <a class="btn btn-success my-2 my-sm-0" href="{% url 'signup' %}">Signup</a>
        </div>
        {% endif %}
      </ul>
    </div>
  </nav>

The footer.html file will look like this:

{% load static %}
<footer>

        <div class="row justify-content-center">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="copy-right text-center">
                    <p>© 2023 Crypto App. Developed By <a href="#" class="text-light">Atharva Shah</a></p>
                </div>
            </div>
        </div>

</footer>
</div>

Now, the final step for the template setup is to write the alerts.html file. This file will contain the code for displaying alerts to the user. In Django, alerts are messages that can be displayed to users after certain events or actions have occurred, such as a successful login or a failed form submission. They are a way to provide feedback to the user about what has happened, and can be used to convey important information or instructions.

Django provides a built-in messaging framework that makes it easy to use alerts in your application. This framework allows you to create different types of messages, such as success, warning, or error messages, and to customize the way they are displayed.

The alerts.html file will look like this:

{% if messages %}
{% for message in messages %}
<div class="alert alert-{{message.tags}} alert-dismissible fade show w-50 d-flex justify-content-center align-items-center ml-auto mr-auto  " role="alert">
    {{ message }}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
{% endfor %}
{% endif %}

Setting Up Views

To use views and templates in Django, we first need to import the necessary modules. The requests module is used for sending HTTP requests to external APIs. The auth module is used for user authentication related functionality. The messages module is used for displaying messages to the user. The decorators module is used for adding functionality to views based on certain conditions, such as requiring the user to be logged in or having certain permissions. The forms module is used for creating HTML forms that map to Django models. The models module is used for defining the database schema and ORM of the application.

We can import these modules using the following code snippet in views.py since we will be using them in our views:

import requests
from django.contrib import auth, messages
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required, user_passes_test
from django.contrib.auth.forms import AuthenticationForm, UserCreationForm
from django.contrib.auth.hashers import make_password
from django.contrib.auth.models import User
from django.contrib.auth.tokens import default_token_generator
from django.core.exceptions import PermissionDenied
from django.db import IntegrityError
from django.http import HttpResponse, HttpResponseNotAllowed
from django.shortcuts import redirect, render
from django.template.defaultfilters import slugify
from django.utils.http import urlsafe_base64_decode

from .forms import CustomUserCreationForm
from .models import Cryptocurrency, Portfolio, Profile, Referal

Once we have imported these modules, we can start writing our views and templates to create the desired functionality for our application.

🚨 Please note that most of these views depend on each other so we recommend that you follow the order in which they are presented here. and test them at the very end since they are all interconnected and you may get errors if the dependent views/templates are not created yet.

Signup

Let's start with the signup_view function. This view is mapped to the /signup/ URL pattern in the urls.py file. The signup_view function is responsible for displaying the signup form to the user and creating a new user account if the form is valid.

def signup_view(request):
    # check if user is already logged in
    if request.user.is_authenticated:
        return redirect('portfolio')

    if request.method == 'POST':
            form = CustomUserCreationForm(request.POST)

            if form.is_valid():
                user = form.save(commit=False)
                user.password = make_password(form.cleaned_data['password1'])
                user.email = form.cleaned_data['email']
                user.save()
                messages.success(request, 'You have successfully signed up!', extra_tags='success')
                return redirect('login')
    else:
        form = CustomUserCreationForm()
    return render(request, 'signup.html', {'form': form})


# block access to signup page if user is already logged in
def signup_with_referrer_view(request, referral_code):

    # check if user is already logged in
    if request.user.is_authenticated:
        return redirect('portfolio')

    try:
        # get the User Profile of the referrer
        referrer = User.objects.get(profile__referral_code=referral_code)
    except User.DoesNotExist:
        # show error message if referrer does not exist
        return HttpResponse("Referrer does not exist")

    if request.method == 'POST':
        form = CustomUserCreationForm(request.POST)
        if form.is_valid():
            user = form.save(commit=False)
            user.password = make_password(form.cleaned_data['password1'])
            user.email = form.cleaned_data['email']
            user.save()
            # create a referral instance
            referral = Referal.objects.create(user=user, referrer=referrer)
            referral.save()

            if referrer is not None:
                referrer.profile.bonus += 100  # add referral bonus to referrer
                referrer.profile.save()
                messages.success(request, f'{referrer.username} recieved a bonus of 100 points from you because you signed up using their referral link!')


            messages.success(request, 'You have successfully signed up!')
            return redirect('login')
    else:
        form = CustomUserCreationForm()

    return render(request, 'signup.html', {'form': form, 'referrer': referrer})

These are two views that handle user signup with and without a referral code.

The first view is signup_view. It checks whether the user is already logged in. If the user is logged in, then they will be redirected to their portfolio page. If the request method is POST, it will validate the user's input, create a new user, and save them in the database. The password is hashed before it is saved. If the form is not valid, it will render the same template with the form and display the errors. If the request method is not POST, then the view will render the signup form. In both cases, the view will render the signup.html template with the form.

The second view is signup_with_referrer_view. It first checks if the user is already logged in. If they are, they will be redirected to their portfolio page. Then it will try to find the referrer user using the referral code passed in the URL. If the referrer doesn't exist, it will display an error message. If the request method is POST, it will validate the form input and create a new user and save it in the database. It will also create a new referral instance and save it in the database. The referral instance will link the new user to the referrer. It will also add a referral bonus of 100 points to the referrer's profile. Finally, it will redirect the user to the login page with a success message. If the request method is not POST, then the view will render the signup form with the referrer's username displayed on the page. In both cases, the view will render the signup.html template with the form and the referrer's username (if present).

Now, the signup.html template will be rendered by both views. It will display the signup form to the user. To make the form and render it in the template, we will use the Django forms module. We will create a new file called forms.py in the cryptoapp directory and add the following code to it.

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User


class CustomUserCreationForm(UserCreationForm):
    username = forms.CharField(required=True, label='Username', help_text='Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.', widget=forms.TextInput(attrs={'class': 'form-control'}))

    email = forms.EmailField(required=True, label='Email', help_text='Required. Enter a valid email address.', widget=forms.TextInput(attrs={'class': 'form-control'}))

    password1 = forms.CharField(required=True, label='Password', help_text='Required. Enter a valid password.', widget=forms.PasswordInput(attrs={'class': 'form-control'}))

    password2 = forms.CharField(required=True, label='Password confirmation', help_text='Enter the same password as before, for verification.', widget=forms.PasswordInput(attrs={'class': 'form-control'})) 

    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

Now that the form is ready, we can render it in the signup.html template. We will create a new file called signup.html in the templates directory and add the following code to it.

{% extends 'base.html' %}
{% block title %}
Sign Up
{% endblock title %}
{% block content %}
<h1 class="mb-4">Signup</h1>
<form method="post" class="my-4 p-4 border border-dark rounded">
  {% csrf_token %}
  <div class="form-group">
    <label for="username">Username</label>
        {{ form.username }} 

  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    {{ form.email }}
  </div>
  <div class="form-group">
    <label for="password1">Password</label>
    {{ form.password1 }}
  </div>
  <div class="form-group">
    <label for="password2">Confirm Password</label>
    {{ form.password2 }}
  </div>
  <button type="submit" class="btn btn-primary mt-3">Signup</button>


</form>

{% if form.errors %}
  <div class="alert alert-danger mt-3 mb-5">
    <strong>Error:</strong> {{ form.errors }}
  </div>
{% endif %}

<div class="mt-3">
  Already have an account? <a href="{% url 'login' %}" class="text-primary font-weight-bold">Login</a>
</div>

{% endblock %}

This is a Django template for the sign-up page that extends the base template. It displays a sign-up form with fields for username, email, password and confirm password. If there are any form errors, they are displayed in an alert box. It also includes a link to the login page. The template uses Django's template language to display the form fields and errors.

Since after the user signup we want to make a profile for them, we will create a new file called signals.py in the cryptoapp directory and add the following code to it.

import shortuuid
from django.contrib.auth.models import User
from django.db.models.signals import post_save
from django.dispatch import receiver

from .models import Profile

# This file is used to generate a referral code for each user as soon as they sign up.
def generate_referral_code():
    return shortuuid.ShortUUID().random(length=10)

@receiver(post_save, sender=User)
def create_profile(sender, instance, created, **kwargs):
    if created:
        profile = Profile.objects.create(user=instance, referral_code=generate_referral_code())
        profile.save()

This signal code generates a referral code for a user as soon as they sign up. It does this by listening for the "post_save" signal sent by the User model. When a new User instance is created, this signal triggers the "create_profile" function which creates a Profile instance for that user and generates a unique referral code using shortuuid library. This generated referral code is then saved to the Profile instance.

Now to register this signal, we will change the apps.py file.

from django.apps import AppConfig


class MainappConfig(AppConfig):
    default_auto_field = "django.db.models.BigAutoField"
    name = "mainapp"

    def ready(self):
        import mainapp.signals

Login Screen

The view for the login page will be similar to the signup view. In views.py continue to add the following code.

def login_view(request):
    # check if user is already logged in
    if request.user.is_authenticated:
        return redirect('portfolio')

    if request.method == 'POST':
        form = AuthenticationForm(request, data=request.POST)
        if form.is_valid():
            username = form.cleaned_data.get('username')
            raw_password = form.cleaned_data.get('password')
            user = authenticate(request, username=username, password=raw_password)
            if user is not None:
                login(request, user)
                return redirect('portfolio')
        else:
            messages.error(request, "Invalid username or password.", extra_tags='danger')
    else:
        form = AuthenticationForm()
    return render(request, 'login.html', {'form': form})


@login_required(login_url="login")
def logout_view(request):
    logout(request)
    messages.success(request, 'You have successfully logged out!')
    return redirect('home')

These are two views related to user authentication in a Django web application.

login_view handles the user login process. It checks if the user is already logged in, and if not, it accepts a POST request with login credentials (username and password) from a form, validates them using Django's built-in AuthenticationForm form, and logs the user in if they are authenticated. If the form is invalid, it displays an error message. If the request is not a POST request, it displays the login form.

logout_view handles the user logout process. It logs out the user using Django's logout function, displays a success message, and redirects the user to the home page. This view requires the user to be logged in, and if they are not, it redirects them to the login page specified in the login_url argument of the login_required decorator.

The html template for the login page is similar to the signup page. Create a new file called login.html in the templates directory and add the following code to it.

{% extends 'base.html' %}
{% block title %}
Login
{% endblock title %}
{% block content %}
  <h1>Login</h1>
  {% for message in messages %}
    <p class="alert alert-{{ message.tags }}">{{ message }}</p>
  {% endfor %}
  <form method="post" class="my-4 p-4 border border-dark rounded">
    {% csrf_token %}
    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" name="username" class="form-control">
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" name="password" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary btn-block my-2">Login</button>
  </form>

  <p>Don't have an account? <a href="{% url 'signup' %}">Register</a></p>
  <p>Forgot your password? <a href="{% url 'password_reset' %}">Reset Password</a></p>
{% endblock %}

Now that the login view is ready, we can also take care of the forgot password functionality.

Forgot Password Page

Password Reset Email

For convience, we will group the forgot password view templates and save them in the reset folder inside the templates directory. Create a new file called password_reset.html in the reset directory and add the following code to it.

{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Reset Password</legend>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Request Password Reset</button>
            </div>
        </form>
    </div>
{% endblock content %}

Now, make a file called password_reset_done.html. It will show a message that an email has been sent to the user's email ID.

{% extends "base.html" %}
{% block content %}
    <div class="alert alert-info">
        An email has been sent with instructions to reset your password
    </div>
{% endblock content %}

Once the user clicks this link he will be redirected to the password reset page. Here he can enter his new password and confirm it.
So for this purpose

Now,make a file called password_reset_confirm.html. It will prompt for the new password.

{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Reset Password</legend>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Reset Password</button>
            </div>
        </form>
    </div>
{% endblock content %}

Make a final file called password_reset_complete.html. It will show a message that the password has been changed successfully.

{% extends "base.html" %}
{% block content %}
    <div class="alert alert-info">
        Your password has been set.
    </div>
    <a href="{% url 'login' %}">Sign In Here</a>
{% endblock content %}

Password Reset Success

Remember we need not define any custom views here since Django provides us with the default views for password reset. Please refer the urls.py file.

Home Page

Now let us focus on the home page. We will show the top 10 cryptocurrencies on the home page. We will use the CoinGecko API to fetch the data.

The view for this page will be:

def home_view(request):
    # get the top 10 crypto currencies by market cap
    top_10_crypto_url_global = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=USD&order=market_cap_desc&per_page=10&page=1&sparkline=true'
    top_10_crypto_data_global = requests.get(top_10_crypto_url_global).json()

    # check if user is logged in    
    if request.user.is_authenticated:

        # get user's crypto currencies
        user_cryptocurrencies = Cryptocurrency.objects.filter(user=request.user)
        user_portfolio = Portfolio.objects.filter(user=request.user).first()

        # get the prices and price changes for user's cryptocurrencies
        names = [crypto.name for crypto in user_cryptocurrencies]
        symbols = [crypto.symbol for crypto in user_cryptocurrencies]
        ids = [crypto.id_from_api for crypto in user_cryptocurrencies]
        prices=[]

        # NOTE: Only showing the price change for the last 24 hours for now and not the percentage change to reduce the number of api calls. Only 10-20 api calls per minute are allowed for free users. Otherwise, I could have used the /coins/{id}/market_chart?vs_currency=usd&days=1 endpoint to get the price change for the last 24 hours and calculate the percentage change from that.

        for crytpo_id in ids:  
            prices_url = f'https://api.coingecko.com/api/v3/simple/price?ids={crytpo_id}&vs_currencies=usd&include_24hr_change=true'
            prices_data = requests.get(prices_url).json()

            price_change = prices_data[crytpo_id]['usd_24h_change']
            prices.append(price_change)

        # make a dictionary out of the names and prices
        crypto_price_changes = dict(zip(names, prices))

        context = {
            'top_10_crypto_data_global': top_10_crypto_data_global,
            'user_cryptocurrencies': user_cryptocurrencies,
            'user_portfolio': user_portfolio,
            'crypto_price_changes': crypto_price_changes,
        }

    else:
        context = {'top_10_crypto_data_global': top_10_crypto_data_global}    

    return render(request, 'home.html', context)

The function does the following:

Sends a GET request to the Coingecko API to retrieve data for the top 10 cryptocurrencies by market capitalization in USD.
Checks if the user is authenticated.
If the user is authenticated, it retrieves the user's cryptocurrencies from the database and makes an API call to get their prices and price changes for the last 24 hours.
Creates a dictionary mapping the cryptocurrencies' names to their price changes.
Renders the home page template with a context dictionary containing the top 10 cryptocurrencies data, user's cryptocurrencies, user's portfolio, and cryptocurrencies' price changes.

The view function handles the case where the user is not authenticated, in which case it only renders the home page template with the top 10 cryptocurrencies data.

The json response for the CoinGecko API can be found here.

Create a new file called home.html in the templates directory and add the following code to it.

{% extends 'base.html' %}
{% block title %}
Home 
{% endblock title %}
{% block content %}

<!--Print messages-->
{% if messages %}
  {% for message in messages %}
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      {{ message }}
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  {% endfor %}
{% endif %}

{% if user.is_authenticated %}
  <div class="row justify-content-left custom-title">
    <h2 class="text-uppercase text-primary welcome-user-text">Welcome {{ user.username | capfirst }} </h2> 
  </div>
{% endif %}

<!--SEARCH BAR-->
<div class="container mt-5 mb-5">
  <div class="row justify-content-center">
    <h2 class="text-center custom-heading">Search Cryptocurrency</h2>
  </div>
  <div class="row mt-3 justify-content-center">
    <div class="col-md-6 col-lg-4">
      <form action="{% url 'search' %}" method="post">
        {% csrf_token %}
        <div class="input-group">
          <input class="form-control" type="text" placeholder="Search cryptocurrencies..." name="search_query" required>
          <div class="input-group-append">
            <button class="btn btn-primary" type="submit">Search</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!--GLOBAL CRYPTO CURRENCIES-->
<div class="row justify-content-center">
<h2 class="text-center mt-5 mb-0 custom-heading"> Top 10 CryptoCurrency Rankings </h2> 
</div>
<br><br><br>
<div class="flex-container">
  {% if top_10_crypto_data_global %}
    {% for obj in top_10_crypto_data_global %}
      <div class="crypto-item">
        <img src={{obj.image}} height='70'>
        <div class="crypto-info">
          <h3>{{obj.name}}</h3>
          <p><b>Rank</b>: {{obj.market_cap_rank}}</p>
          <p><b>Market</b> cap: {{obj.market_cap}}</p>
          <p><b>Price</b>: {{obj.current_price}}</p>
          <p><b>Price Change 24H</b>: {{obj.price_change_24h|floatformat:5 }}
            {% if obj.price_change_percentage_24h > 0 %}
              <i class="fa fa-arrow-up green-arrow"></i>
            {% else %}
            <i class="fa fa-arrow-down red-arrow"></i>
            {% endif %} 
          </p<b>
          <p><b>Price Change 24H (%)</b>: {{obj.price_change_percentage_24h|floatformat:3 }}
            {% if obj.price_change_percentage_24h > 0 %}
              <i class="fa fa-arrow-up green-arrow"></i>
            {% else %}
              <i class="fa fa-arrow-down red-arrow"></i>
            {% endif %} 
          </p>
        </div>
      </div>
    {% endfor %}
  {% else %}
    <h3>No data</h3>
  {% endif %}
</div>


<!--USER CRYPTO CURRENCIES-->
{% if user.is_authenticated %}
<div class="row justify-content-center">
  <h2 class="text-center mt-5 mb-3 custom-heading">24H Summary of Your Cryptos </h2> 
</div>
{% if user_cryptocurrencies %}
<div class="table-responsive">
    <table class="table table-striped table-bordered custom-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Owned</th>
          <th>Price Shift</th>
        </tr>
      </thead>
      <tbody>
        {% for k, v in crypto_price_changes.items %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ k }}</td>
            <td>{{ v | floatformat:5}}
              {% if v > 0 %}
                <i class="fa fa-arrow-up green-arrow"></i>
              {% else %}
                <i class="fa fa-arrow-down red-arrow"></i>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
{% else %}
<h3 class="text-center alert alert-danger">No Cryptocurrencies added to wallet. Use the search bar above. </h3>
</div>
{% endif %}
{% endif %}

<br><br><br>
{% endblock content %}

{% block scripts %}
{% endblock scripts %}

This Django template is used to display a cryptocurrency dashboard with two sections: global top 10 cryptocurrencies and user's owned cryptocurrencies with their price changes in the last 24 hours. It also includes a search bar to find specific cryptocurrencies. The logic involves checking if the user is authenticated, displaying data using a for loop, and using conditional statements to display appropriate messages and symbols.

Add Currency / Search Result Page

Let us move to the search page which can be accessed via looking up a cryptocurrency in the home page search box at the top. Add the following view:

@login_required(login_url="login")
def search_view(request):
    if request.method != 'POST':
        # return HTTP status code 405 if the request method is not POST along with a message
        return HttpResponseNotAllowed(['POST'], 'Only POST requests are allowed for this view. Go back and search a cryptocurrency.')

    if not (search_query := request.POST.get('search_query')):
        return HttpResponse('No crypto currency found based on your search query.')

    api_url = f'https://api.coingecko.com/api/v3/search?query={search_query}'
    response = requests.get(api_url)
    search_results = response.json()
    try:
        data = search_results['coins'][0]
    except IndexError:
        return HttpResponse('No crypto currency found based on your search query.')
    coin_id = data['id']
    image = data['large']
    symbol = data['symbol']
    market_cap = data['market_cap_rank']

    # check if the crypto currency is already in the users portfolio and pass that information to the template
    current_user = request.user
    is_already_in_portfolio = False

    user_cryptocurrencies = Cryptocurrency.objects.filter(user=current_user)
    for cryptocurrency in user_cryptocurrencies:
        if cryptocurrency.name.lower() == coin_id.lower():
            is_already_in_portfolio = True    

    context = {
        'data': data,
        'coin_id': coin_id,
        'image': image,
        'symbol': symbol,
        'market_cap': market_cap,
        'is_already_in_portfolio': is_already_in_portfolio,
    }
    return render(request, 'search.html', context)

@login_required(login_url="login")
def add_to_portfolio_view(request):
    if request.method != 'POST':
        return HttpResponse('Need a crypto currency to add to your portfolio. Go back to the home page and search for a crypto currency.')

    # get values from the form
    coin_id = request.POST.get('id')
    quantity = request.POST.get('quantity')
    print(coin_id)

    # get the crypto currency data from the coingecko api based on the coin id
    api_url = f'https://api.coingecko.com/api/v3/coins/{coin_id}'
    response = requests.get(api_url)
    data = response.json()
    print(data)
    # store the name, symbol, current price, and market cap rank of the crypto currency
    user = request.user
    name = data['name']
    id_from_api = data['id']
    symbol = data['symbol']
    current_price = data['market_data']['current_price']['usd']

    try:
        # save the crypto currency to the database
        crypto_currency = Cryptocurrency.objects.create(
            user = user,
            name= name,
            id_from_api= id_from_api,
            symbol= symbol,
            quantity= quantity,
            current_price=current_price,
        )
    except IntegrityError:
        crypto_currency = Cryptocurrency.objects.get(user=user, name=name)
        crypto_currency.quantity += int(quantity)

    crypto_currency.save()

    # calculate the total value of the crypto currency
    total_value = int(quantity) * int(current_price)

    # save the total value of the crypto currency to the database in the portfolio model
    # check if the user already has a portfolio
    if Portfolio.objects.filter(user=user).exists():
        portfolio = Portfolio.objects.get(user=user)
        portfolio.total_value += total_value
    else: 
        portfolio = Portfolio(user=user, total_value=total_value)     

    portfolio.save()
    messages.success(request, f'{name} has been added to your portfolio.')

    # if all the above steps are successful, redirect the user to the portfolio page
    return redirect('portfolio')

The code provided consists of two Django views: search_view and add_to_portfolio_view. Both views require users to be logged in before accessing them, which is enforced by the @login_required decorator.

The search_view allows users to search for a cryptocurrency by sending a POST request to the view with a search query. The view then queries the Coingecko API with the search query to retrieve data on the cryptocurrency. If the query returns a result, the view extracts relevant information from the response and renders a template with the retrieved data.

If the user has already added the searched cryptocurrency to their portfolio, the view passes that information to the template to inform the user.

The add_to_portfolio_view is responsible for adding a cryptocurrency to the user's portfolio. The view expects a POST request with the cryptocurrency ID and quantity. Once received, the view queries the Coingecko API to retrieve data on the cryptocurrency and saves it to the database. If the cryptocurrency already exists in the user's portfolio, the view updates the quantity. The view then calculates the total value of the cryptocurrency based on the current price and quantity and saves it to the user's portfolio. Finally, the view redirects the user to their portfolio page.

If the user tries to access the view with a GET request, the view returns an error message.

Both views make use of the requests library to query the Coingecko API and the HttpResponse and HttpResponseNotAllowed classes to send HTTP responses to the user. The views also make use of the Django messages framework to send success messages to the user.

Now, the template for the search page -> search.html:

{% extends 'base.html' %} {% block title %} Search Results {% endblock title %} {% block content %} 

<div class="text-white border-0 col-md-8 mx-auto mt-5">
  <!-- NOTIFY USER IF THEY HAVE ALREADY ADDED THIS CURRENCY IN THEIR WALLET. ANY NEW ADDITIONS WILL BE INCREMENTED, NOT OVERWRITTEN. -->
  {% if is_already_in_portfolio %}   
  <div class="card-body">
    <p class="card-text text-uppercase mb-0"><small>{{ coin_id }} is already in your portfolio.</small></p>
    <p class="card-text"><small>Any changes to the quantity will be reflected in your portfolio. Units will be added to the existing quantity.</small></p>
    <hr class="border-white">
  </div>
  {% endif %} 

  <div class="card mb-3 text-center border-0">
    <div class="row justify-content-center align-items-center p-5">

      <div class="col-md-4">
        <img src="{{ image }}" height="150" width="150" class="img-fluid" alt="{{ symbol }}">
      </div>

      <div class="col-md-4">
        <div class="card-body text-dark">
          <h5 class="card-title text-uppercase mb-2"><b>{{ coin_id }}</b><p class="card-subtitle mb-2 text-muted"><b>[{{ symbol }}]</b></p></h5>

          <p class="card-text text-uppercase mb-2"><small><b>MARKET CAP:</b> {{ market_cap }}</small></p>
          <form action="{% url 'add_to_portfolio' %}" method="post" class="d-inline-block"> 
            {% csrf_token %} 
            <input type="hidden" name="id" value="{{ coin_id }}">
            <label class="mr-2 font-weight-bold text-uppercase">Units Owned</label> 
            <input type="number" name="quantity" min="1" max="500" value="1" class="form-control d-inline-block w-auto mr-2 mb-2"><br>
            <button type="submit" class="btn btn-primary text-uppercase">Add to Portfolio</button>
          </form>
      </div>        
      </div>
    </div>    

  </div> 
</div>   
{% endblock content %} {% block scripts %}  {% endblock scripts %}

This template is used for displaying search results for a cryptocurrency in a portfolio management application. It allows the user to add the selected cryptocurrency to their portfolio by specifying the quantity owned. If the cryptocurrency is already in the portfolio, the template notifies the user and provides an option to increment the quantity. The template uses Bootstrap classes for styling and Django tags to handle form submissions.

Wallet Page

Now, moving on to the final and the most important part of the project, the wallet page. The wallet page is the page where the user can see all the cryptocurrencies they have added to their portfolio. The wallet page also displays the total value of the user's portfolio. The wallet page is the most important page of the application as it is the page where the user can see the total value of their portfolio and the profit/loss they have made on their investments.

The view for the wallet page is as follows:

@login_required(login_url="login")
def portfolio_view(request):
    # get the current logged in user
    current_user = request.user

    # get the referal code of the current user
    referral_code = current_user.profile.referral_code

    # get a list of all users who have the current user as their referrer
    referrals = Referal.objects.filter(referrer=current_user)

    # get total bonus earned by the current user
    total_bonus = current_user.profile.bonus

    # get the list of cryptocurrencies owned by the current user
    user_cryptocurrencies = Cryptocurrency.objects.filter(user=current_user)

    if user_portfolio := Portfolio.objects.filter(user=current_user).first():
        portfolio = Portfolio.objects.get(user=current_user)

        # get all the crypto currencies in the portfolio and recalculate the total value of the portfolio
        new_portfolio_value = 0

        user_cryptocurrencies = Cryptocurrency.objects.filter(user=current_user)
        for cryptocurrency in user_cryptocurrencies:
            total_value = cryptocurrency.quantity * cryptocurrency.current_price
            new_portfolio_value += total_value

        portfolio.total_value = new_portfolio_value
        portfolio.save()

        context = {
            'current_user': current_user,
            'referral_code': referral_code,
            'user_cryptocurrencies': user_cryptocurrencies,
            'user_portfolio': user_portfolio,
            'referrals': referrals, 
            'total_bonus': total_bonus,
            'new_portfolio_value': new_portfolio_value,
        }
    else:
        context = {
            'current_user': current_user,
            'referral_code': referral_code,
            'user_cryptocurrencies': user_cryptocurrencies,
            'user_portfolio': user_portfolio,
            'referrals': referrals, 
            'total_bonus': total_bonus,
        }
    return render(request, 'portfolio.html', context)


@login_required(login_url="login")      
def delete_from_portfolio_view(request, pk):
    # get the current logged in user
    user = request.user

    # get the crypto currency object from the database
    crypto_currency = Cryptocurrency.objects.get(pk=pk)

    # delete the crypto currency from the database
    crypto_currency.delete()

    # update the total value of the portfolio
    portfolio = Portfolio.objects.get(user=user)

    # get all the crypto currencies in the portfolio and recalculate the total value of the portfolio
    user_cryptocurrencies = Cryptocurrency.objects.filter(user=user)
    for cryptocurrency in user_cryptocurrencies:
        total_value = cryptocurrency.quantity * cryptocurrency.current_price
        portfolio.total_value += total_value

    portfolio.save()    

    # send an alert to the user that the crypto currency has been deleted from the portfolio
    messages.warning(request, f'{crypto_currency.name} has been deleted from your portfolio.')

    return redirect('portfolio')

The first function, portfolio_view, is responsible for rendering the user's portfolio page. It retrieves the current user's information and their cryptocurrency holdings from the database, as well as their referral code, referrals, and total bonus. If the user has a portfolio, the function recalculates its total value based on the current prices of the cryptocurrencies they own, updates the portfolio in the database, and adds the new value to the context. Finally, it renders the portfolio.html template with the retrieved information.

The second function, delete_from_portfolio_view, handles deleting a specific cryptocurrency from the user's portfolio. It first retrieves the current user's information and the specific cryptocurrency object from the database based on its primary key. Then, it deletes the cryptocurrency from the database and recalculates the total value of the user's portfolio based on their remaining holdings. Finally, it sends a warning message to the user notifying them that the cryptocurrency has been deleted, and redirects them back to their portfolio page.

Now, all that remains is to make the HTML template for the portfolio page. The template is as follows:

{% extends 'base.html' %}
{% block title %}
Wallet 
{% endblock title %}
{% block content %}

{% if messages %}
  {% for message in messages %}
    <div class="alert alert-success" role="alert">
      {{ message }}
    </div>
  {% endfor %}
{% endif %}

<h1 class="mb-4 custom-heading">REFERRALS</h1>
<div class="my-4 py-3 px-4 rounded-lg referral-code">
  <div class="d-flex align-items-center justify-content-between">
    <p class="mb-0">Your Referral Code is <strong>http://localhost:8000/signup/{{ referral_code }}</strong></p>
    <button class="btn btn-dark btn-md copy-btn" onclick="sendToClipboard()"><i class="fas fa-copy"></i></button>
  </div>

  <p class="ml-0 mt-3 mb-0"><a href="http://localhost:8000/signup/{{ referral_code }}">Share this link with your friends to earn 100 points for each friend who signs up!</a></p>
</div>

{% if referrals %}
<div class="mb-5">
<table class="table table-striped table-hover custom-table mt-5">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Referral User</th>
        <th scope="col">Date Joined</th>
      </tr>
    </thead>
    <tbody>
      {% for referral in referrals %}
        <tr>
          <td>{{ forloop.counter }}</td>
          <td>{{ referral.user }}</td>
          <td>{{ referral.user.date_joined }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="row mt-5">
    <div class="col-md-6">
      <div class="alert alert-success py-3 mb-3">
        <h4 class="mb-0">Total Referrals</h4>
        <p class="mb-0 display-4">{{ referrals|length }}</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="alert alert-info py-3 mb-3">
        <h4 class="mb-0 text-dark">Total Points Earned</h4>
        <p class="mb-0 display-4 text-dark">{{ total_bonus }}</p>
      </div>
    </div>
  </div>
</div>
{% else %}
<div class="alert alert-danger my-4 p-3 rounded text-center text-light">
  You have not referred any friends yet.
</div>

{% endif %}

<h1 class="mb-4 mt-5 custom-heading">Wallet for {{ current_user|upper }}</h1>

{% if user_cryptocurrencies %}
  <div class="table-responsive">
    <table class="table table-striped mb-4 mt-2 custom-table">
      <thead>
        <tr>
          <th scope="col">Cryptocurrency</th>
          <th scope="col">Current Price</th>
          <th scope="col">Amount Owned</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        {% for crypto in user_cryptocurrencies %}
          <tr>
            <td>{{ crypto.name }}</td>
            <td>{{ crypto.current_price }}</td>
            <td>{{ crypto.quantity }}</td>
            <td><a href="{% url 'delete_from_portfolio' crypto.id %}"><i class="fa fa-trash red-arrow"></i></a></td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
    <div class="alert alert-info py-3 mb-3 fancy-color">
      <h4 class="mb-0 text-light">Total Portfolio Value</h4>
      <p class="mt-2 display-4 text-light">${{ new_portfolio_value }}</p>
    </div>


{% else %}
<div class="alert alert-danger my-3 p-3 rounded text-center text-light">
  You have not added any cryptocurrencies to your portfolio yet.
</div>
<p><a class="btn btn-primary" href="{% url 'home' %}">Add Cryptocurrencies</a></p>
{% endif %}

<br><br><br><br>
<script>
  function sendToClipboard() {
    var copyText = document.querySelector(".referral-code strong");
    copyText.textContent = "http://localhost:8000/signup/" + copyText.textContent;
    var textArea = document.createElement("textarea");
    textArea.value = copyText.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
    textArea.remove();
    alert("Copied to clipboard");
  }
</script>
{% endblock %}

This Django template generates a web page that displays two main sections: referrals and cryptocurrency portfolio. The referral section shows the user's referral link and a table of all the referrals made by the user. The user can copy the referral link to share with friends and earn bonus points for each successful referral. The cryptocurrency portfolio section displays a table of all the cryptocurrencies owned by the user along with their current price and quantity. The total portfolio value is also shown. If the user has not added any cryptocurrencies to the portfolio, a message is displayed prompting them to add some. The template also includes a JavaScript function to copy the referral link to the clipboard when the user clicks on the copy button.

Run the crypto app

Now that about wraps up the crypto app. Let's run the app and see how it looks. Run the following command in the terminal:

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Now, open the following URL http://localhost:8000/signup in your browser. The app should show you the home page of the application. You can sign up for a new account and then log in to the application. Once you log in, you will be redirected to the home page. You can add cryptocurrencies to your portfolio and then view your portfolio and referrals on the portfolio page. You can also copy your referral link to the clipboard and share it with your friends to earn bonus points.

Conclusion

In the second part of this massive tutorial we learned how to build a cryptocurrency portfolio web application using Django.

In our Django development journey, we covered the following topics:

Using the CoinGecko API to fetch the latest cryptocurrency prices and how to use the Django ORM to store the data in the database.
Django's authentication system to create user accounts.
Django messages framework to display messages to the user.
Django's template system to generate dynamic web pages.
Django ORM to query the database and perform various operations such as fetch data, update and delete data from the database, as well as write complex queries.
perform aggregate queries and joins on the database using the Django ORM.
perform transactions, date and time queries, and queries on specific data types such as JSON, arrays , UUID in the database.
Writing highly specifc views, decorators and request methods to handle complex business backend logic such as adding cryptocurrencies to the portfolio, deleting cryptocurrencies from the portfolio, and so on.

Overall, we covered various aspects of Django development that will help us build robust and scalable web applications. In the final part of this tutorial, in the next post we will cover testing all endpoints, views and models so definitely do not miss that.

Django Crypto App Part 1: Functional Requirements and Setup

Atharva Shah — Wed, 10 May 2023 17:01:07 +0000

This tutorial was originally published on my technical blog. Check it out if you like Python, Data Science, AI, Web Development, and NLP-related guides.

Table of contents
Introduction
Defining Functional Requirements
Tech Stack
Planned Endpoints
Creating a New Django Project
Configuring settings.py
Configuring urls.py
Create App Models
Registering Models in Admin
Conclusion

Introduction

Welcome to this 3-part technical tutorial series, where we'll be building a Django project that enables users to manage their cryptocurrency portfolios. To implement the functionalities and additional features, we'll be utilizing API calls to coingecko or any other cryptocurrency API.

In Part 1, we will be defining the functional requirements and give you the overview of what we are building, the approach, the high-level design and the project setup using Django. We will also configure the settings.py file, create the models and register them in the admin panel.

In Part 2, we will add the templates, views and urls and code up the entire project. This will be the most complex and detailed part of this series.

In Part 3, we will wrap the series up by discussing testing approach by writing test cases for Models, Views and Templates using Pytest.

The code for the entirety of the project can be found here -> Github Repo for Django Crypto App

Defining Functional Requirements

Functional requirements define what a software system or application should do to satisfy the user's needs and business objectives. They describe the functions, features, and capabilities of the system and how it should behave under different circumstances. Let us map out the desired outcome from this project to aid us better in the development process. We will split up the app into several pieces to achieve the overall goal:

User Authentication

The system should provide a sign-up, log-in, and log-out functionality, including password recovery features. We'll ensure that passwords are securely stored and hashed using Django's built-in authentication system.

Referral System

Users should be able to invite others to join the platform using a referral link. We'll track referral links and give the referrer a bonus when a new user signs up using their link.

Wallet Management

Users should be able to add and remove cryptocurrencies to their wallet. For each cryptocurrency, the user can add its name, symbol, current price, and quantity to their portfolio.

Portfolio View

Users should be able to view their portfolio in detail, which shows the value of each cryptocurrency in their wallet and the total value of their portfolio.

Homepage

The homepage should display the 24-hour price and percentage change of the top 10 ranked cryptocurrencies, as well as the 24-hour price and percentage change of the currencies in the user's portfolio. We'll represent the data using a table (the table type is up to you).

Search Bar

We'll include a search bar that allows users to search for new cryptocurrencies to add to their portfolio.

Tech Stack

Language: Python 3.10
Framework: Django 4.0+
Database: SQLite [Default]
API USED: CoinGecko - Public Version, No API Key. Rate Limit is 10-25 req/minute
Frontend: Bootstrap 5.1.3
Testing: Django Test Framework
Test Coverage: 90%+
Development Methodology: TDD (Test Driven Development)

Planned Endpoints

Since we have the functional requirements planned out, we can now determine the URLs that we will be adding to the project. Most of these URLs will be accompanied with a template as well as a backend view.

localhost:8000/         -> [home view]
localhost:8000/login
localhost:8000/logout
localhost:8000/signup
localhost:8000/signup/str:referral_code
localhost:8000/portfolio
localhost:8000/search
localhost:8000/add_to_portfolio
localhost:8000/delete_from_portfolio/int:pk
localhost:8000/password_reset
localhost:8000/password_reset_done
localhost:8000/password_reset_confirm/<uidb64>/<token>
localhost:8000/password_reset_complete 
localhost:8000/admin

Creating a New Django Project

To create a Django project for a cryptocurrency portfolio management system, follow these steps:

Navigate to the folder where you want to create the project. Use the command cd followed by the directory name to move to that folder.

cd django-crypto-app

Create a virtual environment for your project. This is optional but recommended, as it helps keep dependencies separate from other projects on your system. Use the command python -m venv followed by the name you want to give to the environment.

python -m venv env

Activate the virtual environment by running the activation script located in the env/Scripts folder.

env\Scripts\activate

Install the packages you'll need for your project. This includes Django for building the web application, requests for making API calls, and coverage for testing purposes. Use the pip install command followed by the package name. I highly recommend using a requirements.txt file to keep track of your dependencies. Also, go to the Github Repo and check the requirements.txt file for the latest dependencies. The ones listed below are the ones used at the time of writing this article but please check the requirements.txt file for the latest dependencies and install them using the command pip install -r requirements.txt

pip install django
pip install requests
pip install coverage
pip install django-crispy-forms
pip install crispy-bootstrap5

Use the django-admin command to start a new Django project in the current folder. Add a dot at the end of the command to specify that you want to use the current folder as the project directory.

django-admin startproject crypto .

Create a Django app named mainapp using the startapp command.

python manage.py startapp mainapp

Create database tables by running makemigrations followed by migrate.

python manage.py makemigrations
python manage.py migrate

Create a superuser account to access the Django admin panel. You will be prompted to enter a username, email, and password.

python manage.py createsuperuser

Start the server using the runserver command.

python manage.py runserver

Open your browser and go to http://localhost:8000/ to see the Django welcome page.

To access the admin panel, visit http://localhost:8000/admin and log in using the superuser account you created in step 8.
Finally, generate a requirements.txt file that lists all the packages and their versions used in your project.

pip freeze > requirements.txt

These steps will create a basic Django project that can be used as a starting point for building the cryptocurrency portfolio management system.

Configuring `settings.py`

Here is what the project file structure looks like:-

crypto - The main project folder. Contains the settings.py file and the urls.py file.

crypto\static - Contains the static files for the project such as css, js, images, etc.

templates - Contains the html templates for the project. I prefer to set up templates in the root folder and configure the TEMPLATES setting in the settings.py file to point to the templates folder.

mainapp - The main app folder.

mainapp\urls.py - Contains the urls for the main app.

mainapp\views.py - Contains the views for the main app.

mainapp\tests.py - Contains the tests for the main app.

mainapp\models.py - Contains the models for the main app such as Crypto and Portfolio.

mainapp\forms.py - Contains the forms for the main app such as CustomUserCreationForm

mainapp\migrations - Contains the migrations for the main app.

mainapp\signals.py - Contains the create_profile signal once a user is created.

In this section, we will be making some configurations to our Django project. Here are the steps to follow:

Open the settings.py file in the main project directory.
Change ALLOWED_HOSTS = ["*"] to allow any host to connect to our application.
Add our newly created custom app, mainapp, as well as the third-party packages we will be using later on by adding the following lines of code to the INSTALLED_APPS section:

"mainapp",
"crispy_forms",
"crispy_bootstrap5",

We will be using crispy_forms and crispy_bootstrap5 for styling our forms. Therefore, we need to set the CRISPY_ALLOWED_TEMPLATE_PACKS and CRISPY_TEMPLATE_PACK variables to "bootstrap5" by adding the following lines of code:

    CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
    CRISPY_TEMPLATE_PACK = "bootstrap5"

Create a new folder called templates in your main project directory to store all your front-end templates.
Add the following code to the TEMPLATES section to specify the template directory we created:

"DIRS": ["templates"], # change this line!

Next, we need to set up our static and media file routes. Add the following lines of code to the settings.py file:

STATIC_URL = "/static/"
STATIC_ROOT = BASE_DIR / "static"
STATICFILES_DIRS = ["crypto/static"]
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"

We will also be needing email configuration to send reset password emails to our users. Add the following lines of code to the settings.py file:

from decouple import config

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = config('EMAIL_HOST_USER') # load from .env file
EMAIL_HOST_PASSWORD = config('EMAIL_HOST_PASSWORD') # load from .env file
DEFAULT_FROM_EMAIL = "Crypto App <your-email-here@gmail.com>" # change this to your own email

Finally, create a .env file in your main project directory and add the following variables to it:

EMAIL_HOST_USER=<your-email-here>
EMAIL_HOST_PASSWORD=<your-password-here>

Make sure to replace and with your own email and password respectively.

Don't hesitate to refer to the settings.py file in the Github Repository by clicking the link at the top of this tutorial.

Configuring `urls.py`

Since we will be using the mainapp as our main app, we need to configure the urls.py file in the main project directory to point to the mainapp. Go to the core project folder and the urls file -> crypto/urls.py and add the following lines of code:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("mainapp.urls")),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Create App Models

In this code snippet, we are creating four different models for our Django web application. These models are used to define the database structure for our web application. The four models are:

User Model: This is the default user model provided by Django's authentication system. We are overriding this model to make the email field unique.
Profile Model: This model is used to store additional information about the user. It has a one-to-one relationship with the User model. We are using Django's signals to automatically create a profile for each user.
Referral Model: This model is used to track referrals made by users. It has a foreign key relationship with the User model, and another foreign key relationship with the referrer.
Cryptocurrency Model: This model is used to store information about cryptocurrencies. It has a foreign key relationship with the User model, allowing us to link cryptocurrencies to specific users. It stores the name, symbol, current price, and quantity of each cryptocurrency.
Portfolio Model: This model is used to store information about a user's portfolio. It has a foreign key relationship with the User model, allowing us to link portfolios to specific users. It stores the total value of the portfolio.

Each of these models is defined using the models.Model class provided by Django. The fields for each model are defined using various field types, such as CharField and DecimalField. We are also using various model relationships, such as ForeignKey and OneToOneField, to link our models together.

Overall, these models provide the necessary database structure for our web application, allowing us to store and manipulate data related to users, their profiles, referrals, cryptocurrencies, and portfolios.

from django.contrib.auth.models import User
from django.db import models

# Override the default User model to make the email unique
User._meta.get_field('email')._unique = True

# Make the profile for a user, automatically created when a user is created using Django signals
class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    referral_code = models.CharField(max_length=10, unique=True)
    bonus = models.IntegerField(default=0)

    def __str__(self):
        return f'{self.user.username} profile'

# Create the referal model
class Referal(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    referrer = models.ForeignKey(User, on_delete=models.CASCADE, related_name='referrals')

    def __str__(self):
        return f'{self.user.username} was referred by {self.referrer.username}'

# Create the Cryptocurrency model
class Cryptocurrency(models.Model):
    # here name is also the id of the cryptocurrency, so useful for API calls
    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='cryptocurrencies', null=True)
    id_from_api = models.CharField(max_length=50)
    name = models.CharField(max_length=50) 
    symbol = models.CharField(max_length=10)
    current_price = models.DecimalField(max_digits=10, decimal_places=2)
    quantity = models.DecimalField(max_digits=10, decimal_places=2, default=1)

    class Meta:
        unique_together = ('user', 'name')

    def __str__(self):
        return f'{self.name} ({self.symbol})'

# Create the portfolio linked to a user and store the total value of the portfolio
class Portfolio(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='portfolios')
    total_value = models.DecimalField(max_digits=15, decimal_places=2)

    def __str__(self):
        return f'{self.user.username} - Portfolio: {self.total_value}'

Registering Models in Admin

To make our models accessible from the Django admin panel, we need to register them in the admin.py file. Here's the code that needs to be added:

from django.contrib import admin
from .models import Cryptocurrency, Portfolio, Profile, Referal

@admin.register(Referal)
class ReferalAdmin(admin.ModelAdmin):
    list_display = ('user', 'referrer')

@admin.register(Profile)
class ProfileAdmin(admin.ModelAdmin):
    list_display = ('user', 'referral_code', 'bonus')

@admin.register(Cryptocurrency)
class CryptocurrencyAdmin(admin.ModelAdmin):
    list_display = ('user', 'name', 'id_from_api', 'symbol', 'current_price', 'quantity')

@admin.register(Portfolio)
class PortfolioAdmin(admin.ModelAdmin):
    list_display = ('user', 'total_value')

In this code, we first import the models that we want to register. Then, for each model, we create a new class that inherits from admin.ModelAdmin, which allows us to customize the way the model is displayed in the admin panel. We set list_display to specify which fields we want to display for each instance of the model.

After adding this code to admin.py, we need to run migrations to update the database schema. To do this, we can run the following commands:

python manage.py makemigrations
python manage.py migrate

The first command creates a new migration file based on the changes we made to the models, while the second command applies those changes to the database. After running these commands, the models will be registered in the admin panel and we can interact with them through the dashboard interface.

Conclusion

In this technical blog post, we covered the initial steps of building a web application using Django. We started by specifying the requirements of our project and planning the project structure. Then, we determined the URLs and models we needed for our application and configured the settings.py file to ensure that our application worked properly.

Next, we created our models and defined their relationships to each other, which helped us lay out the database schema. We also registered our models in the Django admin panel, allowing us to interact with them easily via the dashboard interface.

Overall, we have successfully completed the introductory part of our project. In the next part, we will be working on views, forms, templates, and URLs to build the core functionalities of our application. This will help us to create a dynamic and responsive web application that meets our project requirements. Stay tuned for the next part!

DEV Community: Atharva Shah

Setting Up CI/CD to Netlify for Static Sites via Github

Description

I. Introduction

II. Setting Up a Netlify Account

III. Setting Up CI/CD to Netlify

Configuring the Build Settings on Netlify

Configuring the Deployment Settings on Netlify

IV. Setting Up CI/CD with Github Actions

Introduction to Github Actions

Creating a Github Actions Workflow for the Static Site

Configuring the Workflow to Deploy to Netlify

V. Best Practices for CI/CD with Netlify and Github

VI. Troubleshooting CI/CD Issues

VII. Conclusion

Django Crypto App Part 3: Wrap-Up and Testing

Introduction

Test Driven Development Approach Explained

URL Testing

Model Testing

View Testing

Writing Tests

Testing URLS

Testing Models

Testing Views

How to Run Tests

Conclusion

Django Crypto App Part 2: Templates, Views and URLs

Introduction

Setting up the URLs

Setting Up Templates

Setting Up Views

Signup

Login Screen

Forgot Password Page

Password Reset Email

Password Reset Success

Home Page

Add Currency / Search Result Page

Wallet Page

Run the crypto app

Conclusion

Django Crypto App Part 1: Functional Requirements and Setup

Table of contents

Introduction

Defining Functional Requirements

Tech Stack

Planned Endpoints

Creating a New Django Project

Configuring settings.py

Configuring urls.py

Create App Models

Registering Models in Admin

Conclusion

Configuring `settings.py`

Configuring `urls.py`