As part of my 20 Days of Django journey, I tackled the challenge of building a project with two interconnected apps library and members and styled it up using Bootstrap. Here's how I structured it, step by step.
Todays Task
- Use Django’s project + app architecture
- Link two apps: library and members
- Display templates for each
✅ Step 1: Installed virtualenv (if not already there) using the command
sudo apt install python3-venv ✅ Step 2: Created a virtual environment in my project folder
python3 -m venv venv This created a venv/ folder containing an isolated Python environment complete with its own pip, python, and site-packages.
✅ Step 3: Activated the virtual environment
source venv/bin/activate 
Once activated, my terminal prompt changed (it showed (venv)), and any packages I installed from that point forward were isolated to the project.
To deactivate it run the command: deactivate
To Install Django you run the command:
python -m pip install django 
📁 Step One: Starting the Django Project.
django-admin startproject community cd community I saw this structure:
community/ manage.py my_project/ __init__.py settings.py urls.py asgi.py wsgi.py 📁 Step 2: Created Django Apps
Installed the required django apps i went with library & members.
python manage.py startapp library python manage.py startapp members 
Step 3: Creating Models That Talk to Each Other
library/models.py
class Book(models.Model): title = models.CharField(max_length=100) author = models.CharField(max_length=100) members/models.py:
from library.models import Book class Member(models.Model): name = models.CharField(max_length=100) borrowed_book = models.ForeignKey(Book, on_delete=models.CASCADE) I ran migrations to apply these changes:
python manage.py makemigrations python manage.py migrate 🧠 Step 4: Simple Views
Each app got its own view to send data to the templates.
library/views.py:
def book_list(request): books = Book.objects.all() return render(request, 'library/books.html', {'books': books}) members/views.py:
def member_list(request): members = Member.objects.all() return render(request, 'members/members.html', {'members': members}) 🖼️ Step 5: Linking Templates with Style
Both apps got their own templates directory. I used Bootstrap and a light CSS gradient background to make them feel cleaner and more polished.
Here’s a peek at books.html:
<body style="background: linear-gradient(to bottom right, #f2f2f2, #e6f7ff);"> <div class="container mt-5 bg-white p-4 rounded shadow"> <h2>📚 Library Books</h2> <ul> {% for book in books %} <li>{{ book.title }} by {{ book.author }}</li> {% endfor %} </ul> <a href="/members/">View Members</a> </div> </body> Same idea applied to members.html, with a flipped color scheme to visually separate them.
🌐 Step 6: URLs That Connect It All
Each app got its own urls.py, which I included in the main community/urls.py:
urlpatterns = [ path('library/', include('library.urls')), path('members/', include('members.urls')), ] Now I could browse:
/library/ to see the books
/members/ to view who borrowed what
Here is the output for the 2 apps
💡 What I Learned
🔍 View the source code on GitHub
- Django's app structure scales cleanly even for a beginner
- Connecting models across apps is smooth once you understand ForeignKey
- Styling with Bootstrap + gradients makes Django feel like more than just a backend toy
- Always create
urls.pyfor each app before including them inproject/urls.py(yes, I hit that error 😅)
This was my first time combining multiple Django apps into a meaningful, linked experience and styling it to be user-friendly. Now I’m thinking about adding forms for borrowing books, filtering members by book, and maybe even connecting it all to the admin panel with some customization. Day 4 wrapped with a big win, and I'm already hyped for Day 5.
Top comments (1)
Good work!