Build A Dictioinary Web App With Django

As a Python developer, working on various projects, I came across a scenario where I needed to build a dictionary web app with Django. In this tutorial, I’ll walk you through creating a simple yet powerful dictionary app using Django. The app will allow users to enter a word and get its meaning along with the part of speech.

I’ll share two methods: one using a Python dictionary for quick lookup and another using an external API for richer data. Both approaches are easy to implement and perfect for anyone looking to build a useful language tool.

Let’s get in!

What You’ll Need Before Starting

Python 3.8+ installed on your system
Django 4.x installed (pip install django)
Basic familiarity with Django models, views, and templates
Optional: An API key if you want to use an external dictionary API (explained below)

Read Create a Search Autocomplete with a Filter in Django

Method 1: Create a Dictionary App Using a Python Dictionary

This approach uses a simple Python dictionary to store word-meaning pairs. It’s fast and straightforward, ideal for small datasets or prototypes.

Step 1: Set Up Your Django Project

Open your terminal and run:

django-admin startproject dict_project
cd dict_project
python manage.py startapp dictionary

Add 'dictionary' to your INSTALLED_APPS in dict_project/settings.py.

Step 2: Create Your Dictionary Data

Inside your dictionary app folder, create a file named data.py and add some sample words:

# dictionary/data.py

WORDS = {
    "python": {"meaning": "A high-level programming language.", "part_of_speech": "noun"},
    "django": {"meaning": "A high-level Python web framework.", "part_of_speech": "noun"},
    "algorithm": {"meaning": "A process or set of rules to be followed in problem-solving operations.", "part_of_speech": "noun"},
    "variable": {"meaning": "A storage location paired with an associated symbolic name.", "part_of_speech": "noun"},
    # Add more words as needed
}

Step 3: Create Views to Handle User Input and Display Results

Edit dictionary/views.py:

from django.shortcuts import render
from .data import WORDS

def home(request):
    return render(request, "dictionary/home.html")

def search_word(request):
    query = request.GET.get('word', '').lower()
    result = WORDS.get(query)
    context = {
        "word": query,
        "result": result,
        "not_found": False if result else True,
    }
    return render(request, "dictionary/result.html", context)

Read Register User with OTP Verification in Django

Step 4: Set Up URLs

Create a urls.py inside the dictionary app:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('search/', views.search_word, name='search_word'),
]

Include these URLs in the main dict_project/urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('dictionary.urls')),
]

Step 5: Create Templates

Create a templates/dictionary/ folder inside your app.

home.html:

<!DOCTYPE html>
<html>
<head>
    <title>Dictionary App</title>
</head>
<body>
    <h1>Dictionary Lookup</h1>
    <form action="{% url 'search_word' %}" method="get">
        <input type="text" name="word" placeholder="Enter a word" required>
        <button type="submit">Search</button>
    </form>
</body>
</html>

result.html:

<!DOCTYPE html>
<html>
<head>
    <title>Dictionary Result</title>
</head>
<body>
    <h1>Result for "{{ word }}"</h1>
    {% if not_found %}
        <p>Sorry, the word "{{ word }}" was not found in the dictionary.</p>
    {% else %}
        <p><strong>Meaning:</strong> {{ result.meaning }}</p>
        <p><strong>Part of Speech:</strong> {{ result.part_of_speech }}</p>
    {% endif %}
    <a href="{% url 'home' %}">Search Again</a>
</body>
</html>

Step 6: Run Your App

Run the development server:

python manage.py runserver

Visit http://127.0.0.1:8000/ in your browser and try searching for words like “python” or “algorithm”.

I executed the above example code and added the screenshot below.

Check out Create a Card with a Button in Django

Method 2: Use an External Dictionary API for Dynamic Meanings

For a more scalable and rich dictionary app, you can integrate an external API like DictionaryAPI or Merriam-Webster’s API.

Step 1: Install Requests Library

pip install requests

Step 2: Update Views to Fetch Data from the API

Modify dictionary/views.py:

import requests
from django.shortcuts import render

def home(request):
    return render(request, "dictionary/home.html")

def search_word(request):
    query = request.GET.get('word', '').lower()
    api_url = f"https://api.dictionaryapi.dev/api/v2/entries/en/{query}"
    response = requests.get(api_url)

    if response.status_code == 200:
        data = response.json()
        # Extract the first meaning and part of speech
        meaning = data[0]['meanings'][0]['definitions'][0]['definition']
        part_of_speech = data[0]['meanings'][0]['partOfSpeech']
        result = {"meaning": meaning, "part_of_speech": part_of_speech}
        not_found = False
    else:
        result = None
        not_found = True

    context = {
        "word": query,
        "result": result,
        "not_found": not_found,
    }
    return render(request, "dictionary/result.html", context)

Step 3: Keep the Same URLs and Templates

You can reuse the URLs and templates from Method 1 without any changes.

Step 4: Test Your App

Run the server and try searching for any English word. The app will fetch live data from the API.

I executed the above example code and added the screenshot below.

Read Create a User Profile Using Django

Tips for Enhancing Your Dictionary App

Add user authentication to save favorite words.
Implement autocomplete suggestions using JavaScript.
Cache API results to improve performance.
Add support for synonyms and antonyms.
Style your app with Bootstrap or Tailwind CSS for a better user experience.

Building a dictionary application in Django is a rewarding project that combines web development with practical data lookup functionality. Whether you use a static Python dictionary or connect to a live API, you’ll gain valuable experience in handling user input, rendering dynamic content, and structuring a Django app effectively.

If you want to build something useful for English learners or writers in the USA, this app is a great start. You can expand it with more features and make it your own!