In this tutorial, we’ll walk through building a random quote generator using Django. We’ll integrate the ZenQuotes API for fetching quotes, use Tailwind CSS for responsive styling, and deploy the project on Heroku using Gunicorn. This guide will also include saving quotes in a PostgreSQL database for persistence and future analysis.
📺 For a video tutorial: Check out my YouTube video with a step-by-step walkthrough of this project.
📝 For more Django tutorials: Visit my blog .
Prerequisites
Before you start, ensure you have a basic understanding of Django, Python, and web development. You’ll also need the following tools installed:
Python: Version 3.7+
Django: Version 3.0+
Heroku CLI: For deployment
Git: For version control
Project Overview
We’ll set up a Django project called quote with an app named home. The main functionality will be to fetch a random quote from the ZenQuotes API and display it on a page styled with Tailwind CSS.
Step 1: Set Up Your Django Project and App
Create a New Django Project
django-admin startproject quote
cd quote
python manage.py startapp home
Add the home app to the INSTALLED_APPS in your settings.py:
# quote/settings.py
INSTALLED_APPS = [
...
'home',
]
Configure the Quotes Model
Define a model to store quotes in home/models.py:
# home/models.py
from django.db import models
class Quotes(models.Model):
quote_text = models.TextField()
author_name = models.CharField(max_length=255)
image_url = models.URLField()
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return f"{self.author_name}"
class Meta:
verbose_name_plural = 'Quotes'
Run migrations to set up the database:
python manage.py makemigrations
python manage.py migrate
Step 2: Fetch a Random Quote from ZenQuotes API
ZenQuotes offers a free API for random quotes. We’ll create a view to fetch a quote from ZenQuotes and an image from Picsum, then save and display the data.
Create the View
In home/views.py, create a function to fetch a random quote and image:
# home/views.py
import requests
from django.shortcuts import render
from .models import Quotes
def random_quotes(request):
quote_api_url = 'https://zenquotes.io/api/random'
picsum_api_url = 'https://picsum.photos/800/600'
quote_response = requests.get(quote_api_url)
picsum_response = requests.get(picsum_api_url)
quote = "No quote available"
author = "Unknown"
image_url = None
if quote_response.status_code == 200 and picsum_response.status_code == 200:
quote_data = quote_response.json()
image_url = picsum_response.url
if isinstance(quote_data, list) and len(quote_data) > 0:
quote = quote_data[0].get('q', "No quote available")
author = quote_data[0].get('a', "Unknown")
Quotes.objects.create(quote_text=quote, author_name=author, image_url=image_url)
context = {
'quote': quote,
'author': author,
'image_url': image_url,
}
return render(request, 'random_quotes.html', context)
Configure URLs
Link the view in the urls.py of the home app:
# home/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.random_quotes, name='random_quotes'),
]
Include the home app’s URLs in the main quote/urls.py file:
quote/urls.py
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('home.urls')),
]
Step 3: Create the HTML Template with Tailwind CSS
In the home/templates directory, create random_quotes.html for displaying the random quote:
<!-- home/templates/random_quotes.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Quote</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.1/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-200 flex items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md text-center">
<p class="text-gray-800 text-lg font-semibold mb-2">"{{ quote }}"</p>
<p class="text-gray-600 text-sm mb-4">— {{ author }}</p>
<img src="{{ image_url }}" alt="Random Image" class="w-full rounded mt-4">
</div>
</body>
</html>
Step 4: Deploy to Heroku with Gunicorn
Install Gunicorn and Update requirements.txt
Pip install gunicorn django-heroku
pip freeze > requirements.txt
Configure the Procfile for Heroku
Create a Procfile at the project root to define the web process:
text
web: gunicorn quote.wsgi --log-file -
Set Up Heroku Settings in settings.py
Add Heroku settings:
quote/settings.py
Deploy to Heroku
Initialize Git, commit your code, and log in to Heroku:
git init
git add .
git commit -m "Initial commit"
heroku login
Create a new Heroku app and push your code:
heroku create
git push heroku main
Finally, open your app:
heroku open
Conclusion
Congratulations! You've built and deployed a Django-powered random quote generator that fetches quotes from the ZenQuotes API, displays them with a Tailwind-styled interface, and saves them in the database.
📺 For a visual guide: Watch my YouTube video for step-by-step instructions.
📝 For more tutorials like this: Check out my blog .
Let me know in the comments if you have any questions or suggestions! Happy coding!
Top comments (0)