Forem: Douglas Cueva

From QA to Full-Stack: Building a Decoupled Django/React App for the AroAce Community

Douglas Cueva — Wed, 03 Dec 2025 05:29:48 +0000

Today is December 2nd, 2025.

I'm embarking on a personal journey of self-discovery. Project Purple is an effort to create a nice social forum that hearkens back to websites like Xanga, LiveJournal, and Myspace, for the asexual and aromantic community.

This project will require a lot of the skills I've developed over the past few years as a Software QA Engineer, along with the technical knowledge I have on Software Develop. It will also challenge me to create a front-end application using a modern library like React, instead of just templates.

I began the Purple Project by outlining what I want the website to process from a data perspective. I've established that, for now, I'd like to get the basics worked out before growing with additional features. I created three models:

Profile
Post
Comment

These models contain the basic information I'd like to elaborate on as I create the site.

One of the things that I've had to learn is how Django Rest Framework works. I quickly learned that there's a difference between how regular Django and the DRF work. I find the DRF to be slightly quicker because you can make all your models under the api folder, instead of having to create a new project/app with Django.

It's been great revisiting Django after all these years. Their documentation remains undefeated.

I found their documentation on the fields for their models very helpful

While I've spent a lot of time creating automation libraries using languages like Java, and reviewing code for things like Spring and Spring-Boot, there's something very primal about Django. I've always loved the batteries included philosophy behind it.

Below is an example of the different fields I've established for the Profile model to have. I've included things like background_color because the plan is to allow users to have some form of customization to their website, like Myspace or Xanga back in the day.

class Profile(models.Model):
    user = models.OneToOneField(settings.AUTH_USER_MODEL,
                                 on_delete=models.CASCADE)

    sexual_orientation = models.CharField(max_length=50, blank=True, null=True)
    aro_spec_identity = models.CharField(max_length=50, blank=True, null=True)
    ace_spec_identity = models.CharField(max_length=50, blank=True, null=True)
    pronouns = models.CharField(max_length=20, blank=True, null=True)
    relationship_style = models.CharField(max_length=50, blank=True, null=True)

    background_color = models.CharField(max_length=7, default='#FFFFFF')
    accent_color = models.CharField(max_length=7, default='#000000')
    identity_block_text = models.TextField(blank=True)

    bio = models.TextField()
    birthdate = models.DateField(null=True, blank=True)

Final Thoughts

I'm proud of my progress so far. I feel like I've done a lot today, but as the days go on, I'm sure my progress will be slower due to the amount of other areas of DRF I'll have to spend to pouring over in their documentation.

I plan to spend a lot of time in the backend, and even more time in the frontend. I have little to know experience with React, but have had a rotation of Youtube videos playing in the background. I understand why it's such an appealing library.

I'll keep updating these logs every time with progress, problems, and frustrations, until this project sees a beta release in about 6 months time.

Here's the Github for the project

Continuing with Django 4.0

Douglas Cueva — Thu, 26 May 2022 15:03:01 +0000

If you've completed the first part of this tutorial series you'll have learned how to get a Django project up and running.

In this next part, I'll be showing you how to wire up a Django app so you can produce the words "Hello, World!" on your web browser. In that journey, you'll get to see a little bit of Django's ecosystem.

I can't stress this enough, Django takes some time to get used to, but it's worth it. Much of its architecture is built to facilitate rapid deployment of a web application.

Projects versus Apps

In the previous tutorial, Django created a project for you called "hello_world". If you navigate into this folder, you will see many Python files that are used to configure different aspects of a project.

A note about Projects and Apps in the Django ecosystem.

Apps are components that can use the configuration of a Project.

Apps are separate from Projects, but the former refers to the latter when needed.

A Django app, for example, could have the functionality of a blog, forum, or wiki, while the project handles the way it is served up via a URL.

Django really embraces the design philosophy of separation of concerns.

Creating an app

Before creating an app, make sure that your virtual environment is activated by running the following command:

pipenv shell

You will know it's activated if the name of the directory, hello-world-project, appears in parenthesis in your terminal.

Make sure you're in the directory where you can see the manage.py file.

Once there, run the following command to create a Django app:

python3 manage.py startapp greet

The terminal will take a couple seconds before it returns control to you, but once done, if you type in the command ls to list the directories, there should be a new folder called greet. This is your Django app.

Configuring an app

If you haven't done so already, cd into the greet directory. There should be a list of various Python files. This should look similar if you took a peak into the hello_world project folder.

Below is a rundown about what each file does.

File	Description
apps.py	conrols settings specific to the app
models.py	database functionality
admin.py	defines an admin interface related to the app
urls.py	provides url routing
views.py	logic and control flow for handling requests
test.py	used for writing unit tests
migrations folder	Django uses this for database migrations

As you can see, Django is perfect for implementing websites that make use of the MVC architecture (Model View Controller).

To configure the greet app, you'll begin by defining the View for the project.

Views

What's a View? Well, it basically handles HTTP requests and responses.

In Django this functionality is left to the views.py file. Open that file with your favorite text editor (I use Vim because it makes me feel like a ninja), and type the following:

from django.shortcuts import render
from django.views.generic import TemplateView

# Create your views here.

class HomePageView(TemplateView):

   template_name = "home.html"

Here's a quick summary of what you've written.

The first import, render, is something that Django provides for you. The next import is the TemplateView class, which is needed to render a template from the templates directory that you will make in the next few steps.

Next, you instantiated the TemplateView class, as a HomePageView class, and provided the template name "home.html".

The home.html still hasn't been created yet.

Urls

The next step to properly configure your greet app is to create the url pattern that the hello_world project will need to use the home.html file you'll create in the next few steps.

To do so, you'll have to manually create the urls.py file. To do this, you can run the following command on your terminal:

touch urls.py

This should create an empty Python file called urls.py. Now, open that file and type the following:

from django.urls import path

from .views import HomePageView



urlpatterns = [

    path('', HomePageView.as_view(), name="home"),

        ]

A few things to note here

the first argument is a regex pattern to be used that will link to this page
the second argument is our class based view created in the views.py
the third argument is optional and we're giving it the shortcut name home so we can easily refer to it when using Django templates

Alright, you've made it this far. It's time to move onto the hello_world project, where you'll be connecting the configurations you've made to the greet app.

Configuring a project

Configuring a Django project can be confusing. Things change. I remember a few years ago when you had to use the Python os module in Django to find the templates directory.

In Django 4.X that isn't necessary and that's primarily why I created this tutorial series: to have a reference, out in the wild, on how to configure a templates folder.

Project urls.py

To begin configuring the hello_world project, create a gateway to your recently created urls.py file in you greet app.

Navigate to your hello_world project folder and open the urls.py file in your favorite text editor (again, I use Vim because it makes me feel great).

There's a lot going on in this file. You can spend time reading up on it later. For now, type the following into the file.

from django.contrib import admin

from django.urls import path, include



urlpatterns = [

    path('admin/', admin.site.urls),

    path('', include('greet.urls'))

]

A few things to take note here:

first argument uses regex (regular expressions) to find the URL
include method allows for your urls.py within your story app to be wired up and used.
greet.urls is basically this: greet (folder) -> urls.py (file)

Understanding how the project links to your app is important. If you need to go back, do so; you'll have less migraines later.

Settings.py

This is the nucleus of your Django project. Everything needs to be declared here.

When you open this file for the first time, you will be overwhelmed with the amount of configuration that can be done. Again, you can read up on what can be done here at the Django Project's website.

What are you going to be doing here?

First, you're going to add the greet app to the list of applications Django uses.

Last, you'll be configuring the path for the templates folder that you will create later.

Begin by adding the following line, greet.apps.GreetConfig under INSTALLED_APPS

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',



    'greet.apps.GreetConfig',

]

What is this? This is a call to a file in your greet app folder called apps.py. In that file you'll see there's a class called GreetConfig, that's instantiating AppConfig from django.apps.

Next, under TEMPLATES, establish the path the templates directory under 'DIRS'.

TEMPLATES = [

    {   

        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        'DIRS': [BASE_DIR / 'templates'],

        'APP_DIRS': True,

        'OPTIONS': {

            'context_processors': [

                'django.template.context_processors.debug',

                'django.template.context_processors.request',               

                'django.contrib.auth.context_processors.auth',              

                'django.contrib.messages.context_processors.messages',  

            ],

        },

    },

]

You're almost done!

What did you just write? BASE_DIR / 'templates'

This is telling Django to look for a folder called templates in the area where your manage.py file is. There is much debate on where to create your templates folder, but I've gone with the single-project level approach to make things easy.

Templates

The templates folder will hold your HTML files.

To properly create this folder, make sure you're at the directory level where you can see the manage.py file. Then, type the following into your terminal:

mkdir templates 
touch templates/home.html

Next, navigate into the templates folder, and open the home.html file in your favorite text editor (I use Vim because it makes me feel productive).

Type the following into the home.html file.

<p>Hello, world!</p>

Save your changes and head back to the directory level where the manage.py file is.

Hello, world!

You've made it this far. Give yourself a pat on the back.

Before producing the words "Hello, world!" on your browser, there's something that needs to be done first.

Remember the 18 migrations that needed to be done when you first created this app? Well, you're going to run a migration to eliminate that warning from appearing.

Make sure you're in the directory level where the manage.py file is and run the following in your terminal.

`python3 manage.py migrate

Next, type the following:

python3 manage.py makemigrations

Your terminal should say that there are no changes detected.

And finally, type this into your terminal:

python3 manage.py runserver

Navigate to your local server at http://127.0.0.1:8000

Felicitaciones! Congrats!

Your browser should say "Hello, world!"

Conclusion

You've gone through the various steps of configuring a Django app and a Django project. You also made a templates folder, and an html file, to produce the words "Hello, world!" on your local server.

What's next?

There's much this tutorial didn't cover, like models. There's also much to write about how to use templates.

You can also read more about Django on their website

Why not give William Vincent's blog a read? He goes more in depth with Django, and is an authoritative voice in the community.

One of my favorite things to do is to check out the latest Awesome Django projects

Starting with Django 4.0

Douglas Cueva — Mon, 23 May 2022 17:38:38 +0000

Starting with Django 4.0

Django can be intimidating for first timers. Trust me, I know this because I've spent a lot of time trying to learn it as best as I can by reading books. Thankfully, I know enough to help you get started.

This first tutorial will deal with getting Django set up, along with a virtual environment. Part two this tutorial series will configure Django to create a "Hello, world!" message.

Django is available for most systems, but this tutorial was written on a Mac. Regardless of this, the initial steps to get started with Django are the same:

1) Set up a virtual environment (this tutorial uses pipenv)
2) Activate the virtual environment
3) Install Django
4) Run Django for the first time

This tutorial is made for beginners. Anybody with intermediate experience with Django will find this boring.

Virtual Environment

Always use a virtual environment like pipenv whenever you're beginning a Django project. This helps isolating an environment in case you have a specific version of Django (or other Python module) you want to use.

Establish a folder for this tutorial. I've called mine hello-world-project. Navigate to that folder and run the following in your command line:

pip install --user pipenv

This will install pipenv if you don't have it.

After your terminal shows you the installation is done run the following command in order to activate the shell.

pipenv shell

Your terminal should display the name of the directory you're in within parenthesis. This means that you've successfully activated the virtual environment.

To exit at any moment, type the word exit.

Next, install Django using pipenv.

pipenv install django

Once the terminal's indicated that you've successfully installed Django!

Django Runserver

The next step in this process is to create a Django project called hello-world and then run it on the local server.

Back in the terminal, type the following:

django-admin startproject hello_world .

Notice the period after "hello_world". It's important to include this.

The terminal should quickly go back to your control. Type in the shell command ls and there should be a hello_world directory containing your recently created Django project, a file called manage.py, and then the Pipfiles that contain the information on your virtual environment.

This tutorial won't go in depth about what this just yet. If you're curious about what all this is the Django Foundation goes into this in depth. In later tutorials I will provide summaries of how Django project is structured but for now just follow along.

Alright, I'm a big believer in small victories to reinforce learning, and luckily, Django provides just that. Run the following command in your terminal:

python3 manage.py runserver

Ignore the 18 migrations message for the moment. Those will be dealt with in the second tutorial.

You should see a prompt that says that there's a development server at: http://127.0.0.1:8000

Navigate to that and Django's greeting page should appear for you.

Success! If you've made it this far then you can rest assured that Django works properly.

Part two of this tutorial will expand on this foundation and create a basic "Hello, world!" html page to appear.

Starting out with Vim

Douglas Cueva — Tue, 01 Jun 2021 02:49:04 +0000

Vim

Probably one of the most notorious text editors is Vim. As someone that's used to text editors like VS Code, Vim presents the opportunity to feel like a ninja when editing code.

If you're not familiar with Vim, the text editor, but have heard about it, then this is the post for you.

Over the past week, I've taken a LinkedIn course about Vim and have begun using it in my projects and have found it to be enjoyable, so, I'd like to share what I've learned.

This tutorial will get you started slowly, so as not to scare you away from this text editor.

There is a lot to learn, and a lot of Vim is memorizing commands so you can do what you want, but I believe that easing into things and finding a real-world use to apply what you've learned is most helpful.

So, by the end of this post you will have:

Edited and saved a text file using Vim.
Quit Vim

Vim's Philosophy

I would sum up Vim's philosophy like this: the text editor at your fingertips.

Assumptions

This tutorial assumes you have some proficiency with the command line, shell, or terminal.

I also assume you've downloaded and installed Vim. Check out Vim's website for how to install it on your operating system.

For this tutorial, I'm using the Fish shell command line, but this should work with zsh, bash.

My computer is running macOS Big Sur 11.4

Normal Mode and Insert Mode

Since Vim is an editor that opens up within your bash terminal, you might be wondering how viewing a file versus editing one work. Well, Vim has various modes that let you switch between viewing a file and editing one.

To demonstrate, create a file in an empty folder (that way it's easy to locate in your terminal), called text.txt.

You can create this file the old fashion way, if you'd like, by right-clicking and select "New File", or using the touch command on your terminal. There is a way to create any file and automatically open it with Vim from the command line, but I will go over that in another tutorial.

Now, you'll want to open up your command line, or terminal, and change into this folder you created. I've named mine Vim, and it's on my desktop.

Within the Vim directory you'll see the newly created text.txt file, which is an empty text file.

Alright, we're going to open this text file using Vim. To do so, type the following command.


vim text.txt

You'll be dropped into the Vim text editor within seconds.

You've done it. You've begun using Vim!

Since this file is empty, you won't see anything, but most of the time you'll be working with files that have content. We'll be adding our content here, but only do so much as to get you comfortable with using Vim.

Now, when Vim opens up a file, it opens it in View mode. In View mode, you can navigate a file, use regex to find certain words, and many other things.

Since we don't have much in this file, we're going to add content so we can learn some basic navigation skills with Vim.

Let's get out of view mode and go into insert mode.

In insert mode you can delete words, add words, and more.

We're going to add some words to this document. To do this, press the letter "i" on your keyboard.

If you notice on the bottom left, the word "insert" appears in all caps. This means you're in insert mode.

Go ahead and type something.

I wrote the following in my text file:

Hola, mi nombre es Douglas
y a mi me gustan las pupusas.

Saving a file with :w

Now we want to save this file. Let's exit insert mode and go back into view mode where we can save the file. To do this press the escape key on the top left of your keyboard, or ctrl + c if you don't have an escape key.

The bottom left of your screen shouldn't say insert anymore. It should be empty. This is how you know you're in View mode.

Now we can save the file. Type the following command and then press enter:

:w

This command saves the file (or 'writes' it). There are similar commands that will close out a file after you've saved it (:wq) but for our purposes this command is enough.

Now would be a good time to navigate your file. Since we're in View mode we can easily do this by pressing the h key, which moves you to your left.

If you have two lines of text, as I do, you can move up with the j key. Move back down with the k key, and then move right with the l key. Try it out.

You can point and click to get to where you want, but the point of Vim is to avoid the mouse and use what's directly available at your fingertips. There's a great website that helps you get used to moving around with Vim called Vim Adventure.

Quitting Vim with :q

We've done enough with this file and we want to exit the file and the Vim editor.

To do so, we must remain in View mode and enter a command similar to saving this file.

Go ahead and type the following command and press enter:

:q

Congratulations, you've exited Vim!

If you haven't seen the funny memes about trying to exit Vim you can do so now with the assurance that you know how to exit Vim.

Conclusion

Getting to know Vim and being comfortable with it takes time so, start small.

I've used it while learning Hugo, the static website generator, editing the configuration files and markdown files.

I haven't used it for large projects yet because I want the basics to feel natural, but my knowledge is compounding because I need more from it.

I hope this tutorial inspires you to check it out and know a little bit about it.

Recommendations

If you want more, check out the book Mastering Vim Quickly.

I also recommend the website Vim Adventures.

I enjoy reading the wiki page of anything existence, and you can find Vim's wiki page here.

Lastly, check out their website to see what they're all about and the cool charity work they do.