DEV Community

SAINAPEI LENAPUNYA
SAINAPEI LENAPUNYA

Posted on

Day 4 of 20 Days of Django: Build a Stylish 2-App Project with MVT Power!

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
Enter fullscreen mode Exit fullscreen mode

Image description

Created & activated a virtual environment:

python -m venv env source venv/bin/activate # Windows: venv\Scripts\activate
Enter fullscreen mode Exit fullscreen mode

Image description

Installed Django:

pip install django
Enter fullscreen mode Exit fullscreen mode

Image description

2️⃣ Project & App Creation
Started the Django project:

django-admin startproject config .
Enter fullscreen mode Exit fullscreen mode

Image description

Created two apps:

python manage.py startapp users python manage.py startapp yooh
Enter fullscreen mode Exit fullscreen mode

Image description

Registered the apps in settings.py:

INSTALLED_APPS = [ ... 'users.apps.UsersConfig', 'tech.apps.TechConfig', ]
Enter fullscreen mode Exit fullscreen mode

Image description

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
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

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
Enter fullscreen mode Exit fullscreen mode

4️⃣ Static Files & CSS
Added this to settings.py:

TEMPLATES[0]['DIRS'] = [BASE_DIR / 'templates'] STATIC_URL = 'static/' STATICFILES_DIRS = [BASE_DIR / 'static']
Enter fullscreen mode Exit fullscreen mode

Image description

Image description
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')),
Enter fullscreen mode Exit fullscreen mode

Image description
App URLs:

users/urls.py ➜ register/ tech/urls.py ➜ homepage ('')
Enter fullscreen mode Exit fullscreen mode

Run server:

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Image description

The results:

Image description

Image description

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!

Top comments (0)