DEV Community: Mohamed

Behind the Scenes: Building My Modular Django Portfolio - PART 1

Mohamed — Tue, 22 Jul 2025 07:06:45 +0000

Introduction

Keeping your portfolio up to date is a must for every developer. After launching my first SaaS project, I realized it was time to refresh my own.

To make the process more enjoyable, I went with a vibe-driven development flow — building intuitively and having fun with it. Here are the tools that shaped the journey:

Gemini: for brainstorming and UI design ideas.
Cursor Code Editor: to write and refactor code with AI assistance.
Django framework: a powerful framework for building full-stack websites.
Custom coding: for fixing the bugs made by AI assistants.
JavaScript: to bring interactivity to the frontend — from smooth transitions to dynamic components.
Bootstrap 5 (https://getbootstrap.com/): to speed up UI layout with prebuilt components and a solid grid system.
CSS3: for fine-tuning styles, animations, and giving the site its own personality.
Font Awesome(https://fontawesome.com/): because icons speak louder than text sometimes (and it just looks slick).

Getting Started

Once I had my tools and mindset in place, I focused on setting up the project structure. My goal was to keep the code clean, modular, and easy to maintain — especially for future edits.

To achieve that, I broke down the system into small, focused components — what I call "mini apps." Each handled a specific part of the functionality, making the codebase easier to scale and debug.

.
├── core # My Core application that ill hold all the project configs 
│   ├── asgi.py
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── dashboard # The dashboard application for admin and landing page content
│   ├── admin.py
│   ├── apps.py
│   ├── context_processors
│   ├── __init__.py
│   ├── migrations
│   ├── models
│   ├── __pycache__
│   ├── static
│   ├── templates
│   ├── tests.py
│   ├── urls.py
│   └── views
├── frontend # the portfolio's UI: Landing page, projects, blog
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── __pycache__
│   ├── static
│   ├── templates
│   ├── tests.py
│   ├── urls.py
│   └── views
├── manage.py
├── README.md
├── requirements.txt
├── static
└── user_auth # Basic User auth application (Login system)
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── migrations
    ├── models.py
    ├── __pycache__
    ├── static
    ├── templates
    ├── tests.py
    ├── urls.py
    └── views

The Next Steps:

Setting up the project to ensure clean, readable code is the first step in every successful build.

Coding comes next. In the following part, I’ll walk you through how I:

Generated a fully responsive landing page
Built a fully responsive dashboard
Fixed errors made by AI

Any Questions?: drop it down and lets discuss

Stay tuned for the next part

download manager using python

Mohamed — Wed, 17 Jul 2024 07:04:36 +0000

I just found this amazing #python library for managing downloads with a great features.
I liked it a lot so i decided to share it with you.

Auth via E-mail: Overriding Django's default auth system

Mohamed — Sat, 30 Mar 2024 08:53:20 +0000

Django framework provides a great mechanism to authenticate users via their username and password, but what if you need to implement a custom auth where you have to authenticate via the email instead?
This Guide covers the steps to create a custom user auth for you project

Creating your auth.py: first of all inside you app directory create a file named auth.py, that's where we're gonna override the default authentication behavior.
*** Overriding the default authenticate method***: inside you auth.py file paste the following code:

from django.contrib.auth.backends import BaseBackend
from django.contrib.auth import get_user_model

class CustomUserAuth(BaseBackend):
    def __init__(self) :
        # get the custom user model we've already created
        self.UserModel = get_user_model()
        # overriding the authenticate  method to include our own logic for authentication
    def authenticate(self, request, username=None,password=None,**kwargs):
        # retrieve the username
        username = kwargs.get('username')
        if username:
            try :
                # treat the username as email if it contain @
                if '@' in username:
                    user = self.UserModel.objects.get(email=username)
                # if it doesnt treat it as a username
                else:
                    user = self.UserModel.objects.get(username=username)
                # check the password that's included on the request 
                # and return user object if its true
                if user.check_password(password):
                    return user
                else :
                    return None
            except Exception as e:
                return None
    # a function to get the user object
    def get_user(self, user_id):
        try:
            return self.UserModel.objects.get(pk=user_id)
        except self.UserModel.DoesNotExist:
            return None

Tell django about the new settings: return to your settings.py and add this line:


AUTHENTICATION_BACKENDS = [
    'relative/path/tp/your/auth.py'
]

this line will tell django that we've created our own authentication login and that we're going to use it

And that it, your custom authentication should now work either by email or useraname

Creating APIs : introducing the beginner friendly framework

Mohamed — Wed, 06 Mar 2024 07:03:28 +0000

Recently i got hired for working with local development agency to create a dashboard with its API, but i was struggling writing the API, testing it and writing its docs.
Until i discovered the new django ninja 3rd party library and it really amused me. Where beside of creating the API and writing it it allows you to even test it locally from your web browser.
Django ninja gives every developer to create the desired API with less coding and simpler syntax

and with using the propre URL routing you can choose the URL path of every ENDPOINT

so using a the less coding you can achieve all what you desire on your API

React Vs Flutter: what's the best option?

Mohamed — Fri, 12 Jan 2024 11:10:20 +0000

A while ago, I wanted to be a mobile application developer and that made me confused about which stack I must go along with.
After some googling I found that React Native and Flutter are my best options but that made me more confused, and I start asking about which one is best for me as a Django backend Developer.
thereafter I decided to go with React for some reasons that I'll mention:
1 - Learning React Native will make you obliged to Learn JS and all its framework Including ReactJs
2 - React Native allow you to code once and publish your application for Android and IOS ( cross platform )
3 - React Native provides developer the control over the native components of the OS

My Journey with ReactJs

Mohamed — Thu, 11 Jan 2024 20:02:10 +0000

Hello Guys.
am a newbie to this amazing platform and i want to share you my latest progress on the ReactJs Learning path, and the picture shows the result of studying 4 hours.
What do you think? what are you learning currently ?