How to show Confetti on the screen when a user signs up on your Django app

Adding delightful animations to your web application can greatly enhance the user experience and make it more engaging. In this tutorial, we will explore how to implement confetti animation on the screen when a user signs up on your Django app. The confetti animation will create a visually appealing effect to celebrate and acknowledge the user's successful registration.

Prerequisites: To follow along with this tutorial, you should have a basic understanding of Django, Python, HTML, CSS, and JavaScript.

Step 1: Setting up the Django Project

a. Create a new Django project using the command:

django-admin startproject confetti_app

b. Create a new Django app within the project:

cd confetti_app
python manage.py startapp accounts

c. Configure the Django settings.py file:

Add 'accounts' to the INSTALLED_APPS list.
Configure the database settings according to your setup.

a. Inside the accounts app, create a forms.py file:

from django import forms

class SignupForm(forms.Form):
    username = forms.CharField(max_length=100)
    email = forms.EmailField()
    password = forms.CharField(widget=forms.PasswordInput)

b. In the same app, create a views.py file:

from django.shortcuts import render
from .forms import SignupForm

def signup(request):
    if request.method == 'POST':
        form = SignupForm(request.POST)
        if form.is_valid():
            # Save the user and perform necessary actions
            # such as sending a confirmation email.
            return render(request, 'accounts/signup_success.html')
    else:
        form = SignupForm()
    return render(request, 'accounts/signup.html', {'form': form})

c. Create the signup.html template in the templates/accounts directory:

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</head>
<body>
    <form method="post" action="{% url 'signup' %}">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Sign Up</button>
</form>
</body>
</html>

d. Create the signup_success.html template in the same directory:

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up Success</title>
</head>
<body>
    <h1>Signup Successful!</h1>
</body>
</html>

Step 3: Adding Confetti Animation

a. Include the confetti.js library in your project. You can download the library or include it from a CDN.

b. Create a new JavaScript file, confetti.js, and include it in your HTML template:

// confetti.js
document.addEventListener('DOMContentLoaded', function () {
    // Trigger confetti animation when the signup success page loads
    if (window.location.pathname === '/signup-success/') {
        startConfetti();
        setTimeout(stopConfetti, 5000); // Stop confetti after 5 seconds
    }
});

c. Update the signup_success.html template to include the necessary HTML and CSS for the confetti animation:

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up Success</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/confetti-js/1.0.3/confetti.min.js"></script>
    <script src="{% static 'confetti.js' %}"></script>

    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <h1>Signup Successful!</h1>
    <canvas id="confetti-canvas"></canvas>
</body>
</html>

d. Update the settings.py file to include the static file configuration:

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

Step 4: Configure URL Routing

a. Update the urls.py file in the Django project's root directory:

from django.urls import path, include

urlpatterns = [
    path('accounts/', include('accounts.urls')),
]

b. Create a urls.py file in the accounts app:

from django.urls import path
from . import views

urlpatterns = [
    path('signup/', views.signup, name='signup'),
]

Step 5: Run the Django Development Server

Start the Django development server using the following command:

python manage.py runserver

Conclusion

Congratulations! You have successfully implemented confetti animation on your Django app to celebrate when a user signs up. The confetti animation adds an engaging and visually appealing effect to the signup process, enhancing the overall user experience. You can further customize the confetti animation by modifying the confetti.js library or exploring other animation libraries.

Support my blog

If you found this article helpful, you can buy me a coffee here