Django Portfolio Project – Part 1 – Starting the Project

In this series we’ll be creating a web application with Django. In particular, we’ll be creating a Portfolio app where the owner can showcase their work – projects, books, articles, graphics, videos or whatever else they created.

We’ll be creating the project from scratch. You don’t need any Django-related knowledge. You should have some familiarity with Python, though, because Django is a Python web framework. But don’t worry, if you run into a problem, you will probably find a solution to it in one of my other articles on this blog. If not, you can always ask J

If you also know some HTML and CSS, that’s even better, but this is not indispensable.

About the Project

Django is first of all a backend framework. It works well with multiple JavaScript frontend frameworks like React or Vue, for example. But we’re not going to use these frameworks here. Using just Django is enough to create a simple fullstack application with templates to implement the frontend part. This is what we are going to do in this series.

The Portfolio application will consist of several pages. In the home page we’ll put all the items we want to show off, arranged by category. Then we’ll have detailed views for each item. A very useful and important part of the app will be the admin site, where the owner of the page will be able to add, update or delete the particular items. To do this, we’ll implement the CRUD (create, read, update and delete) functionality, typical of any REST API. A REST API, by the way, contains all the resources that we can tap into, accessible in a specific way, which we are going to discuss later on. We’ll store the data in a database. We’ll also add some extra functionality to the app, like filtering by category or technology.

OK, it’s time to get our feet wet by starting the project.

The Virtual Environment

We don’t want to start the project in the global environment. Instead, we’ll create a virtual environment where we’ll use the versions of the particular packages that we need. I’m working on Windows, so if you’re working on Windows too, just feel free to follow along. If not, there might be slight differences as far as the terminal commands are concerned, but not anymore later, when we start working on the actual project. To make sure, just check out the documentation if you work on Linux or macOS.

This is not a post about virtual environments, but, very briefly, on Windows you need to install virtualenvwrapper-win. To do that, just type the following in the terminal:

py -3 -m pip install virtualenvwrapper-win

Now we’re ready to create the environment. Let’s name it portfolio:

mkvirtualenv portfolio

This is what it looks like in the terminal:

To the left of the path, you can see the word base in parentheses. This means, we’re in the global environment now. When we hit Enter, the new environment will be created and we should automatically switch to it. But the next time you work on the project, you’ll start in the global environment again, so it’s important to remember to switch to the newly-created environment each time before you start work. You can do it by typing the following command in the terminal:

workon portfolio

You can easily tell you’re in the right environment because its name is visible before the path in parentheses, as we’re about to see.

Installing Django

Now we’re ready to install Django. Here’s the command you usually use on Windows:

py -3 -m pip install django

Make sure you’re inside the portfolio environment before you hit Enter:

This should install the current version of the package in your virtual environment. Let’s check out which version is the current one at the time of writing:

Turns out it’s version 5.1.1 and almost certainly it’s going to be a different version at the time you read this article.

The Project Folder

Next, let’s create a folder for our project. Find a location on your disk that best suits you and create a folder there. Next, go into that folder in the terminal using the cd command. For example, I created the folder on drive D: inside the Projects folder. To navigate there, I typed the following commands after the command prompt:

d:
cd Projects\portfolio_django

Now I’m inside the project folder, which I named portfolio_django:

If you named your project folder differently, take it into account in the command above.

We now have all the tools we need. Let’s now actually create the project there. To do that, type the following in the terminal:

django-admin startproject portfolio

And next, navigate to that folder:

The application has been created and we can view it in the browser because by default it contains some boilerplate content. To test the installation, use the following command:

py -3 manage.py runserver

The local server is now running and you can see the address where you can test the app:

Don’t worry about the unapplied migrations message for now, we’re going to handle it later. Now you can open your browser and navigate to this address (you can alternatively enter localhost:8000):

If you see something like this, it means the installation was successful. To stop the server, hit Ctrl + C in the terminal.

In the next part of the series we’ll create a basic structure of the application, its skeleton.