Recently, I embarked on building a Splitwise-like expense-splitting app using React Native and Expo. This wasn't just another side project—it was my first proper dive into this tech stack, with React Native for mobile development and Golang powering the backend.

From the start, I had one clear goal: avoid third-party dependencies wherever possible. No BaaS solutions like Supabase, Appwrite, or Firebase. I wanted to build everything myself to truly understand the underlying technologies.

This philosophy led me down some interesting rabbit holes. I even implemented native Google Login without relying on any auth provider service—quite challenging since Expo's official Documentation's free solution was being deprecated, and the new approach was locked behind a SaaS paywall. But I persevered and found a way to make it work using a package that used the native credential manager APIs and worked great.

The Notification Wall

Then came the next feature: push notifications.

A quick Google search seemed to confirm what every developer "knows"—Firebase Cloud Messaging (FCM) is the solution for mobile notifications. FCM appeared to be the only viable option.

Reluctantly, I integrated FCM into both my app and backend. It worked.

The F-Droid Reality Check

Everything changed when I decided to release my app on F-Droid—the open-source Android app marketplace.

That's when I discovered F-Droid's strict policy: apps must be completely open source and cannot depend on any proprietary services. My FCM integration meant I will not be able to release my app on F-Droid.

But this sparked a crucial question: If other apps on F-Droid support notifications, there must be alternatives to FCM, right?

Down the Rabbit Hole: Discovering UnifiedPush

This question sent me deep into research mode. And that's when I stumbled upon something revolutionary: UnifiedPush.

UnifiedPush is a decentralized push notification system that lets you choose the service you want to use. It's designed to be privacy-friendly, flexible, and open—making it perfect if you want control over your push notifications.

Instead of forcing all notifications through a single company's servers (like FCM), UnifiedPush lets users choose their notification provider. This was a paradigm shift I hadn't considered.

Understanding the Foundation: WebPush and VAPID

To truly grasp UnifiedPush, I needed to understand how notifications actually work. This led me to discover the open standards that power web notifications:

WebPush Protocol

This is a W3C standard that defines how push notifications work on the web. It's the foundation that browsers use for notifications.
WebPush is defined by 3 standards: for the transport (RFC8030), for the authorization (VAPID, RFC8292), for the encryption (RFC8291)

VAPID (Voluntary Application Server Identification)

Think of this as a way for your server to prove its identity when sending notifications. Instead of using proprietary API keys tied to specific services, you generate your own cryptographic key pair:

• Public key: Identifies your app

• Private key: Signs your messages

What's beautiful about this approach is that it's service-agnostic. The same VAPID keys and WebPush messages work whether the user chooses Google's servers, a self-hosted solution, or anything in between.

Privacy by Design: Here's a crucial security feature that sets webpush apart—encryption. When your server sends a notification, the message is encrypted using the user webpush keys. This means:

• ✅ Only your app can decrypt the notification content

• ✅ Distributors (ntfy, NextPush, etc.) cannot read your messages

• ✅ Even if using FCM as a distributor, Google cannot see your data

• ✅ True privacy regardless of which distributor the user chooses

This is fundamentally different from traditional FCM, where Google's servers can potentially access all notification content. With UnifiedPush's VAPID encryption, the distributor is just a secure messenger—they can deliver your encrypted package, but they can't open it.

The Mobile Connection

Here's the key insight: mobile devices can receive WebPush notifications too. The same standards that power web notifications work on mobile platforms.

How UnifiedPush Works

UnifiedPush elegantly bridges the gap between open standards and mobile notifications:

The Flow

Step 1: App Sends Notification
Your server sends a WebPush message to the user's chosen distributor

Step 2: Distributor Delivers Notification  
The distributor receives the message and forwards it to your app

Step 3: Device Receives Notification
Your app wakes up and processes the data, showing a notification to the user

What Are Distributors?

Distributors (or Notification Providers) are apps that run in the background and handle notification delivery. Users can choose from various options:

• ntfy: Self-hosted, maximum privacy

• Sunup: Uses Mozilla's Push Servers

• gCompat-UP: Uses Google's infrastructure as a fallback

• Custom solutions: Roll your own

The Elegant Solution: Embedded Distributors

Now, you might be thinking: "This sounds great, but requiring users to install another app seems like a UX nightmare. Users will have to install another app"

Here's where UnifiedPush gets really clever: embedded distributor modules.

How It Works

UnifiedPush provides an embedded distributor that your app can use internally. When using this embedded module:

1. Your app registers for notifications directly with FCM endpoints

2. No Firebase project or configuration required

3. No Firebase libraries needed

4. FCM natively supports WebPush and VAPID standards

This means you can send notifications to your app using direct FCM endpoints without any Firebase setup—just pure WebPush with VAPID authentication.

The Best of Both Worlds

My implementation strategy became clear:

1. Check if user has any external distributors installed
2. If yes → Give them the option to choose their preferred distributor  
3. If no → Use the embedded distributor seamlessly

This approach provides:

• Zero UX friction for mainstream users

• Full choice and privacy for power users

• F-Droid compatibility

The Implementation Reality

Server-Side Changes

The backend migration was surprisingly straightforward. I simply replaced the Firebase library with a standard web-push library. Instead of dealing with Firebase service accounts and complex authentication, I just needed:

1. Generate VAPID key pairs

2. Use WebPush protocol for sending notifications

3. Handle subscription management

Mobile App Integration

On the React Native side, replacing FCM with UnifiedPush was not exactly smooth for me. The expo-unified-push library provided a cleaner API than Firebase's implementation, with better debugging capabilities and more predictable behavior.

The Debugging Nightmare (And Its Embarrassingly Simple Solution)

However, I hit a frustrating wall.

The Problem: Notifications worked perfectly when my app was in the foreground, but completely failed when the app was closed or in the background. This is obviously a deal-breaker for any notification system.

My Desperate Debugging Journey:

• Spent countless hours debugging the UnifiedPush library source code

• Tried different distributors, thinking it was distributor-specific

• Even forked the expo-unified-push repository and made custom modifications

• Used my own version of the library as the npm package instead

• Tested various permission configurations and background processing settings

Me debugging for hours

The False Victory: My forked version seemed to work initially, which made me think I'd solved some complex architectural issue. I was ready to write a detailed post about the "fixes" needed for background notifications.

The Humbling Reality: The next day, after seeing the developer's comments, I discovered the real culprit. It wasn't the library, the distributors, or any complex background processing limitation.

The actual issue: The notification id field format.

I had been either:

• Omitting the id field entirely, or

• Using hexadecimal IDs (like MongoDB ObjectIds or UUIDs)

The solution: Unified push library requires notification IDs to be numeric only.

Me realizing the bug was just using wrong ID format

The Lesson: Sometimes the most frustrating bugs have the simplest solutions. What felt like a fundamental architectural problem was actually a basic data format requirement that I'd overlooked.

The Community That Made All the Difference

Throughout this debugging nightmare, I wasn't struggling alone. The UnifiedPush community on Matrix was incredibly supportive and patient with my questions.

Even when I was going down the wrong path with my forked library approach, the community helped me think through the problem systematically. They suggested checking payload formats, testing with different distributors, and reviewing the notification ID requirements—which ultimately led me to discover the numeric ID issue.

The human side of open source: This experience reminded me why I love open source communities. Instead of being stuck with corporate support tickets or waiting for Stack Overflow responses, I had direct access to the people building and maintaining the tools I was using. They were invested in my success because my success meant UnifiedPush was working for more developers.

The Results: Better Than Expected

User Experience Wins

• Mainstream users: Zero change in experience—notifications "just work"

• Privacy-conscious users: Full control over notification routing

• Degoogled device users: Finally have access to full app functionality

The iOS Reality: Apple's Walled Garden

Now, let's address the elephant in the room: iOS.

Apple's ecosystem presents unique challenges for alternative notification systems. Unlike Android, where users can install alternative app stores and modify system behavior, iOS maintains strict control over push notifications through APNs (Apple Push Notification service).

The Current iOS Situation:

• All iOS notifications must go through Apple's APNs servers

• No alternative notification distributors allowed

• Users cannot choose their notification provider

• Apps distributed outside the App Store (sideloaded) still require APNs for notifications

Apple being apple, they have won't allow any third-party notification systems to replace APNs. They won't wanna give up control over notifications, which is a shame because it limits user choice and privacy.

What's Next?

I will soon be releasing my app on F-Droid (Hopefully)

But more importantly, I've discovered an entire ecosystem of developers building user-centric, privacy-respecting technology. The UnifiedPush community is growing rapidly, with major apps like Element, Tusky, and FluffyChat all adopting this approach.

For Fellow Developers

If you're building mobile apps and care about user privacy, open standards, or F-Droid compatibility, I highly recommend exploring UnifiedPush. The implementation is often simpler than traditional solutions, and your users will appreciate having real choice in how their data flows.

The future of mobile notifications doesn't have to be controlled by Big Tech. We can build something better—something that puts users first.

Resources

https://unifiedpush.org/news/20250131_push_for_decentralized/
https://unifiedpush.org/
https://developer.chrome.com/blog/web-push-interop-wins

Want to follow my journey building privacy-first mobile apps? Connect with me or check out my other projects!

What is RAG??

When we normally run a query in any LLM, it processes it and gives response according to the data it has been trained on. But what if the query asked something it has not been trained on? That’s where RAG comes in. Retrieval-Augmented Generation (RAG) basically allows us to provide the missing context to the query so that the LLM can respond more accurately. The query is first sent to a knowledge retriever that can retrieve the relevant context/information. After that, the context from the relevant information is added to the query and then the query is sent to the LLM.

So how exactly are we going to build a Knowledge retrieval?? For that we would be storing the data in Vector format. Vector embeddings are numerical representations of data, including text or images, in a multi-dimensional space. Similar items are grouped closer together, allowing us to search semantically. For example, images with similar descriptions would have embeddings close to one another, enabling semantic search.

Let’s Build an Image-Based RAG

1. Uploading and Storing the Image

We begin by uploading an image and storing it in Supabase Storage. Using the following code, we handle the image upload and return a publicly accessible URL.

def upload_image(image, name, img_type):
    temp = BytesIO()
    image.save(temp, format='PNG')
    res = supabase.storage.from_("images").upload(file=temp.getvalue(), path=f"{name}", file_options={"content-type": img_type})
    url = supabase.storage.from_('images').get_public_url(name)
    return url

2. Generating an Image Description

Next, we use Azure OpenAI’s powerful LLM to generate a description for the image. I am using Azure OpenAI, however you can use any multimodal llm.

Here’s the code for generating that description:

def generate_image_description(url):
    headers = {"Content-Type": "application/json", "api-key": os.getenv("AZURE_OPENAI_API_KEY")}
    payload = {"messages": [{"role": "system", "content": "You are a helpful assistant."}, {"role": "user", "content": [{"type": "text", "content": "Generate a description for this image:"}, {"type": "image_url", "image_url": {"url": url}}]}]}
    response = requests.post(ENDPOINT, headers=headers, json=payload)
    return response.json()["choices"][0]["message"]["content"]

This provides a meaningful textual description of the image, which we use in the next step.

3. Creating Embeddings

With the description ready, we convert it into vector embeddings using Azure OpenAI. These embeddings are crucial for enabling search functionality:

def generate_embeddings(description):
    headers = {"Content-Type": "application/json", "api-key": os.getenv("AZURE_OPENAI_API_KEY")}
    payload = {"input": description, "model": "text-embedding-3-small"}
    response = requests.post(ENDPOINT, headers=headers, json=payload)
    return response.json()["data"][0]["embedding"]

This code transforms the image description into a vector embedding, making it searchable.

4. Saving the Embedding

We store these embeddings in Supabase Vector, allowing us to efficiently search through them later.

To use vectors, you need to enable that in Supabase. For that, go to your supabase dashboard and select your database. Then click on extensions and finally search and enable the vector extension.

def save_embedding(name, embedding, url):
    embeddings = vx.get_or_create_collection(name="docs", dimension=1536)
    vectors = [(name, embedding, {"url": url})]
    embeddings.upsert(vectors)

The whole upload workflow will be like the following:

5. Querying the Images

When users query an image, we generate a vector embedding for their query and use it to search through the stored embeddings to find the most relevant match:

def query_images(query):
    embeddings = generate_embeddings(query)
    docs = vx.get_collection(name="docs")
    results = docs.query(embeddings, limit=1, include_metadata=True)
    return results[0][1]["url"]

The vector search identifies the most similar image based on its embeddings, and the corresponding URL is returned.

And the whole query workflow will be like the following:

Adding a Simple UI with Streamlit

Now that we’ve built the backend logic for our RAG system using Supabase and Azure OpenAI, it’s time to add a user-friendly interface. I used streamlit since it allows me to quickly build a clean UI using very little python code. It has a lot of prebuilt components that we can use directly.

You can find the whole code on my GitHub repository: https://github.com/notnotrachit/Sample-Rag

Conclusion

By using Supabase Vector and Azure OpenAI, we can build a RAG system that efficiently retrieves relevant data (images in our case) and augments the language model’s responses. This approach not only improves the quality of the generated content but also addresses one of the major limitations of LLMs—hallucination.

Git Repo: https://github.com/notnotrachit/Sample-Rag

I also gave a talk on this topic recently at the Supabase LW12 Noida Meetup, so you can also check out the slides for your reference: Slides Link

Prerequisites

• Azure account

If you don’t have an azure account yet, no issues, you can signup for free and get 200USD credits for the first month here .

If you are a student and don’t have a credit card, no worries. You can sign up for Azure for Students and get $100 credit for free using your student email ID here. (Can be renewed annually as long as you are a student)

• Hosted database

If you have a web app on Django that is dependent on a database, make sure it is using a hosted database instead of the default SQLite database. The hosted database can be anywhere, be it Azure itself, or you can use neon.tech as well.

• A django project ofcourse (😆)

For this blog, I will be using my demo app, which is in this repository: https://github.com/notnotrachit/django_todolist_demo_sample

Keep in mind that my sample app is not dependent on any database, its just using the client’s localstorage, if your app is dependent on the database then it is highly recommended to first add a hosted database and configure it accordingly. You can refer to django’s docs for the same: https://docs.djangoproject.com/en/5.0/ref/databases

If you are still facing issues, kindly let me know, I will make another blog regarding the same.

Lets Deploy

1) Make a GitHub repository

Make sure you make a GitHub repository and make sure you push all your code to that repository. The repository can be public or private.

2) Head over to Azure Portal

Go to the azure portal’s home page at: https://portal.azure.com/#home

You might see a different kind of homepage. Since I already have many things deployed, it shows up differently for me, but don’t worry—the process remains the same.

3) Creating an App Service

We will be deploying our webapp using Azure App Service. Azure App service is a really amazing service that we can use to very easily deploy our webapps to the cloud without worrying or configuring any infrastructure. It handles that automatically.

To create a service, search for 'App Service' in the top search bar and click on it.

You might see an empty list.

Now you need to click on Create and then select Web App

After that a long form type page will open up.

The first field is for the subscription. It will most likely be prefilled. If not, select your subscription from the dropdown.

Next is the resource group. You can leave it for now; it will be automatically created once we assign a name.

Now, we need to set a name for our web app. This name needs to be globally unique. In publish option, leave code as selected.

In the Runtime Stack, select Python 3.10 or higher Next you can select the region or leave it at the default as well.

Next, you will see under Pricing plan that a new Linux plan has already been created for you. You can now select the pricing plan according to your needs. I am selecting Basic B1 for now.

Your final page will look something like this:

Now we need to go to the deployment tab.

Here you first need to enable Continuous deployment. After enabling that, you need to Authorize your GitHub account by logging into your account.

Once you authorize that, you need to select the repository and branch.

Now click on Review + create . You will be taken to the final page where you can review everything. Finally, you can click on Create now.

Now it will takes few minutes to deploy your application on the cloud.

After the deployment has been done, you will see a page like this:

Now click on Go to resource . It will take few seconds to load. After all data has been loaded, you will be able to see the domain.

You can try visiting it, but you will be greeted with an error. Don’t worry, we will solve that as well.

The error is mainly because we haven’t really allowed our application to run on this domain. To allow that, we would need to add this domain in our settings file.

4) Making Required Changes

We will now go to our editor and open the settings.py file. Find ALLOWED_HOSTS in that file. By default, it will be an empty list. Or in some cases there might be previously added domains as well. Don’t worry. Now, we need to add our domain in that list.

Kinda like this: ALLOWED_HOSTS = ["rachit-todo.azurewebsites.net"] But make sure you enter your webapp’s domain.

Once done, save the file and commit it. Then once you push the commit to GitHub, Azure will automatically start deploying the webapp again. It will take few minutes to deploy.

Congratulations 🎉, You have succesfully deployed your Django Web App to Azure. 🎉

Give yourself a pat on the back

I hope you find this blog helpful. Feel free to write any doubts in the comments.

1) Zoxide (z)

So you might be wondering what exactly is zoxide ? According to the developer, its “A smarter cd command”.

Lemme explain it with example, so for example you want to go to a project directory named webapp1234 , and its inside a GitHub directory in the Documents directory.

So with cd, you either need to use the following commands:

cd Documents/
cd Github/
cd webapp1234/

or you can use the following command:

cd Documents/GitHub/webapp1234/

but with zoxide, you can do this with a simple simple command:

z webapp1234

and you will be in the webapp directory.
Isn’t this cool?

You can check it out at: https://github.com/ajeetdsouza/zoxide

2) Wakapi

Many of you may be programmers and spend a lot of your time programming and making projects. However, we often don’t know how much time have we actually spent on a particular project or on a particular day. That’s why tracking time while coding is important.

For that, we can use wakapi. Wakapi is basically an open source implementation of Wakatime. Wakatime is a closed sourced solution and has paid plans that are quite expensive. So instead you can use Wakapi.

You can install it on your local system as a service that automatically runs when your system boots. Then you can use any Wakatime extension that is available for most Code Editors/IDEs. For complete client setup guide, refer to: https://github.com/muety/wakapi?tab=readme-ov-file#-client-setup

My dashboard of the last 6 months:

3) Ollama + OpenWebUI

In this world of AI, everyone uses chatgpt and various other online AI tools, however, that comes with its own limitations. Some are paid, or some have limited responses, some are slow while some are very limiting.

So that’s where ollama comes in. Ollama basically allows you to run open source models directly on your laptop.

Checkout ollama at: https://ollama.com/

Once you have ollama installed, you can install any open source model from the ollama library. You can checkout the library at: https://ollama.com/library

I would suggest you to download llama3 and phi3. These 2 are really capable models.

Now that we have the models, but currently we can only use them in the terminal, but we want to use it in the browser with a ChatGPT like interface, so thats where OpenWebUI comes in.

OpenWebUI

OpenWebUI is basically a web interface for ollama. It’s interface is very familiar and similar to ChatGPT.

Keep in mind that the speed of responses and performance depends upon your system specs and the model selected. If you have any GPU , then it will work decently, otherwise it will be quite slow.

4) Fish Shell

You probably might have used any terminal on Linux few times. By default, the default shell on most Distros is bash. However, there are many more shells other than bash as well. Fish Shell is one of them.

itsFOSS also published an amazing article a while back on Fish Shell, you can check it out at:

https://itsfoss.com/fish-shell-features/

In short, fish shell has some really amazing features like:

• Syntax highlighting

• Auto Suggestions

• Easier path navigation

• Interactive history search

and much more…

5) distrobox

There may have been many situations when you wanted to install a software but it wasn’t compatible with your distro, but worry not, you can use distrobox. It basically allows you to use any linux distribution inside your terminal.

You can check it out at: https://github.com/89luca89/distrobox

As you can see, my main host OS is fedora, however, I have install multiple OS in containers using distrobox.

So, these were the 5 tools that I thought might be incredibly useful for many people in their daily lives. Each of these tools offers unique features and functionalities that can significantly enhance productivity and efficiency. Whether it's leveraging the power of a language model, optimizing terminal usage with Fish Shell, or running different Linux distributions seamlessly with Distrobox, these tools are designed to make your tech experience smoother and more enjoyable.

If you have any more suggestions or know of other tools that can be beneficial, please feel free to drop a comment and let me know. I am always on the lookout for new and innovative tools that can improve our daily workflows. Your recommendations are highly appreciated, and I would love to explore and share them with the community. Let's keep the conversation going and help each other discover the best tools out there!

Introduction to Django databases

I am hoping everyone knows what a database is, but for those who don't know, it's a structured way we store our data.

Django supports many relational databases like SQLite, MySQL, Postgres etc.

By default, Django uses SQLite, but feel free to use any according to your preference/use case.

We will also be using SQLite in this blog.

To know more about how to use different databases, check out the following Django documentation: https://docs.djangoproject.com/en/4.2/ref/databases/

What are models?

Models are basically Python classes that represent a table in the database. Each attribute of the class represents a field in the database table. By defining a model, Django can automatically create the corresponding database table and handle database operations such as creating, updating, and deleting records.

Migrations

Migrations are the way Django stores changes to your models (and thus your database schema) - they’re just files on disk. Migrations are designed to be run as a sequence, and to avoid conflicts and mistakes during development, we create them every time we make changes to our models. We’ll cover how to generate and apply migrations in the next blog.

Set Up DB

By default, Django uses SQLite database, and hence we won’t change it for now. The first command that we need to run is :

python manage.py migrate

This command will create all the necessary tables in the database that Django uses to keep track of its own models. Once this command is run, you can create your own models and Django will automatically create the corresponding tables in the database.

After creating your models, you can use Django's Object-Relational Mapping (ORM) to interact with the database and perform various CRUD (Create, Read, Update, Delete) operations on the data.

Every time you change something in your model, you need to make the migrations again to make changes to the database tables.

For that, we can run the following commands to make migrations and apply changes to the db structure.

python manage.py makemigrations
python manage.py migrate

The first command makemigrations will create a new migration file in the migrations directory for every model that has changed. The second command migrate will apply those changes to the database. It's important to always run both commands in order to keep the database structure in sync with your models.

Django ORM

Django ORM stands for Object-Relational Mapping. It is a powerful feature that allows us to interact with our database like we're working with Python objects. With the ORM, we can create, retrieve, update, and delete objects from the database using simple Python code. This makes working with databases in Django much easier and faster than writing SQL queries manually.

Creating Models

In order to create models, we need to define a Python class that extends Django's Model class. Each attribute of the class represents a field in the database table. Django provides a variety of fields like CharField, IntegerField, DateField, DateTimeField, etc. that we can use to define our model's fields. We can also define relationships between models using fields like ForeignKey, ManyToManyField, and OneToOneField.

For eg. lets create a sample model for our triviaquiz app in /quiz/models.py file

from django.db import models

class TriviaQuestion(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')
    answer = models.CharField(max_length=200)
    option1 = models.CharField(max_length=200)
    option2 = models.CharField(max_length=200)
    option3 = models.CharField(max_length=200)
    option4 = models.CharField(max_length=200)

        def __str__(self):
        return self.question_text

In this model, we have created a simple model for defining the attributes we want in the TriviaQuestion model. Do note the different kinds on fields we are using.

Now to use this, we need to add this model to our database.

To add the newly created model to the database, we need to create a migration for it. We can do this by running the following command in the terminal:

python manage.py makemigrations

This will create a new migration file , which includes the changes we made to the TriviaQuestion model. Next, we apply the migration using the following command:

python manage.py migrate

This will create the triviaquestion table in the database. Now to easily edit the data, we will also add this model in the admin.py file.

For example, let's say we want to display the TriviaQuestion model in the admin interface. We can create a custom admin class for this model in our admin.py file:

from django.contrib import admin
from .models import TriviaQuestion

admin.site.register(TriviaQuestion)

This will display the question text and the date it was published in the admin interface for the TriviaQuestion model.

Django Admin

Django Admin is a feature that comes with Django that allows us to easily manage our database data using a web interface. It is automatically generated based on the models we define in our app. To use it, we need to create a superuser first. We can do this by running the following command in the terminal:

python manage.py createsuperuser

This will prompt us to enter a username, email, and password for the superuser. Once we have created a superuser, we can access the admin interface by going to localhost:8000/admin in our browser and logging in with the superuser credentials.

In the next blog, we will dive deeper into how to use Django ORM to interact with the database and perform CRUD operations on the data. We will also discuss how to create custom admin classes and how to use the Django Admin interface to manage our database data more efficiently.

Django templating is very powerful. It supports a large number of tags like if, for, cycle etc.

Basics:

We display the variables we passed using double curly brackets
Like this: {{ variable_name }}

And we use Django template tags using a pair of curly brackets & percent sign.
Like this: {% if age>18 %}Adult{% else %}Child{% endif %}

To use filters, we add a pipe symbol in front of the variable.
Like this: {{ name|length }}

Now we will have a look at the common template tags in Django

Template Tags

if tag

If tag is a pretty simple tag used to add a condition to the template content.
it supports almost all conditions we use in python. Like comparing values, checking membership etc. We can check if an element is in the list.
Do note that we also need to add an endif tag when we are done with the condition.
For eg.

    <body>
        <h1>Hello World!</h1>
        <p>My name is <strong>{{name}}</strong></p>
        {% if name|length < 5 %}
            <p>My name is short</p>
        {% elif name|length < 10 %}
            <p>My name is long</p>
        {% else %}
            <p>My name is very long</p>
        {% endif %}
        <p>My age is <strong>{{age}}</strong></p>
    </body>

for Tag

The "for" tag allows us to iterate over sequences, such as lists, dictionaries, or querysets, similar to looping in Python. By utilizing this tag, we can display and manipulate each item in the sequence.
For eg:

For this, I passed a basic list from the views.py file like this:

def hello(request):
    name="Rachit"
    age=19
    Interests=['Coding', 'Reading', 'Gaming']
    return render(request, 'hello.html', {'name':name, 'age':age, 'Interests':Interests})

and the template will contain:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <link rel="stylesheet" href="{% static 'style.css' %}">
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>My name is <strong>{{name}}</strong></p>
        <p>My age is <strong>{{age}}</strong></p>
        <p> Interests: </p>
        <ul>
            {% for interest in Interests %}
                <li>{{interest}}</li>
            {% endfor %}
        </ul>
    </body>
</html>

extends and block tag

These 2 tags are generally used together. If we want to create a base template & then put data or other HTML elements inside it using a different file, we use these tags.
First, we will add a block tag in the base file & then extend that base file to another file, & use the block tag to put more HTML elements in it.
For eg. I will create a new base.html file with the following content making use of the block tag.

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <link rel="stylesheet" href="{% static 'style.css' %}">
    </head>
    <body>
        <h1>Django Tutorial</h1>
        <p>Hi there! This is a Django tutorial.</p>
        {% block content %}
        {% endblock content %}
    </body>
</html>

Now, we will edit hello.html to extend this & place more content in the content block.

{% extends 'base.html' %}
{% block content %}
    <h1>Home</h1>
    <p> Welcome to the home page!</p>
{% endblock %}

This allows us to reuse templates & follow the DRY(Don't repeat yourself) principle.

include Tag

Now what if we need to add a simple component to the current file without extending the base file in that component file?
That's where the include tag comes in.
Using it is pretty straightforward. Let's add a header component to our base.html file
For that, we will create a new file with the header component. I am going to name it header.html and add a simple marquee to it.

<marquee>
Welcome to this django tutorial !
</marquee>

Now, to include it in base.html, we will use the include tag like this:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <link rel="stylesheet" href="{% static 'style.css' %}">
    </head>
    <body>
        {% include 'header.html' %}
        <h1>Django Tutorial</h1>
        <p>Hi there! This is a Django tutorial.</p>
        {% block content %}
        {% endblock content %}
    </body>
</html>

This also helps us in following in DRY principle.
These were the main tags we will use while building any web apps. Apart from this, there are a lot more template tags & filters in Django. To know more about them, I suggest reading the following Django docs: https://docs.djangoproject.com/en/4.2/ref/templates/builtins/

What are templates?

Templates are simply HTML files that we can render as a response to a URL/view.
Django templates offer a robust templating language with various built-in tags and filters that you can utilize to manipulate and display data in your HTML templates.
We will explore it in detail in the next blog

Setting up templates folder

Setting up a templates folder is quite easy. First, we will create a new folder in the base directory with the name templates.
Next, we need to tell Django that we will be using this folder for placing all our templates.

For that, we all navigate to our settings.py file. There is a list named TEMPLATES & it will have a JSON object with a field named DIRS that contain an empty list. We just need to add templates (the name of our folder) to it.
Finally, it should look something like this:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['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',
            ],
        },
    },
]

That is all we need to do to set up templates.
Now we will see how to use templates.

Rendering templates

Rendering a template means generating an HTML response that incorporates the dynamic data and logic defined in your views, which is then sent to the user's browser.

In the last blog, we saw how to write our views. So now, let's render an HTML template as a response to that view.
First, we will create a new HTML file in the templates directory with the name hello.html
You can then add any HTML page design you want.
I will go with a simple one.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>My name is <strong>Rachit Khurana</strong></p>
    </body>
</html>

Now, we will return this template when the user goes to the index page.
For that, we will navigate to views.py where we defined a hello function that gets called when the user goes to the index page.
We will then use render function from django.shortcuts to render this template.
The render function simplifies the process of rendering templates by handling the template loading and rendering process automatically. It takes the request, the template file path, and an optional context as arguments and returns an HTTP response with the rendered template.

The views.py code will look like this

from django.shortcuts import render, HttpResponse

# Create your views here.
def hello(request):
    return render(request, 'hello.html')

Now if we run the server & go to http://127.0.0.1:8000/, we will be able to see this as an HTML-rendered page. Awesome right?

However, do note that you won't be able to create CSS or JS files in the templates folder & use those in the HTML file.
This is because Django only takes the HTML file, & returns the rendered file directly. It doesn't take the CSS & JS files. To use separate CSS & JS files, we need to serve them as static files.
We will now see how to serve static files.

Static Files

Static files include CSS, JavaScript, images, and other files that remain constant for all users visiting your website. These files are served directly to the client's browser and contribute to the visual and interactive aspects of your web pages.

To set up static files, we will create a new folder named static.
Now we need to tell Django to use this folder for serving static files. For that, we will add the following line to the settings.py file:

STATICFILES_DIRS = [
    BASE_DIR / "static"
]

STATICFILES_DIRS is a list where you specify the directory paths where Django should look for static files.

That's it. Now whatever file we store in the static folder will be available at http://127.0.0.1:8000/static/<filename>.

Using static files inside templates

Now, let's create a simple CSS file with the name style.css. I will be using a pretty simple CSS file for demonstration.

body{
    background-color: #ca1c1c;
    color: aqua;
}

Now, we will use this in our hello.html file by making use of the static tag. First, we will import it & then use it as shown below:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <link rel="stylesheet" href="{% static 'style.css' %}">
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>My name is <strong>Rachit Khurana</strong></p>
    </body>
</html>

Now when we run the server & go to http://127.0.0.1:8000/ we will see the new HTML page with the CSS.

Congratulations, you know know how to render an HTML template & use static files. But what if we need to pass an argument from the code to the template?
We can also do that easily. Let's take a look at how to do that.

Passing arguments to the template

We can easily pass variables to the template to render.
For eg, I want to pass my name & age to the template. We will go to the views.py file & declare these variables in the function.
We then need to pass another argument to the render function with all the variables we need to pass to the template as a dictionary.
The final code will look like this:

from django.shortcuts import render, HttpResponse

# Create your views here.
def hello(request):
    name="Rachit Khurana"
    age=19
    return render(request, 'hello.html', {'name':name, 'age':age})

Now we can use these variables in the template hello.html by wrapping them with double curly brackets like this:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <link rel="stylesheet" href="{% static 'style.css' %}">
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>My name is <strong>{{name}}</strong></p>
        <p>My age is <strong>{{age}}</strong></p>
    </body>
</html>

Here {{name}} will get replaced by the value of name we have passed to the template. Now if we try to run the server & go to http://127.0.0.1:8000/ we can see the new rendered HTML page with those variables.

Like this:

We can not only pass string or int values, but we can also pass lists, tuples, dictionaries etc.

Congratulations, you now know how to render templates, serve static files & pass variables to the template. But that's not all, Django templating is way more powerful than this. We will explore more about it in the next blog.

Creating the First View - Hello World!

Let's start by creating a simple view that will return a simple Hello World text.

For that, we first need to tell Django to include our app (the app that we created before using the django-admin startapp command) in the project.
We will open the settings.py file. There would be a list named INSTALLED_APPS . We just need to add our app name to that file. This allows Django to recognize and include your app in the project.
Somewhat like this:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'quiz'
]

Here, quiz is the name of the app I created before.

Now, we will create a function that will take the request as a parameter & return Hello World! or anything you like. Kindly note, that request is a required parameter as it will contain all the details of the HTTP request.
We will create this function in quiz/views.py file.

Since we want to return plain text in the HTTP response, we will import it here.
HttpResponse is used to return plain text in the HTTP response. django.shortcuts already provide us with many methods through which we can return data.

The file will look like this:

from django.shortcuts import render, HttpResponse

# Create your views here.
def hello(request):
    return HttpResponse("Hello World!")

Now to map this function to the home URL, we will edit the urls.py file.
urls.py file already contains a list by the name of urlpatterns. We will add our routes to this. Since we want to display Hello World on our homepage, our path will just be an empty string. And to map it to that function, we will import quiz.views here.

Our views.py file should look something like this now:

from django.contrib import admin
from django.urls import path
import quiz.views

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", quiz.views.hello, name="hello")
]

The name parameter in the path is optional and used for naming the URL pattern, allowing you to refer to it by name in other parts of the code.

Awesome, we have made our first view. Now to test it, we will run it using the following command

python manage.py runserver

This will start the Django server & will serve it to the local host.

And now, when we go to http://127.0.0.1:8000/ we will see Hello World! on that page 🎉

And there you have it! We have successfully created our first view in Django that displays 'Hello World!' when accessing the homepage. This simple example lays the foundation for building more complex views and functionalities in your Django project. Keep exploring and experimenting with Django to unlock its full potential!

In the next blog, we will explore more about how to use templates.

The general file structure of Django looks like this:

├── [appname]
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   └── views.py
├── [projectname]
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

Here [appname] represents the name of the app you have created & [projectname] represents your project name.

Now, let's go over each file one by one.

manage.py

It mainly contains code to manage your Django application, like running the project, applying migrations, etc. Most of the time we would never need to edit this file. So we can even ignore it for now.

settings.py

It contains all the project configs required. It is one of the most important files. We will add more apps here, set up email servers, templating, middleware, databases, and a lot more. Don't worry, we don't need to know everything about it right away.

urls.py

In this file, we will define all the URL routes that we will be using in our projects. We can map the URL routes to a specific view, redirect to another URL etc. We can also define dynamic URLs, parameterised URLs, and much more. This allows us to configure the flow of our project and define how different URLs should be handled.

asgi.py & wsgi.py

ASGI stands for Asynchronous Server Gateway Interface & WSGI stands for Web Server Gateway Interface. Django automatically generates these files for us so we don't need to modify them initially. These files handle the communication between Django and the web server. While it's a bit of an advanced topic, you can skip it for now. If you're interested, you can read more about ASGI and WSGI online.

views.py

This is the main file where you write the main logic of the web pages. Django supports 2 types of views, function-based views & class-based views. They are used to define what needs to be done & what needs to be returned when a specific URL is called.
We can return a JSON response, A HTTP response, a rendered template or anything we want.

models.py

This file is mainly used to define all the models that we want to use. You can think of it as defining the database structure so that we can easily read & write data into the database. After defining the models here, we can use the very powerful Django ORM(Object-Relational Mapping) to interact with the database. I will cover the Django ORM in later blogs of this series.

app.py

This file is mainly used to customize the configuration of your app or define additional metadata for it. For now, we can ignore this file.

admin.py

This file is used to register our app & models in the admin panel. So that we can easily edit data in the admin panel. We can also customise the looks & behaviour of the app so that it looks & behaves as we want in the admin panel.

Migrations folder

This folder contains all the migrations files that are generated by manage.py when we edit the models in our models.py file. These migration files then make the specified changes in the main database.

With this, we have covered the basics of most of the important Django files that we would need while building a web app.
In the next blog, we will cover how to make url routes & views for them in the urls.py & views.py files respectively.

I hope this blog series is helping you learn Django.

Follow my journey on Twitter: @notnotrachit

Installing & initialising a project

Django is a really powerful Python-based web framework with the philosophy batteries included. It means it gives you everything you need to build a full-stack web application. Django's Tag line is The web framework for perfectionists with deadlines. It's because it allows you to create professional-grade web apps very quickly.

However, learning it may seem a bit complex, but believe me, it is not. And to help with that, I'm writing this blog series.

So let's start from the very basics, installation & initialising a project

Installation

Installing Django is pretty straightforward. You just need to use pip to install Django. However, it's always recommended to use a virtual environment for a project. So we will start by creating a virtual environment.

python -m venv venv

This will create a virtual environment in the venv folder. To use this environment, we need to activate it. Activating it is different in Windows, Linux & MacOS.

Bash Shell (Linux)

source ./venv/bin/activate

Fish Shell (Linux)

source ./venv/bin/activate.fish

CMD (Windows)

venv\Scripts\activate.bat

Powershell (Windows)

venv\Scripts\Activate.ps1

MacOS

source ./venv/bin/activate

After activating the virtual environment, we can install Django using pip.

pip install Django

Of this, we have successfully installed Django on our systems. So what are we waiting for? Let's start a project

Initialising a project

To start a project, we will use the django-admin command. It will help us generate the boilerplate code.

django-admin startproject <projectname>

For eg.

django-admin startproject triviaquiz

This will generate a boilerplate code for you. It will include a lot of files like manage.py, settings.py, models.py, urls.py etc.

Now to organise our code, we divide our Django web app into several smaller sub-apps. To create a sub-app, we will again use the django-admin command.

django-admin startapp <app_name>

For eg.

django-admin startapp quiz

This will create a new folder with several other files like models.py, views.py, admin.py etc.
You can try exploring all these files yourself as Django provides comments in the boilerplate code for easy understanding.
However, I will also explain each of them in detail in my next blog.

Running the project

To run the project, we will use the following command:

python manage.py runserver

This will start the server with your project at http://127.0.0.1:8000.
And by going to this url, you will a default Django page like this:

If you are seeing this, then congrats, you have successfully set up & started your project.

In the next blog, I will explain all the different Django files in detail. Stay Tuned

Follow my journey on Twitter: @notnotrachit

Team Details

Rachit Khurana - Rachit Khurana

Description of Project

It's a simple portfolio website that I made It has many pages like Projects, skills, education, contact etc.
It has displays all the blogs automatically using the APIs

Tech Stack

• HTML

• CSS

• Tailwind

• DaisyUI

• NextJS

• Appwrite

  • Database

  • Storage

I built this portfolio using NextJS. I used the Appwrite database for storing & getting all the projects as well as certifications data. I used Appwrite storage to store the project & certificates cover images.

Challenges We Faced

I faced many challenges while building this. Initially, I was quite confused about how to make it dynamic & easy for me to add more data later on. So I used Appwrite to solve this as it allows me to add data easily.

Public Code Repo

GitHub

Demo Link

My Laptop

Firstly let me give you a brief about my laptop. I have a HP Victus laptop. It has 8gb RAM, 512gb SSD, Intel i5 11th Gen & NVidia 1650 ti graphics card.

My distro hoping journey

Till now I have switched a lot of distros on this laptop. It initially came with Windows 11 out of the box, however, me being a Linux lover, wanted to install Linux on it. So I installed KDE neon(Debian based) on it in dual boot mode since I had used debian previously. Then I clean installed KDE neon. It was working reasonably well, however NVidia Graphics card was causing a lot of trouble to me. My HDMI port wasn't working since it was directly linked to my graphics card.

So I switched to PopOS!. I switched because it had good NVidia drivers support out of the box. And it worked fine, my HDMI port was finally working. However, I had encountered a lot of bugs & battery issues in it which degraded my experience over time.

So I decided to make another switch. This time, I decided to switch to a Arch Based distro. But I knew that installing Arch directly would be a lot for me, so I thought to go with a Arch based distro like Garuda Linux. So I installed it. However after installing, my laptop wasn't booting. So I asked about it in the Garuda forum & got a quick fix that I needed to edit some grub config. So I edited it exactly the same way, and this time, it was working smoothly. However, my HDMI port still wasn't working. To use the Laptop in hybrid mode, we usually use optimus in Linux. But there was some issue with optimus on my laptop & hence I could make it work. So to use an application using Graphics card, I needed to run it using the prime-run command everytime.

After some time, I decided to make the switch again. This time, I decided to go with Nobara (Fedora based) I specifically chose Nobara as it was gaming focused and included some modification over base fedora. And till now it has been working perfectly. Now let me tell you about my experience with all three types of distros.

Debian based distros

(My experience from: Ubuntu, Kubuntu, KDE Neon & PopOS!)

Debian based distros are generally the first Linux distro anyone uses. And that is for a reason, its very beginner friendly. Almost everything can be done easily using GUIs. However, I faced a couple of issues on it. Firstly I have faced dependency issues multiple times. The apt package manager has given me trouble a lot of time, and most Debian based distros are actually based on Ubuntu & follow Ubuntu release cycle. Which means we get an LTS version every 2 years & non LTS version every 6 months. Which mean that we usually get older & outdated packages.

Arch based distros

(My experience from Garuda & Endeavour Linux)

Arch based distros are generally for advance users as Arch gives full control over the system. The main benefit of it is the availability of softwares. Everything is available in AUR. It is the most cutting edge distro with the latest softwares. One con that it has is that when tinkering a bit, you can break some stuff, & to fix that you need to be a little tech savy. And I found it a bit buggy as well.

Fedora based distros

(Me experience from Nobara Linux)

Fedora is my current favourite. It is very stable. And I have faced the least amount of bugs till now. Fedora uses a 6 month release cycle & hence we get a perfect balance between stable, well tested packages & cutting edge softwares. As for the con, I couldn't really find any, however, if I had to nitpick , it would be that the maximum number of softwares online are packaged in deb format which is only supported on linux. however, till dates I have not come across any packages that isn't available on Fedora. However, installing base Fedora has a bit of extra steps after installing. So I prefer Nobara.

A special note on Distrobox

If you want to install packages from other distros, you can use distrobox, it basically utilizes podman behind the scenes. You can refer to this itsfoss article for more info: https://itsfoss.com/distrobox/

My conclusion

So if you are a beginner, you can go with any Debian based distro or Nobara. And if you are an advance Linux user & love to tinker around with OS and want the latest packages, prefer Arch. And if you are looking for a stable distro, go with Fedora based (I would suggest Nobara) distros.

Flatpak is a packaging format for linux. And the best part, it is supported on all major linux distros. If you distro doesn't have flatpak installed by default you can go to https://flatpak.org/setup/ and follow the instructions there according to your disto. Few other advantage of flatpaks include shared dependencies, permission manager etc.

Here is a list of pretty useful (flatpak) Softwares for linux.

1) Blanket

Its a really nice application that plays ambient sound when you need to concentrate or study. It has a lot of options to choice from.

To install it, just type the following command in the terminal

flatpak install flathub com.rafaelmardojai.Blanket

2) Freetube

This application can be a bit controversial. Its basically a youtube client. It Provides adfree playback, custom speed, download videos and a lot more features.

To install it, just type the following command in the terminal

flatpak install flathub io.freetubeapp.FreeTube

3) KTouch

This is a really awesome software if you want to learn touch typing.

To install it, just type the following command in the terminal

flatpak install flathub org.kde.ktouch

4) Frog

Frog is a really nice and accurate OCR software, it also supports qr code.

To install it, just type the following command in the terminal

flatpak install flathub com.github.tenderowl.frog

5) Solanum

Its a pretty simple applicatiion for pomodoro technique.

The Pomodoro Technique was developed in the late 1980s by then university student Francesco Cirillo. Cirillo was struggling to focus on his studies and complete assignments. Feeling overwhelmed, he asked himself to commit to just 10 minutes of focused study time. Encouraged by the challenge, he found a tomato (pomodoro in Italian) shaped kitchen timer, and the Pomodoro technique was born. ^Wikipedia

Pomodoro is a really nice productivity technique.

To install it, just type the following command in the terminal

flatpak install flathub org.gnome.Solanum

These were 5 softwares that I found really Interesting and use on regular basis. To discover more flatpak softwares, you can head over to Flathub.

Hacktoberfest

This year, it was my first hacktober. I made some basic contributions in few open source repos. Thats the beauty of hacktoberfest. Even beginners are welcome. Even simplest of the simplest contributions are appreciated. Even if most people do it for swags, still its a nice motivation for beginners to start. I completed my 4 contribution just in few days and also received the holopin badges. They look pretty cool to be honest. Here is my holopin board.

Live Holopin Board (This may be changed with different badges if viewed at a later date):

Static version:

Hackathon

So this month, our college organized a hackathon as well. I decided to participate in it. This was my first ever hackathon. It was quite fun and I also learned a lot. I had an awesome team to work with. We were not even looking to win any prize this time. However after completing we think we can win the replit track prize. But the results for the track are still not out. We are still waiting for 1it.

DelhiFOSS event

I also attended the DelhiFOSS event hosted by FOSS United. It was also very very fun and informative. Met many awesone peoples there. Learned a lot.

Attending all these events was really fun. I learned and enjoyed a lot. Met many new people.

You can also follow me on twitter for regular updates. Twitter: https://twitter.com/notnotrachit

Are VS Code and ATOM really that similar?

Both are code editor, but offer very interesting features for text editing. Both are based on electron. But the main difference was user experience. VS Code is more inclined towards being an IDE, while Atom is more inclined towards being just a text editor for developers.

_{^{Image credit - itsfoss.com}}

Why use ATOM instead of VS Code?

VS Code is great. But there are many times I just wanted to make some quick edits. At that point I didn't wanted to open VS Code because its quite heave when compared to ATOM due to so many extensions I have installed 😅. I also prefer to use ATOM when working on small projects because ATOM is faster than VS Code. ATOM also supports extensions and they are pretty useful too. But even after installing so many extensions it was still lightweight and faster than VS Code. ATOM is for people who wanted more than a text editor but still want it lightweight.

What is the future of ATOM?

ATOM will be officially discontinued on December 15th. Till then you can use it normally. After that also you can use it but there won't be any updates. You will still be able to use extensions. However I think that the development of extensions will also stop after that. And eventually it will become very outdated. Since ATOM is open source, many forks may emerge but I don't think that they will get the same amount of attention from the community and extension developers.

What are the alternatives?

There are a few good alternatives to ATOM. First is Brackets by Adobe. I mainly for frontend developers only. So I didn't want to use it.

Next is Sublime text, Its really good, fast, and easy to use. It also supports various extensions. However, its not free. Most of the features are there in the trial version but the trial version show unlicensed product on the top bar , prompts many times to purchase a license. These small things sometimes makes the experience a little less enjoyable. If you can afford Sublime text, then you should definitely buy and use it. Its really great.

Another one is Kate. The text editor from the developers of KDE plasma. And since I'm using KDE, it works really great for me.(Its cross platform, supports Win, Mac, Linux) Its very customizable, offers many plugins, is very lightweight, has a lot of features. The only thing it lacks is support for third party plugins. But noticing the nature of KDE software, I think it will allow third party plugins soon as well.

For me, I will be switching back and forth between Kate and ATOM as of now.

Everyone use apps on their phones, but creating an app for each platform can be a little tough. So here comes PWAs. PWA stands for Progressive Web App. They look like normal apps, feels like normal apps, but aren't normal apps, instead they are just a website that runs in a standalone window.

Developing PWAs

PWAs are very easy to make, every responsive website can be turned into a PWA easily. You just need to add the icons, service worker and a manifest file. That's it.

Here are few complete guides for making PWAs:

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

https://web.dev/learn/pwa/

https://web.dev/progressive-web-apps/

App Usage

After that a user can install your PWA app just by visiting your website and installing it via the browser. And then it appears in the app list just like a normal app. It can then be uninstalled like a normal app as well.

Benefits of PWA

• Not dependent on any app marketplace

  One benefit of PWAs is that you don't need to use the OSs app marketplace. You won't need to pay the yearly fees to apple for being an app developer. And you won't need to pay to google as well.

• Easier to Maintain

  Maintaining a PWA is as simple as maintaining a website. Want to update your PWA? Just update your website. Boom, your app is also updated.

• Lightweight Size

  Since PWAs are just websites, the size of PWA is very less, only about a few MBs.

• Cross-platform

  You just need to make your PWA once, it will be available on all major platforms like Android, iOS, Windows, Linux, MacOS etc. Provided your website is responsive.

• Can even work offline

  You can cache files through service worker and make it even work offline

These were just a few of the benefits of PWAs.

Limitations

• No access to key system resources.

  You can only access few things that a website can access.

• Competitively less exposure

  Since your app isn’t on play store or app store, you may get less exposore in that aspect, but you can package your PWAs and even publish it there.

• Limited functionality

  PWAs have comparatively less functionality when comparing with native apps.

Conclusion

PWAs are great. So if you are just a web developer and have no idea about app development for Android or iOS . you can still create apps for mobiles. And its damn simple. If you can’t afford to hire a app developer, you can create a PWA instead. And if your app is va simple app and don’t require much system APIs then, I would suggest to just stick with PWAs only instead of Native Apps. Its easier and will even consume less space on users device.

We will be using django-pwa package for the same.

Installation

• Installing the django-pwa package

  pip install django-pwa
  

• Add pwa to your list of INSTALLED_APPS in settings.py:

# project/settings.py
INSTALLED_APPS = [
    ...
    'pwa',
    ...
]

Configuration

• Adding PWA settings to settings.py file

# project/settings.py

PWA_APP_NAME = 'My App'
PWA_APP_DESCRIPTION = "My app description"
PWA_APP_THEME_COLOR = '#0A0302'
PWA_APP_BACKGROUND_COLOR = '#ffffff'
PWA_APP_DISPLAY = 'standalone'
PWA_APP_SCOPE = '/'
PWA_APP_ORIENTATION = 'any'
PWA_APP_START_URL = '/'
PWA_APP_STATUS_BAR_COLOR = 'default'
PWA_APP_ICONS = [
    {
        'src': '/static/images/my_app_icon.png',
        'sizes': '160x160'
    }
]
PWA_APP_ICONS_APPLE = [
    {
        'src': '/static/images/my_apple_icon.png',
        'sizes': '160x160'
    }
]
PWA_APP_SPLASH_SCREEN = [
    {
        'src': '/static/images/icons/splash-640x1136.png',
        'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
    }
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'

Making it compatible with Django 4

Currently django-pwa version 1.0.10 is not compatible with Django 4. So if you are using an earlier version of Django or this package has received updates, you can skip these steps (marked with *).

• *Make a new folder in the base directory*

I named it pwa1

• *Make a new file urls.py with the following content*

from django.urls import re_path as url

from .views import manifest, service_worker, offline

# Serve up serviceworker.js and manifest.json at the root
urlpatterns = [
    url(r'^serviceworker\.js$', service_worker, name='serviceworker'),
    url(r'^manifest\.json$', manifest, name='manifest'),
    url('^offline/$', offline, name='offline')
]

• Add the following to your project's urls.py file

...
urlpatterns=[
    ...
    path('', include('pwa.urls')),
    # if you used the above method for compatibility then use the following code instead
    #path('', include('pwa1.urls')),
    ...
    ]

• Make a serviceworker.js file in your static folder with the following content.

// Base Service Worker implementation.  To use your own Service Worker, set the PWA_SERVICE_WORKER_PATH variable in settings.py

var staticCacheName = "django-pwa-v" + new Date().getTime();
var filesToCache = [
    '/offline',
    '/css/django-pwa-app.css',
    '/images/icons/icon-72x72.png',
    '/images/icons/icon-96x96.png',
    '/images/icons/icon-128x128.png',
    '/images/icons/icon-144x144.png',
    '/images/icons/icon-152x152.png',
    '/images/icons/icon-192x192.png',
    '/images/icons/icon-384x384.png',
    '/images/icons/icon-512x512.png',
    '/static/images/icons/splash-640x1136.png',
    '/static/images/icons/splash-750x1334.png',
    '/static/images/icons/splash-1242x2208.png',
    '/static/images/icons/splash-1125x2436.png',
    '/static/images/icons/splash-828x1792.png',
    '/static/images/icons/splash-1242x2688.png',
    '/static/images/icons/splash-1536x2048.png',
    '/static/images/icons/splash-1668x2224.png',
    '/static/images/icons/splash-1668x2388.png',
    '/static/images/icons/splash-2048x2732.png'
];

// Cache on install
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});

// Clear cache on activate
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith("django-pwa-")))
                    .filter(cacheName => (cacheName !== staticCacheName))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
});

// Serve from Cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('offline');
            })
    )
});

• Load PWA meta in templates Add the following tags in your base.html file.

{% load pwa %}

<head>
    ...
    {% progressive_web_app_meta %}
    ...
</head>

That's All 🎉

You can now see an option to install your site as an app in your supported browser on mobile as well as PC

We may face issues when someone uses bots to abuse our system and send automated signup/password reset to random people. So hCaptcha is a really good way to avoid bots.

Setting Up hCaptcha account

• First we need new hCaptcha account. If you don't have an account, then create one at https://dashboard.hcaptcha.com/signup.
• After that you need to go on your hCaptcha dashboard's sites page at https://dashboard.hcaptcha.com/sites.
• Then create a new site, you can name it anything you want. After that click on the settings icon next to the site you created. You will see a site key. Copy it and keep it someone.
• Go to your account settings at https://dashboard.hcaptcha.com/settings and then copy and keep the secret key.

Installing hCaptcha

We will be using django-hCaptcha package from pypi.

• Install it using the following command

  pip install django-hCaptcha
  

• Add “hcaptcha” to your INSTALLED_APPS setting like this:

# project/settings.py

INSTALLED_APPS = [
    ...
    'hcaptcha',
]

• Addsitekey and secret key which we kept earlier to your settings.py file

# project/settings.py

...
HCAPTCHA_SITEKEY = '<your sitekey>'
HCAPTCHA_SECRET = '<your secret key>'
...

Add hCaptcha to forms

• Extend default allauth forms I referred to this article by geeksforgeeks for the same: https://www.geeksforgeeks.org/python-extending-and-customizing-django-allauth/
  • Make forms.py file in any django app folder

# app/forms.py

from allauth.account.forms import SignupForm, ResetPasswordForm
from hcaptcha.fields import hCaptchaField


class CustomSignupForm(SignupForm):
    hcaptcha = hCaptchaField(theme='dark')
    # if the order of fields isn't as you expected ,then you can use field_order
    #field_order = ['username', 'email', 'password1', 'password2', 'hcaptcha']
    #customize this according to your form                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

class CustomForgetPassword(ResetPasswordForm):
    hcaptcha = hCaptchaField(theme='dark')

• Make these as the default forms by declaring them in settings.py file

# project/settings.py
...
ACCOUNT_FORMS = {
    'signup': '<app>.forms.MyCustomSignupForm',
    'reset_password': '<app>.forms.CustomForgetPassword',}
...

All Done 🎉

Congrats