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)