This content originally appeared on DEV Community and was authored by SAINAPEI LENAPUNYA
Introduction: From Setup to Sleek Web App, Let’s Do This!
Hey Django warriors! 👋
Welcome to Day 4 of my 20 Days of Django Challenge. Today, we’re not just writing code we’re building a cool tech-themed app powered by Django’s powerful Model-View-Template (MVT) architecture.
I created a Django project with two apps:
users ➜ handles user registration
yooh ➜ showcases tech blog posts with a modern UI
From installing Django to writing views, templates, and wiring up URLs, I’ve got the screenshots, code snippets, and full breakdown to guide you step-by-step.🔥
Let’s turn your Django basics into a beautiful web experience!
Step-by-Step Breakdown: What I Built Today
1️⃣ Environment Setup
Checked Python & pip versions:
python --version
pip --version
Created & activated a virtual environment:
python -m venv env
source venv/bin/activate # Windows: venv\Scripts\activate
Installed Django:
pip install django
2️⃣ Project & App Creation
Started the Django project:
django-admin startproject config .
Created two apps:
python manage.py startapp users
python manage.py startapp yooh
Registered the apps in settings.py:
INSTALLED_APPS = [
...
'users.apps.UsersConfig',
'tech.apps.TechConfig',
]
3️⃣ The MVT Magic ✨
Models
CustomUser in users/models.py extending AbstractUser
TechPost in yooh/models.py for tech blog posts
Then ran:
python manage.py makemigrations
python manage.py migrate
Views
Register view in users/views.py with Django forms and messages
Home view in yooh/views.py displaying all tech posts
Templates
Created base.html with Bootstrap 5 navbar + footer
Designed:
register.html ➜ user form
home.html ➜ tech post cards
Folder structure:
templates/
├── base.html
├── users/
│ └── register.html
└── tech/
└── home.html
4️⃣ Static Files & CSS
Added this to settings.py:
TEMPLATES[0]['DIRS'] = [BASE_DIR / 'templates']
STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
Created static/css/styles.css with custom layout and card styling.
5️⃣ URL Configuration
Main urls.py:
path('users/', include('users.urls')),
path('', include('yooh.urls')),
App URLs:
users/urls.py ➜ register/
tech/urls.py ➜ homepage ('')
Run server:
python manage.py runserver
The results:
Lessons & Reflections
(i)Understanding MVT takes some mental rewiring, but it’s super clean once you grasp it.
(ii)Separating templates by app = organized & scalable.
(iii)Bootstrap made the app instantly polished minimal CSS, max results!
✅ Conclusion: Your Turn to Build!
Day 4 was packed but powerful! I’ve now got:
(i)Two connected apps
(ii)Real models & views
(iii)A working UI with user registration
(iv)Sample blog posts live on the homepage
Whether you’re following this series or just curious about Django, I encourage you to give it a try!
📣Call to Action:
Try building this project yourself or remix it with your own twist!
Have questions? Built something cool? Drop a comment below!
This content originally appeared on DEV Community and was authored by SAINAPEI LENAPUNYA
SAINAPEI LENAPUNYA | Sciencx (2025-06-30T18:29:05+00:00) Day 4 of 20 Days of Django: Build a Stylish 2-App Project with MVT Power!. Retrieved from https://www.scien.cx/2025/06/30/day-4-of-20-days-of-django-build-a-stylish-2-app-project-with-mvt-power/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.