DEV Community: c a

basic django authentication flow using mongodb backend

c a — Tue, 29 Apr 2025 17:13:17 +0000

day 2 of my 20 days of django: exploring mongodb as the backend

some time back, i explored using mongodb with django:

c a

Mar 7 '25

Trying Out MongoDB database Backend for Django

#django #mongodb #database

Comments 1

3 min read

so for day 2, i decided to revisit it—but this time, with a simple authentication flow. my goal was to test if the mongodb backend now plays nicely with third-party libraries like django-allauth.

setup & default user flow

mongodb has solid documentation, but i prefer following the official github readme:

mongodb / django-mongodb-backend

Django MongoDB Backend

Django MongoDB Backend is a Django database backend that uses PyMongo to connect to MongoDB.

Documentation

Documentation written in the style of MongoDB's documentation is available at https://www.mongodb.com/docs/languages/python/django-mongodb/current/.

Documentation written in the style of Django's documentation is available at https://django-mongodb-backend.readthedocs.io/en/latest/.

Quick Start

Install

Use the version of django-mongodb-backend that corresponds to your version of Django. For example, to get the latest compatible release for Django 6.0.x:

pip install django-mongodb-backend==6.0.*

Create a project

From your shell, run the following command to create a new Django project called example using our project template. Make sure the end of the template URL corresponds to your version of Django (e.g. 6.0.x.zip for any Django 6.0.x version).

django-admin startproject example --template https://github.com/mongodb-labs/django-mongodb-project/archive/refs/heads/6.0.x.zip

You can check what version of Django you're using with:

django-admin --version

Connect to the database

Navigate to your example/settings.py file and replace the DATABASES setting using…

View on GitHub

the setup process involves bootstrapping a project from their provided templates:

# install the backend
pip install --pre django-mongodb-backend==5.2.*

# start a new project from the mongodb template
django-admin startproject example --template https://github.com/mongodb-labs/django-mongodb-project/archive/refs/heads/5.2.x.zip

# start an app from their sample app template
python manage.py startapp sample_mflix --template https://github.com/mongodb-labs/django-mongodb-app/archive/refs/heads/5.1.x.zip

update your database settings like this:

databases = {
    "default": django_mongodb_backend.parse_uri(
        config("mongo_uri"), db_name="mongousers"
    ),
}

code is available here:

https://github.com/achingachris/mongo-users

thoughts on the setup

authentication works out of the box, even with custom user models.

the only issue i had was not running mongo locally—so performance took a hit. but honestly, seeing my django data as mongodb documents? that was deeply satisfying.

i'm using jazzmin for the admin interface. adds some nice polish.

trying django-allauth with mongodb

unfortunately, still no support.

from the docs:

"we plan to test compatibility with the following third-party libraries by the ga release:

django-filter, django rest framework, django-allauth, wagtail, django debug toolbar."

source

code for the test branch:

https://github.com/achingachris/mongo-users/tree/django-allauth-mongo

final thoughts

i have high hopes for the mongodb django backend. once third-party libraries are supported, it’ll unlock serious potential for real-world projects.

until then, we wait.

see you on the next one

reviewing prelude's django starter template(by Sheena O'Connell)

c a — Fri, 25 Apr 2025 13:51:43 +0000

day 1 of my 20 days of django.

i always have a starter template for my django projects, but i couldn't help but feel like it does not cover much: fyi - i still have to do deployment configurations on every project and that's overwhelming.

Sheena O'Connell has an amazing starter template that I think I can pick a few things from it, and most importantly, it shares some of my beliefs ... and it has a big focus on frontend(i always forget about that)

here's the template:

preludetech / django-seed

Modern Frontend Django template repo

There are many excellent Django templates out there. They all have different priorities and opinions.

This template repo is different from the rest in that it's primary focus is frontend development, and frontend testing.

You could simply use this repo as a starting point for your own work - download it however you choose, and start adding your own code to the mix.

Or you can poke around and use this as a learning resource. Make sure you understand how everything was wired up and why certain decisions were made.

The latter is the best bet if you want to grow your own skills - it's likely that you will have different preferences, you might want to lay out your project in different ways and use different tools. That's perfectly normal. In fact, creating your own opinionated template repo is a useful learning experience :)

…

View on GitHub

setting the template up

i will use pycharm for this

the documentation looks straightforward.

we will first need to setup the database(make sure that docker is installed):

cd dev_db
docker compose up

next is installing django and other dependencies, and the project is using uv(i have never used it before)

so i need to install it - https://github.com/astral-sh/uv:

on mac:

# On macOS and Linux.
curl -LsSf https://astral.sh/uv/install.sh | sh

or simply:

pip install uv

after that:

Then run uv sync - this will set up a virtual environment in a directory called .venv. This environment works in the usual way.

this is actually very easy ...

Going forward, if you need to run a command using this environment you have the option of activating the environment or using the uv run command. Eg uv run pytest

then of course setting up tailwind:

npm i
npm run tailwind_build

i will disable the social logins for now(too lazy to settup a new app on github). so on config/settings.py:

# SOCIALACCOUNT_PROVIDERS = {
#     "github": {
#         "VERIFIED_EMAIL": True,
#         "SCOPE": [
#             "user",
#         ],
#         "APP": {
#             "client_id": env("GITHUB_CLIENT_ID"),
#             "secret": env("GITHUB_SECRET"),
#             "key": "",
#         },
#     }
# }

then follow the steps to run the app:

# create the database tables
uv run manage.py migrate

# make some fake data inside the database tables so you have something to look at
uv run manage.py fake_news

# Run the server
uv run manage.py runserver

on a successful setup, your app should be running well on port 8000

running tests

the template is using playwright(end-to-end testing for modern web apps) for tests.

https://playwright.dev/python/

to get started:

uv run playwright install

i think the setup is done... easy, right?

Exploring the Admin

creating an admin user:

uv run manage.py createsuperuser

the template uses unfold - https://unfoldadmin.com/

the unfold configurations in the config/settings.py:

UNFOLD = {
    "SITE_TITLE": "News",
    "SITE_HEADER": "News",
    # "DASHBOARD_CALLBACK": "config.unfold.dashboard_callback",
    "SHOW_VIEW_ON_SITE": False,
    "SIDEBAR": {
        "show_search": True,
        "show_all_applications": True,
        "navigation": [
            {
                "items": [
                    {
                        "title": _("Home"),
                        "icon": "home",
                        "link": reverse_lazy("admin:index"),
                    },
                    {
                        "title": _("Dashboard"),
                        "icon": "monitoring",
                        "link": reverse_lazy("admin:dashboard"),
                    },
                ]
            },
            {
                "title": _("News"),
                "collapsible": True,
                "items": [
                    {
                        "title": _("Articles"),
                        "icon": "local_library",
                        "link": reverse_lazy("admin:news_article_changelist"),
                    },
                ],
            },
            {
                "title": _("Accounts"),
                "collapsible": True,
                "items": [
                    {
                        "title": _("Users"),
                        "icon": "person",
                        "link": reverse_lazy("admin:accounts_user_changelist"),
                    },
                    {
                        "title": _("Groups"),
                        "icon": "groups",
                        "link": reverse_lazy("admin:auth_group_changelist"),
                    },
                ],
            },
        ],
    },
}

you can learn more about unfold and its configurations here:
https://unfoldadmin.com/docs/

user authentication

the template uses django-allauth

in the template:

Email/pass registration and authentication
Email address validation
Basic email template in place for comms
Login with Github(disabled it for the moment)

django allauth configurations in config/settings.py:

# AllAuth settings

ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_SIGNUP_EMAIL_ENTER_TWICE = True
ACCOUNT_EMAIL_VERIFICATION = "mandatory"
ACCOUNT_LOGIN_ON_EMAIL_CONFIRMATION = True
ACCOUNT_LOGIN_ON_PASSWORD_RESET = True

ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_LOGIN_METHODS = {"email"}
ACCOUNT_USER_MODEL_USERNAME_FIELD = None

ACCOUNT_ADAPTER = "accounts.allauth_account_adapter.AccountAdapter"
ALLOW_SIGN_UPS = True

a custom authentication model is set under the accounts app. a custom user model with email-based authentication instead of the default username-based one.

from django.db import models
from django.contrib.auth.models import AbstractBaseUser, BaseUserManager
from django.contrib.auth.models import PermissionsMixin


class UserManager(BaseUserManager):
    def create_user(
        self,
        email,
        password=None,
        is_active=True,
        is_staff=False,
        is_admin=False,
    ):
        if not email:
            raise ValueError("User must have an email address")
        if not password:
            raise ValueError("User must have a password")

        user_obj = self.model(
            email=self.normalize_email(email),
        )
        user_obj.set_password(password)
        user_obj.is_staff = is_staff
        user_obj.is_superuser = is_admin
        user_obj.is_active = is_active
        user_obj.save(using=self.db)
        return user_obj

    def create_superuser(self, email, password=None):
        user = self.create_user(
            email,
            password=password,
            is_staff=True,
            is_admin=True,
        )
        return user


class User(AbstractBaseUser, PermissionsMixin):
    email = models.EmailField(unique=True)

    full_name = models.CharField(null=True, max_length=200)
    is_active = models.BooleanField(default=True)
    is_staff = models.BooleanField(default=False)
    is_superuser = models.BooleanField(default=False)

    USERNAME_FIELD = "email"
    EMAIL_FIELD = "email"
    # The fields required when user is created. Email and password are required by default
    REQUIRED_FIELDS = []

    objects = UserManager()

conclusion

i love this template because it makes it easier to have the following:

custom user management with django-allauth
very straightforward allauth configurations and customizations, comes in handy
a cool django admin using unfold (i prefer using jazzmin or daisy, but unfold is giving me doubts)
i finally learned how to use django channels for realtime communications ... pretty awesome

fyi: using these learnings to make my template better.

if you wanna try other starter templates, checkout:

https://github.com/lincolnloop/django-layout/tree/main

https://github.com/jefftriplett/django-startproject

https://github.com/wsvincent/lithium

see you soon!

mongodb backend on django

c a — Fri, 07 Mar 2025 10:17:33 +0000

Trying Out MongoDB database Backend for Django

c a ・ Mar 7

#django #mongodb #database

Trying Out MongoDB database Backend for Django

c a — Fri, 07 Mar 2025 10:06:11 +0000

I know many developers who use Django, of course with Relational Databases: Postgres, SQL, SQLite.

Getting the news from MongoDB that the Django MongoDB Backend is now in Public Preview! was crazy!!! and Amazing of course.

// Detect dark theme var iframe = document.getElementById('tweet-1895549533859561728-372'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1895549533859561728&theme=dark" }

So I decided to give it a try. I made some rookie mistakes and assumptions(😂😂)

Initially I thought it would be a simple plug and play configuration, so I started out by testing it in already existing Django project, in this case, my starter template.

ChrisDevCode-Technologies / django-starter

Django Starter Template

Django Starter

Resources Used

https://learndjango.com/tutorials/django-custom-user-model#custom-user-model

https://learndjango.com/tutorials/django-allauth-tutorial#django-allauth

https://github.com/django-crispy-forms/crispy-tailwind?tab=readme-ov-file

Resources thinking

https://resend.com/python

https://uploadthing.com/

View on GitHub

Creating a MongoDB Account & a Cluster

I have used MongoDB on most javascript-based apps, so I know my around it.

You can learn more about creating a cluster here.

A free cluster should work for the testing:

After that, you will need to create users to access the database, once that is done, just give it a few minutes for the cluster to build up.

Once that is done, get the connection string, that looks like this:

mongodb+srv://chrisdevcode:<db_password>@djangomongo.oybyx.mongodb.net/?retryWrites=true&w=majority&appName=djangomongo

So I cloned the repo, installed the initial dependencies and add install the django-mongodb-backend package:

pip install django-mongodb-backend

Then of course update the DATABASE settings to use MongoDB:

DATABASES = {
  "default": django_mongodb_backend.parse_uri("<connection string URI>"),
}

Looked easy to me, till I ran migrations:

Well, that did go well ...

So back to the article by MongoDB's team:

Django MongoDB Backend Quickstart

Anaiya for MongoDB ・ Feb 3

#django #mongodb #quickstart

I asked if one has to start from their starter template:

Anaiya • Feb 6

Thanks for your question @chrisachinga!

We recommend doing so to ensure certain necessities are incorporated, such as MongoDB-specific migrations and having the settings.py file already modified for you so Django is using an ObjectId value.

Let me know if you have any other questions, I'd be happy to help.

That was helpful at the moment, oh and don't use it in production ... yet

Anaiya • Feb 10

Thanks for your reply @chrisachinga,

So we don't recommend using our library in production until our GA.
For any issues please open a GitHub issue or Jira ticket!

We appreciate your feedback so much. :)

So we try using the MongoDB starter …

Following the docs:

https://www.mongodb.com/docs/languages/python/django-mongodb/current/

So you create a django project from the template:

django-admin startproject quickstart --template https://github.com/mongodb-labs/django-mongodb-project/archive/refs/heads/5.1.x.zip

Then you update the connection string:

DATABASES = {
   "default": django_mongodb_backend.parse_uri("<connection string URI>", db_name="<database name>"),
}

You also create an application from a starter template:

python manage.py startapp sample_mflix --template https://github.com/mongodb-labs/django-mongodb-app/archive/refs/heads/5.1.x.zip

After that, I ran my migrations:

The error was about the DATABASE setting missing the "NAME" value, so I thought this would fix it:

DATABASES = {
    "name": "default",
    "default": django_mongodb_backend.parse_uri("mongodb+srv://chrisdevcode:<password>@djangomongo.oybyx.mongodb.net/?retryWrites=true&w=majority&appName=djangomongo"),
}

So that should work, right?

Confusing right? Maybe I rushed into the fix. So I asked on the forum:

MongoDB Django Database Backend - Python Frameworks - MongoDB Developer Community Forums

[https://jira.mongodb.org/browse/INTPYTHON-535](https://JIRA ISSUE CREATED) PS: I tried using the mongodb backend to an ongoing django project, but was advised to get started from the template(at least for now). I still want to try the mongodb backend and do some benchmarks on performance as compared to postgres. I got these two issues, maybe the team can help address, but I’m pretty sure I may have missed a step or something from the official guideline(feel free to criticize my feedback) set...

mongodb.com

Jeffery A. Clark responded with a couple of fixes:

MongoDB Django Database Backend - #2 by Alex_Clark - Python Frameworks - MongoDB Developer Community Forums

Thank you for using Django MongoDB Backend! Try including the database name in the URI: DATABASES = { "default": django_mongodb_backend.parse_uri("mongodb+srv://chrisdevcode:<pass>@djangomongo.oybyx.mongodb.net/default?retryWrites=true&w=majority&appName=djangomongo"), } Or try configuring the NAME setting like this: DATABASES = { "default": django_mongodb_backend.parse_uri("mongodb+srv://chrisdevcode:<pass>@djangomongo.oybyx.mongodb.net/?retryWrites=true&w=majority&appName=djangomo...

mongodb.com

DATABASES = {
    "default": django_mongodb_backend.parse_uri("mongodb+srv://chrisdevcode:<pass>@djangomongo.oybyx.mongodb.net/?retryWrites=true&w=majority&appName=djangomongo"),
}

DATABASES["default"]["NAME"] = "default"

(will be available on beta 1)

DATABASES = {
    "default": django_mongodb_backend.parse_uri("mongodb+srv://chrisdevcode:<pass>@djangomongo.oybyx.mongodb.net/?retryWrites=true&w=majority&appName=djangomongo", db_name="default"),
}

The fix is well explained on the PR: https://github.com/mongodb/django-mongodb-backend/pull/249

Did that work? Yes ...

What To Do next?

Testing and comparing performances with other database backends.

What I love about this: Deployment will be super easy and quick, especially that connection to MongoDB is by a URI, and hopefully no other stuff needs to be done ... trying that next 👀👀

This podcast on Django Chat talks about the mongodb database backend on django:

Official Django MongoDB Backen–Django Chat – Apple Podcasts

Podcast Episode · Django Chat · 19/02/2025 · 1h 3m

podcasts.apple.com

Also another good read:

Creating the MongoDB Database Backend for Django | by MongoDB | MongoDB | Jan, 2025 | Medium

MongoDB ・ Jan 15, 2025 ・
Medium

Become a Good Attendee and Listener at Developer Meetups and Tech Conferences

c a — Wed, 18 Dec 2024 12:18:15 +0000

I have a message for some of you: Stop Just Hoarding Swag! How to Learn at Tech Conferences.

Theres no shortage of advice on how to deliver amazing talks or workshops at tech conferences, not to mention tips for preparing killer proposals and navigating the call for speakers.

But what about attendees? Sure, there are guides on becoming a good listener or an engaged participant, but this piece is different. This is about my experience and what makes a great attendee and listener.

Organizers & Speakers Sweat: A Behind-the-Scenes Look

Before we dive into how to be a top-tier attendee, lets take a moment to appreciate the efforts it takes to organize a tech event or deliver a talk.

Organizers

These folks spend countless hours sometimes days or weeks planning sessions and selecting speakers from an overwhelming pool of Call for Speakers submissions.

The proposals they review? Often incredible, making the job of picking the best even harder. Now, imagine this: many of these organizers are volunteers. Yes, volunteers! They do this out of sheer passion for building communities and creating meaningful experiences for attendees like you.

Speakers

Submitting a proposal isnt a walk in the park. Its like applying for a highly competitive job. Speakers spend hours researching their topics, refining their proposals, and aligning their ideas with the events theme and audience.

Conferences like PyCon US n US, Dj an goCon Af rica, or DevFests aroun d the globe attract thousands of proposals. To even get accepted, speakers go through rounds of revisions, edits, and proofreads.

And the work doesnt stop there. Once accepted, these rockstars have to prepare their presentations me ticulously fact-checking every detail, perfecting their delivery, and ensuring their content resonates with audiences of varying expertise. Dont even get me started on live demos those nail-biting showcases that can either dazzle or derail a session!

Recognizing this sweat equity makes it all the more important for attendees to show up as active, respectful, and engaged participants. After all, your experience as an attendee is a direct product of someone elses hard work and dedication.

So Becoming a Great Attendee

It should be an art ..

You Spent Resources to Attend, So Make Them Count

Tech conferences arent cheap. You probably forked out money for tickets, travel, and hotel stays, not to mention the emotional cost of pretending to like the event coffee. Dont let all that go to waste!

Show up on time, attend sessions, and actively participate. Resist the urge to sneak out after grabbing the swag bag. Trust me, you didnt travel halfway across the country just for another branded water bottle. Engage with the sessions, ask thoughtful questions, and listen (more on that next).

Listen and Give Constructive Feedback

You came to learn, so act like it. Listening is an underrated superpower at tech events. Dont be the person who spends the keynote scrolling through Twitter, only to raise their hand at the end with, Can you repeat the part about AI ethics?

Take notes, absorb the content, and if something doesnt resonate, give constructive feedback. Organizers and speakers genuinely want to know what worked and what didnt. But lets keep it classy, folks. This session was awful is not feedback; its trolling. Instead, try: The session was insightful, but I wouldve loved more live examples.

Remember, Youre Not Alone

Newsflash: Other people also paid to attend this event/or attended(if free). Theyre here to learn, network, and maybe snag an extra croissant at breakfast. Respect their experience.

This means:

Dont hog the mic during Q&A. A question isnt your time to pitch your startup.
Be kind in networking spaces. Some folks are nervous, and your small talk could make their day.
Share your insights without dominating the conversation. Nobody likes a one-person panel.

Youre part of a community now. Act like it.

Come Prepared: Gear Up for Technical Sessions

If you know its a technical session, its probably a good idea to bring your laptop and get your hands dirty. Whats the point of attending a live coding workshop if all youre doing is watching the presenter type at the speed of light?

Seriously, bring your gear. Install the software in advance if theyve sent prep materials. Dont be the person who spends the first 20 minutes of the session trying to configure your environment while everyone else is halfway through building a web app.

Pro Tip: Keep some USB cables and a charger handy. Nothing says rookie move like running out of battery mid-session.

Dont RSVP for Free Events If You Wont Be Attending

Free events arent an all-you-can-eat buffet where you grab a plate and never sit down. If you RSVP and ghost, youre not just messing with the organizers youre robbing someone else of the chance to attend. Imagine taking a seat from a budding developer who couldve learned something life-changing, just because you thought you might show up. Be kind: RSVP responsibly. Its not Tinder; dont swipe right unless youre serious!

Bonus Tips for Becoming an Attendee Rockstar

Come Prepared: Know the schedule, research the speakers, and jot down questions in advance. Nothing says I belong here like a well-thought-out question during a session.
Engage on Social Media: Live-tweeting(or whatever were calling it on X these days)? Cool. Posting your notes on LinkedIn? Even better. Just make sure youre not so glued to your phone that you miss the actual event.
Network Smartly: Start with a compliment or a shared takeaway from a session. And please, for the love of tech gods, dont shove your business card into peoples hands like its a limited-time coupon.
Respect Everyones Time: Whether youre talking to a speaker, organizer, or fellow attendee, be mindful. Nobody wants a 15-minute monologue about your side project at lunch.
Ask Questions Thoughtfully: Dont ask a question that was just answered five slides ago. Stay relevant and concise.

Final Thoughts

Being a great attendee isnt rocket science (unless youre literally at a conference about rocket science). Show up, engage, and respect the effort thats gone into creating the event. Youll leave with more than swag youll gain knowledge, connections, and maybe even a sense of community.

And remember: The better you are as an attendee, the more value you bring to the whole experience. Now go forth and be the attendee everyone wants at their next tech event!

NOTE:

For article illustrations, please refer to the post on my Medium page:

https://chrisdevcode.medium.com/become-a-good-attendee-and-listener-at-developer-meetups-and-tech-conferences-c9a88f3141b8
]]>

Using APIs in Python

c a — Tue, 02 Jan 2024 17:24:12 +0000

Application Programming Interfaces (APIs) are crucial in the world of software development. They serve as the backbone for communication between different software applications. This article explores how to interact with a simple API using Python. We'll use a dummy server set up using JSON-Server, a package that allows you to create a fake API for testing and development purposes.

Setting Up the Dummy Server

Before diving into Python code, let's set up our dummy server. JSON-Server provides a full fake REST API with zero coding in less than a minute(not literally). Here's how you can set it up:

Requirements

Node.js
NPM (Node Package Manager)

Steps

Install JSON-Server : Run npm install -g json-server to install JSON-Server globally.
Create a db.json File : This file will be a database for your dummy API.
Start the Server : Use the following script to start your JSON-Server.

Interacting with the API using Python

With its simplicity and readability, Python is an excellent choice for API interaction. We'll use the requests library, which is a simple HTTP library for Python.

Installation

First, ensure you have the requests library installed:

pip install requests

Performing CRUD Operations

Read Operation (GET request)

if response.status_code == 200: marvelstars = response.json() print("Fetched Marvel Stars:") for star in marvelstars: print(star)else: print(f"Failed to fetch data. Status code: {response.status_code}")

Create Operation (POST request)

# Add a new Marvel star (POST request)new_star = { "id": 73, "rating": 1, "name": "Ngugu Wa Thiongo", "stagename": "Thanos", "powers": "Snaps and annoys people"}response = requests.post(api_url, json=new_star)if response.status_code == 201: print("New Marvel Star added successfully.")else: print(f"Failed to add new Marvel Star. Status code: {response.status_code}")

Update Operation (PUT request)

# Edit an existing Marvel star (PUT request)updated_star = { "id": 3, "rating": 10, "name": "Natasha Romanoff", "stagename": "Black Widow", "powers": "Expert martial artist, marksmanship, and hand-to-hand combat. Skilled spy and master of espionage." }response = requests.put(api_url + "/3", json=updated_star)if response.status_code == 200: print("Marvel Star updated successfully.")else: print(f"Failed to update Marvel Star. Status code: {response.status_code}")

Delete Operation (DELETE request)

# Delete a Marvel star by ID (DELETE request)star_id_to_delete = 23response = requests.delete(f"{api_url}/{star_id_to_delete}")if response.status_code == 200: print(f"Marvel Star with ID {star_id_to_delete} deleted successfully.")else: print(f"Failed to delete Marvel Star by ID. Status code: {response.status_code}")

Conclusion

Using Python to interact with APIs is straightforward and efficient. By following these steps, you can set up a dummy server with JSON-Server and use Python's requests library to perform various CRUD operations. This forms a foundational skill for any developer looking to integrate different software applications or services.

https://github.com/achingachris/fetch-and-get

Building Progressive Web Apps in Angular (using pwafire)

c a — Tue, 12 Dec 2023 21:21:03 +0000

Progressive Web Apps(PWA) are basically sites that use modern web tools to provide app-like experiences to users.

Progressive Web Apps | web.dev

web.dev

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase:

What are Progressive Web Apps? | Articles | web.dev

An introduction to Progressive Web Apps (PWAs) and the three pillars that separate them from other web apps.

web.dev

PWAs is very interesting topic when it comes to user experiences and why businesses would use it. It comes down to users needs and organization goals and agenda, but hear me out:

PWAs are faster than traditional websites. This is because they are able to cache content locally, which means that they can load much faster, even on slow internet connections.
PWAs are more reliable than traditional websites. This is because they are not reliant on the internet in order to function. Once a PWA has been installed, it can be used offline.
PWAs are more engaging than traditional websites. This is because they can offer a number of features that are not available on traditional websites, such as push notifications and home screen icons.
PWAs can be installed on users' home screens. This makes them more likely to be used, as they are always just a tap away.
PWAs can lead to increased conversion rates. This is because they offer a more seamless and engaging user experience.
PWAs can lead to more repeat visitors. This is because they are more likely to be used than traditional websites.
PWAs can lead to higher revenue. This is because they can lead to increased conversion rates and more repeat visitors.

Overall, there are a number of reasons why businesses are using PWAs. They offer a number of benefits over traditional websites, and they can help businesses to achieve their goals.

How Does Angular Support PWA?

Simply, service workers.

Service Workers & PWAs • Overview • Angular

The web development framework for building modern apps.

angular.dev

At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.

A service worker acts as a proxy between web applications, browser and the network(if available). They enhance applications to deliver a reliable user experience and performance.

Adding a service worker on an Angular app is the first step to creating a PWA(in Angular).

Service Workers helps single-page applications built with Angular get best performance and makes the applications highly reliable. All this is done without the need to code against low level APIs.

So… How do you have these service workers in your Angular app?

Pretty simple actually. You just need to run this command:

ng add @angular/pwa

Okay, this command does a couple of things to make that Angular app you have a PWA, here’s a breakdown:

Adds the @angular/service-worker package to your project, which in turn creates a service worker, and supports service worker builds in the CLI.
Updates the index.html file:
- Includes a link to add the manifest.webmanifest file
- Adds a meta tag for theme-color
Creates the service worker configuration file called [ngsw-config.json](https://angular.dev/ecosystem/service-workers/config), which specifies the caching behaviors and other settings.

To make it happen, you may need to build you app (again 🤣 )

ng build

PS: You can actually get in depth content on the service workers on the Angular Docs, it’s are surprisingly well documented tbh 🤓

https://angular.dev/ecosystem/service-workers

What happens when you run your app? The fastest way to identify a PWA is by checking the intstall icon on a Chrom address bar, just like the image below =>

PWAFIRE … (wth is that)

It’s not related to fire, or any of the 4 elements of the earth, It’s just collection of resources/APIs used to build Progressive Web Apps.

Home - Progressive Web Apps API of APIs

Resources to build Progressive Web Apps

pwafire.org

PWA brings alot to the table, with 22 APIs for developers to explore! My best APIs from pwafire:

Connectivity
Copy Image
Copy Text
Notifications
Custom install
Share
Display mode
Fullscreen
Idle detection

You can check others out (my opinions can be sad).

Home - Progressive Web Apps APIs by pwafire

Documentation for Progressive Web Apps API of APIs - pwafire. PWAFire APIs are modern web apis bundled together into a single package or api aka pwafire. Built on top of Project Fugu, an effort to close gaps in the web's capabilities and native mobile and desktop apps.

docs.pwafire.org

Code and Demo

This is a funny one, a simple Angular app that is a PWA using some pwafire APIs to make it cool.

Incase you’re more of a not-long read, here’s the source:

achingachris / dad-jokes

Simple Angular App for Dad Jokes: Angular + Progressive web Apps using PWAFIRE

Dad jokes

View on GitHub

Using the Share and Copy Text API to make a Progressive Web App.

From the source code on the repo shared, we will focus on the app.component.ts file:

Remeber to install pwafire in your application by running the command:

  npm i pwafire --save

Using Copy Text API:

This API is used for reading and writing text data to the clipboard, without blocking the main thread.

https://docs.pwafire.org/copy-text

The copy text API usage is as follows:

  const text = "Text to copy"          
  pwa.copyText(text);

So, inside our application, we wil get the tex from the API response:

  async copyJoke(joke: string) {
    try {
      const res = await pwa.copyText(joke);
      this.jokeCopied = res.ok;
      setTimeout(() => (this.jokeCopied = false), 5000);
    } catch (error) {
      console.log(error);
    }
  }

Using Share API:

Share links, text and files to other apps installed on the device.

Home - Progressive Web Apps APIs by pwafire

docs.pwafire.org

To use the share API, you first define the content to be shared:

  const data = {
    title: "Some title..",
    text: "Some text...",
    url: "https://pwafire.org",
  };

And finaly share the data:

pwa.Share(data);

So, here is how it’s used inside our app:

  async shareJoke() {
    const shareOptions = {
      title: 'Check out this joke!',
      text: this.joke,
      url: 'https://dadjokes-phi.vercel.app/',
    };

    try {
      await pwa.Share(shareOptions);
    } catch (error) {
      console.log(error);
    }
  }

Simple right!

You can checkout the live demo here:

https://dadjokes-pwa.vercel.app/

That’s it good people. By the way, there’s alot to learn in the PWA topic, I will drop some links below, just incase you are interested. Especially if you are curious on whether you can add a Progressive Web App to playstore 😎

Pwafire documentation: https://docs.pwafire.org/
Adding a PWA on Google Playstore: https://developers.google.com/codelabs/pwa-in-play#0
Fugu API tracker: https://fugu-tracker.web.app/
Fugu APIs: https://developers.google.com/learn/pathways/fugu-apis
Angular Service Workers: https://angular.dev/ecosystem/service-workers
Explore PWA: https://web.dev/explore/progressive-web-apps

Navigating the Code: A Comparative Analysis of CodiumAI PR-Agent and GitHub Copilot in Code Assistance and Review

c a — Sat, 02 Dec 2023 12:17:09 +0000

CodiumAI is a tool that helps developers write meaningful tests for their code. It does this by analyzing the code and generating tests that cover different edge cases and behaviors. CodiumAI can also help developers find suspicious behaviors in their code and improve the overall quality of their code.

One of the most amazing product by CodiumAI is the PR-Agent. It helps saving time in reviewing Pull Requests. The tool is open-source and available on GitHub to help alld developers review and manage pull requests (PRs) more efficiently.

This article is going to explore the features the CodiumAI PR-Agent has to offer in comparison to what GitHub Co-Pilot brings to the table. GitHub Co-Pilot is an AI driven developer tool, developed and maintained by GitHub.

Setting Up and Installation

Unlike GitHub Co-Pilot(10USD per month), CodiumAI PR-Agent has a flexible pricing options, including free tier, that comes with with great features including Code Behavior Analysis.

To get started, you go to https://www.codium.ai/ and sign up for an account. After creating, you are directed to an app home page where you get to view integration options to different IDE’s including:

Visual Studio Code
Webstorm
Pycharm

app.qodo.ai

CodiumAI Visual Studio Code extension is available on the official VSCode market place.

After installing, you will be redirected to you CodiumAI account to link your profile, and viola! You are good to go!

Comparing CodiumAI PR-Agent and GitHub Co-Pilot

CodiumAI's PR-Agent and GitHub Co-Pilot are both powerful tools, each offering great and unique features tailored to developers' needs. One amazing advantage of CodiumAI's PR-Agent lies in its free availability for individual developers, providing an accessible and cost-effective solution for enhancing code quality.

When it comes to user interface, CodiumAI stands out with its proprietary testing-specific UI/UX, that is well integrated into IDEs like Visual Studio Code(see image below). This interface not only facilitates easy management and interaction with individual tests but also enables automatic fixes to code—a feature that GitHub Co-Pilot doesn't explicitly emphasize. This emphasis on user-friendly interfaces positions CodiumAI as a more intuitive and efficient choice for developers.

CodiumAI supports the most commonly and prefered IDEs by developers worldwide, including VS Code and JetBrains, PyCharm and WebStorm offering flexibility to a broad user base. This contrasts with GitHub Co-Pilot, which, while supporting various IDEs, may not cover the full spectrum of developers' preferences.

Entry level developers often face challenges in extracting structured and consistent output from generative AI models. CodiumAI addresses this by leveraging its backend capabilities to ensure high-value results from the outset, simplifying the user experience for those new to the platform. GitHub Co-Pilot partially supports this through commands but may require more effort from beginners.

One distinctive feature of CodiumAI PR-Agent is its ability to run generated tests and Pull Request Commands within the IDE plugin, allowing developers to directly apply and review fixes to their code. This integration of testing and code enhancement sets CodiumAI apart, providing a seamless experience that GitHub Co-Pilot may not fully replicate.

CodiumAI goes beyond the generation of naive sanity tests by employing Behavior Coverage analysis and static code analysis techniques. This results in the creation of diverse test suites, enhancing the overall quality and effectiveness of the testing process—a dimension where GitHub Co-Pilot may have limitations.

Moreover, CodiumAI's emphasis on mapping component behaviors and providing a metric for evaluating behavior coverage instills confidence in developers. This feedback mechanism ensures users have a clear understanding of how much of the overall behaviors are covered, a feature that GitHub Co-Pilot may not offer at the same level.

CodiumAI's PR-Agent emerges as a compelling choice for developers seeking a comprehensive, user-friendly, and privacy-focused solution for code generation and testing. With its unique features and commitment to best practices, CodiumAI offers a robust alternative to GitHub Co-Pilot, particularly for those prioritizing ease of use, testing diversity, and data privacy.

GitHub Copilot helps developers work faster by providing suggestions for code completion, code generation, and code explanation. The primary role of GitHub’s CoPilot is code completions and code generation, while CodiumAI PR-Agent is focused on helping developers review pull requests, which it automatically analyzes pull requests and provides feedback on the code, documentation, and overall quality of the changes.
This can help developers identify and fix potential bugs and security issues before they are merged into the codebase.

Feature Group	CodiumAI PR-Agent	GitHub Co-Pilot
Primary Focus	Pull request review	Code completion and generation
Key features	- Auto description - Auto Pull Request review - Question answering - Code suggestions - Update changelog - Find similar code issues - Add documentation	- Code suggestions - Code generation - Code explanation
Pricing	- Open Source - Paid Features	Paid Features

CodiumAI PR-Agent's open-source nature makes it a cost-effective solution, while its support for various programming languages and IDE integrations ensures wide compatibility.

In conclusion, CodiumAI PR-Agent emerges as a more comprehensive and valuable tool for developers seeking to enhance code quality, streamline pull request reviews, and minimize development risks.

CodiumAI PR-Agent’s open-source nature, language versatility, and IDE integrations further strengthen its appeal.

While GitHub Copilot has amazing advantages to Developers like offering a great assistance in writting better code by offering suggestions for code completion, code generation, and code explanation, CodiumAI PR-Agent brings the following to the table:

Real-World Practicality: PR-Agent prioritizes practicality by limiting each tool (review, improve, ask, etc.) to a single GPT-4 call, ensuring responsiveness (~30 seconds) and cost-effectiveness for everyday team usage.
PR Compression Strategy: PR-Agent's unique PR Compression strategy effectively handles both short and long PRs, making it a versatile tool for various code review scenarios.
Modular and Customizable Tools: PR-Agent's JSON prompting strategy enables modularity and customization, allowing users to control tool categories and easily add new ones through the configuration file.
Broad Support and Flexibility: PR-Agent supports multiple git providers (GitHub, Gitlab, Bitbucket, CodeCommit), multiple usage methods (CLI, GitHub Action, GitHub App, Docker, etc.), and multiple models (GPT-4, GPT-3.5, Anthropic, Cohere, Llama2), catering to diverse user preferences and environments.
Open-Source Community: PR-Agent is an open-source project, embracing community contributions and fostering collaboration for continuous improvement.

A Look Into CodiumAI PR-Agent

To have a look of the PR-Agent in action, we will use an existing project on GitHub:

achingachris / dad-jokes

Simple Angular App for Dad Jokes: Angular + Progressive web Apps using PWAFIRE

Dad jokes

View on GitHub

Clone the project into your development environment and create a new branch, make a few changes, and push to GitHub:

The PR-Agent has a couple of commands that can be used inside a Pull Request:

/describe
/review
/improve
/ask
/docstring
/commit
/changelog

/describe command

qodo-ai / pr-agent

🚀 PR-Agent (Qodo Merge open-source): An AI-Powered 🤖 Tool for Automated Pull Request Analysis, Feedback, Suggestions and More! 💻🔍

Installation Guide | Usage Guide | Tools Guide | Qodo Merge 💎

PR-Agent aims to help efficiently review and handle pull requests, by providing AI feedback and suggestions

News and Updates

Feb 28, 2025

A new version, v0.27, was released. See release notes here.

Feb 27, 2025

Updated the default model to o3-mini for all tools. You can still use the gpt-4o as the default model by setting the model parameter in the configuration file.
Important updates and bug fixes for Azure DevOps, see here
Added support for adjusting the response language of the PR-Agent tools.

Feb 6, 2025

New design for the /improve tool:

Jan 25, 2025

The open-source GitHub organization was updated: https://github.com/codium-ai/pr-agent → https://github.com/qodo-ai/pr-agent

The docker should be redirected automatically to the new location However, if…

View on GitHub

The describe command tool is a feature that automatically generates descriptions for pull requests (PRs) created. Users can manually invoke it by commenting "/describe" on a PR, or it can be set to trigger automatically when a new PR is opened.

The configuration file for the tool includes options like publish_labels, publish_description_as_comment, add_original_user_description, keep_original_user_title, extra_instructions, and enable_pr_type.

Additionally, there is a markers template that allows users to integrate their content and auto-generated content through a template-like mechanism. Markers enable the replacement of specific content placeholders in the PR description, providing flexibility in structuring the output. Users can configure options such as use_description_markers to enable the markers template and include_generated_by_header to add a header indicating content generated by the PR Agent. Overall, the describe tool streamlines the PR documentation process by automating the generation of comprehensive descriptions.

/review command:

https://github.com/Codium-ai/pr-agent/blob/main/docs/REVIEW.md

The review tool scans the PR code changes, and automatically generates a PR review. It can be invoked manually by commenting on any PR.

Users can manually invoke it by commenting "/review" on a PR, or it can be set to trigger automatically when a new PR is opened. The tool provides various configuration options under the 'pr_reviewer' section in the configuration file, allowing customization of features such as focused review, scoring, tests checking, security issue detection, and effort estimation.
By adding a comment on your Pull Request, followed by a command, i.e:

@CodiumAI-Agent /review

You trigger CodiumAI PR-Agent to perform an action based on the command given, in this case, giving a review of the pull request.

Additionally, the review tool includes a PR reflection feature invoked by "/reflect_and_review." This feature prompts the author with questions about the PR, guiding the review based on their answers. A note on code suggestions quality emphasizes the potential for mistakes, encourages user judgment, and suggests using the 'extra_instructions' field to guide the model. It distinguishes between the general 'review' feature and the dedicated 'improve --extended' feature focused on suggestions.

Overall, the review tool streamlines the PR review process by automating various aspects and providing configurable options to adapt to project needs.

https://github.com/achingachris/dad-jokes/pull/1

/improve Command

https://github.com/Codium-ai/pr-agent/blob/main/docs/IMPROVE.md

The improve tool is a feature that automatically generates committable suggestions for enhancing code in pull requests (PRs). Users can manually trigger it by commenting "/improve" on a PR, and it can also be set to run automatically whenever a new PR is opened. An extended mode, activated by "/improve --extended," offers more comprehensive suggestions by dividing the PR code changes into chunks.

/ask Command

https://github.com/Codium-ai/pr-agent/blob/main/docs/ASK.md

The ask tool is a feature designed to answer questions about a pull request (PR) based on the code changes in that PR. Users can manually trigger it by commenting "/ask" followed by a question in quotes on a PR.

Example:

/ask "How do improve code quality"

The Similar Issue Tool is a feature designed to retrieve the most similar issues to the current issue in a repository. Users can manually invoke this tool by commenting "/similar_issue" on any pull request (PR) or issue.

The tool utilizes a retrieval system and indexes all previous issues in the repository to find and present similar issues. The retrieved information is then shared as comments in the respective PR or issue, providing users with relevant references or solutions.

To enable the usage of the 'Similar Issue' tool, users need to set specific keys in the .secrets.toml file or relevant environment variables. These parameters, including the Pinecone API key and environment, can be obtained by registering on the Pinecone platform.

Overall, the 'Similar Issue Tool' aims to enhance issue resolution by providing users with references to similar issues in the repository, fostering collaboration and knowledge sharing.

Pull Request Review Efficiency

Now that we know what CodiumAI PR-Agent is capable of, let’s dive deep into how it enhances developer’s Pull Request efficiencies in comparison with GitHub Co-Pilot.

A pull request (PR) review is an important stage of the software development lifecycle, ensuring that code changes are of high quality, meet coding requirements, and do not introduce bugs or security vulnerabilities. Both CodiumAI PR-Agent and GitHub Co-Pilot play significant roles in streamlining and enhancing the efficiency of pull request reviews.

CodiumAI PR-Agent's Approach to Pull Request Review

CodiumAI PR-Agent takes a comprehensive approach to pull request reviews, incorporating several tools and features to analyze code changes, provide feedback, and assist developers in improving their code. Here are some key aspects of CodiumAI PR-Agent's pull request review efficiency:

Auto Description:
The /describe command automatically generates descriptive content for pull requests. This feature helps in creating comprehensive documentation, providing context about the changes made in the code.
Auto Pull Request Review:
The /review command scans the code changes in a pull request and generates an automatic review. This includes focused reviews, scoring, tests checking, security issue detection, and effort estimation. The tool provides configurable options to tailor the review process to the specific needs of the project.
PR Compression Strategy:
CodiumAI PR-Agent employs a unique PR compression strategy that effectively handles both short and long pull requests. This versatility ensures that the tool remains efficient in various code review scenarios.
Modular and Customizable Tools:
The JSON prompting strategy allows for modularity and customization. Users can control tool categories and easily add new ones through the configuration file. This flexibility ensures that developers can adapt the tool to fit the requirements of their projects.
Broad Support and Flexibility:
CodiumAI PR-Agent supports multiple git providers, including GitHub, GitLab, Bitbucket, and CodeCommit. It offers multiple usage methods, such as CLI, GitHub Action, GitHub App, Docker, and more. Additionally, it supports multiple models, providing users with options to choose the underlying language model.
Open-Source Community:
Being an open-source project, CodiumAI PR-Agent encourages community contributions and collaboration. This open nature fosters continuous improvement and innovation.
https://github.com/Codium-ai/pr-agent
Real-World Practicality:
PR-Agent prioritizes practicality by limiting each tool to a single GPT-4 call, ensuring responsiveness (around 30 seconds) and cost-effectiveness for everyday team usage.

GitHub Co-Pilot's Role in Pull Request Review

GitHub Co-Pilot, on the other hand, primarily focuses on code completions, code generation, and code explanation. While it excels in assisting developers in writing better code by offering suggestions, its role in pull request reviews is not as direct as CodiumAI PR-Agent. However, it indirectly contributes to the overall efficiency of the development process by providing accurate and context-aware code suggestions.

Comparative Analysis

Now here is a comparative analysis of CodiumAI PR-Agent and GitHub Co-Pilot concerning pull request review efficiency:

Focus on Pull Request Review:
- CodiumAI PR-Agent is designed to assist developers in the pull request review process, offering tools like /review for automated reviews and feedback.
- GitHub Co-Pilot's primary focus is on code completion and generation, with less emphasis on providing detailed feedback for pull request reviews.
User Interface and Experience:
- CodiumAI PR-Agent’s UI/UX, integrated into IDEs like Visual Studio Code, enhances the user experience for managing and interacting with individual tests during pull request reviews.
- GitHub Co-Pilot, while excellent for code suggestions, may not provide the same level of testing-specific UI/UX, potentially making it less intuitive for pull request review tasks.
Testing and Behavior Coverage:
- CodiumAI goes beyond generating tests by incorporating Behavior Coverage analysis and static code analysis techniques. This results in the creation of diverse test functions, contributing to the overall quality of the testing process.
- GitHub Co-Pilot may lack the same level of sophistication in terms of behavior coverage analysis, potentially limiting its effectiveness in ensuring comprehensive code testing.
Integration of Testing and Code Enhancement:
- CodiumAI PR-Agent allows developers to run generated tests and pull request commands within the IDE plugin(UI Interface in the IDE), facilitating a seamless experience for applying and reviewing fixes directly.
- GitHub Co-Pilot may not offer the same level of integration for testing and code enhancement within the development environment.
User-Friendly Interfaces:
- CodiumAI's emphasis on a user-friendly interface, specifically tailored for testing and pull request tasks, positions it as an intuitive and efficient choice for developers.
- GitHub Co-Pilot, while providing excellent code suggestions, may not have a specialized interface for pull request review tasks.
Community Support and Open Source Nature:
- CodiumAI PR-Agent's open-source nature, coupled with its active community, ensures continuous improvement and adaptability to the evolving needs of developers.
- GitHub Co-Pilot, while a powerful tool, may have limitations in community-driven enhancements due to its closed-source nature.

Conclusion

It is undeniable how Artificial Intelligence has made our lives easier, not just as developers, but humans in general, I mean look at what OpenAI is doing. In the midst of all these awesome and cool inventions that AI is doing, we are greate to have tools like CodiumAI PR-Agent, an AI tool specialized to handle Pull Requests straight from our IDEs and even on GitHub!

Automating reviews, and minimizing development risks, have made CodiumAI PR-Agent a perfect go to tool.

Setting Up a Django Project

c a — Wed, 06 Sep 2023 05:00:10 +0000

Django(Python Django) is a high-level web development framework. It provides and flexible project structure and makes it easier to start new projects, In addition to that it follows the Model-View-Controller(MVC) architectural pattern, commonly referred to as Model-View-Template(MVT) in Django.

In this piece, we will document the procedural steps to setting up and installing a Django project.

While there are a number of ways to get started, feel free to explore available options on the internet and go for whatever makes you comfortable.

Prerequisites

Before we get started, here is a checklist:

Python installed
Virtual Environment (Recommended to have one): I will be using virtualenv

Creating a Virtual Environment(with `virtualenv`)

To get started, we will create a virtual environment to install and run Django. Using virtualenv makes it way easier to do so(I think ... 🤔 💭).

Open a terminal (CMD), and go to a working directory or a location where your project files will be. To create an environment, run the following:

virtualenv <project_name>

Replace the with the name of the project, i.e. My project will be: django-starter

virtualenv django-starter

Once that is done, you need to activate the environment. Before you do that, ensure that your terminal is in the project directory, "django-starter".

To activate the environment, run the following:

source bin/activate

Once the environment is activated, you will notice the environment will be enclosed by brackets on your terminal path:

(django-starter) chris@Chriss-MacBook-Pro django-starter %

To install django, run the following on the terminal/CMD:

pip install django

To confirm a successful installation, you can use pip freeze to check for installed packages inside the environment:

pip freeze

Creating a Django project

Django has the simplest project structure, you simply create a single django project, where you can have a number of applications inside it. We will start by creating a Django project, and then proceed to creating applications inside it.

To create a project, run the following:

django-admin startproject <project_name>

Replace the <project_name> with the project name.

Here's how I prefer to do it since I'm in the root folder of my environment, I'd love all my project configurations to be there, I will therefore run the following to create a django project:

django-admin startproject config .

This will create the core files to run and configure your project: manage.py and a config directory where it will have main settings and URLs for the project.

Note that you wont be editing the manage.py file. Inside the config directory, you will find a settings.py file that defines the database, middleware, and more configurations for a Django project.

(Optional Step)

Before we run the server, open the settings.py and go to the TIME_ZONE variable. Set the timezone to your local time zone (Really helps with real-time logging and debugging)

TIME_ZONE = 'UTC'

I will update my timezone to

TIME_ZONE = 'Africa/Nairobi'

To test for a successful setup, start the server by running the following:

python manage.py runserver

Django locally runs on port 8000:

http://localhost:8000/

This confirms a successful setup.

Conclusion

This masterpiece has broken down the process of creating a Django project:

Setting Up an Environment
Activating an Environment
Installing Django
Creating a Django Project

Note: To deactivate the environment, run the following:

deactivate

What Next?

The next article will cover the following:

How to create applications in a django project
How to set Templates and Static files (CSS and JS)
Writing simple views and URLs

Into PWA: Creating an installable Next.Js Application

c a — Sun, 25 Jun 2023 17:47:25 +0000

Progressive Web Applications (PWAs) have gained significant popularity in recent years due to their ability to deliver a native-like experience to users across multiple devices. One of the frameworks that has emerged as a powerful tool for building PWAs is Next.js.

Next.js, a React framework for server-side rendering, provides a solid foundation for creating fast and efficient web applications. In this article, we will explore the process of creating an installable Next.js application, taking advantage of the PWA features offered by modern browsers.

What is a Progressive Web Application (PWA)?

A Progressive Web Application is a web application that utilizes modern web capabilities to deliver an app-like experience to users. PWAs are built with web technologies such as HTML, CSS, and JavaScript and can be accessed through a browser without installing an app store. PWAs offer several advantages, including offline functionality, push notifications, and the ability to be added to the user's home screen for quick access.

Building a PWA with Next.Js

Before diving into the process of creating an installable Next.js application, let's quickly set up a basic Next.js project.
Ensure you have Node.js and npm (Node Package Manager) installed on your system. Then, follow these steps:

Clone the Next.Js starter template (or create a new Next.Js application):
git clone https://github.com/achingachris/nextjs-starter.git
Install the dependencies:
npm install
Once the installation completes, you can run the development server:
npm run dev

This will start the Next.js development server, and your application will be accessible at http://localhost:3000.

Adding PWA Functionality: Installability

For this demo, we will use an npm package, [next-pwa](https://www.npmjs.com/package/next-pwa), to install it, run the following at the root of the project:

npm i next-pwa

Once the installation is complete, update the next.config.js file to have the following:

const withPWA = require('next-pwa')({
      dest: 'public',
      register: true,
      skipWaiting: true,
      disable: process.env.NODE_ENV === 'development'
    })

    /** @type {import('next').NextConfig} */
    const path = require('path')

    const nextConfig = {
      reactStrictMode: true,
      sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
      },
    }

    module.exports = nextConfig

In the code above, we added the next-pwa configurations:

    const withPWA = require('next-pwa')({
      dest: 'public',
      register: true,
      skipWaiting: true,
      disable: process.env.NODE_ENV === 'development'
    })

The withPWA function wraps the configuration options provided and returns a modified Next.js configuration object that includes the PWA settings. This modified configuration can be used in the next.config.js file to enable the PWA features in your Next.js application.

Using this code snippet, you can easily configure the next-pwa package to add PWA functionality to your Next.js application, including service worker registration, caching, and offline support.

Creating the `manifest.json`

Next, create a new file in the root of your project called public/manifest.json.

The manifest.json file is a key component of a Progressive Web Application (PWA). It provides metadata and configuration information about the application, allowing browsers and devices to understand and present the PWA appropriately. Here are the main functions of the manifest.json file:

App Metadata: The manifest.json file contains information about the PWA, such as its name, short name, description, and icons. This metadata is used by browsers and devices when displaying the PWA, including on the home screen, app switcher, or other relevant user interfaces.
Launch Behavior: The manifest.json file defines the launch behavior of the PWA. For example, you can specify the start URL, which is the page the PWA opens when launched. You can also define the display mode, such as "fullscreen," "standalone," or "minimal-ui," which determines how the PWA appears to the user.
Icons: The manifest.json file allows you to specify icons of different sizes and formats for the PWA. Browsers and devices use these icons to represent the application visually. Providing icons in multiple sizes is important to ensure the PWA looks good on various devices and platforms.
Theme Color: The manifest.json file includes a theme color property that defines the color scheme for the PWA's user interface. Browsers can use this color to customize the appearance of the browser's UI elements when the PWA is active.
Additional Configuration: The manifest.json file can include other configuration options based on the specific requirements of the PWA. For example, you can define the orientation, background color, language preferences, and more.

Providing these details in the manifest.json file enables browsers and devices to handle the PWA appropriately, ensuring users' consistent and native-like experience. Additionally, the manifest.json file is used when users choose to install the PWA, as it provides the necessary information for creating an app-like shortcut on the home screen and launching the PWA in its standalone mode.

Here is a sample manifest.json:

{
        "name": "Next.js PWA Demo",
        "short_name": "pwaedemo",
        "description": "A Progressive Web App built with Next.js",
        "start_url": "/",
        "display": "standalone",
        "background_color": "#ffffff",
        "theme_color": "#000000",
        "icons": [
            {
                "src": "/icon-192x192.png",
                "sizes": "192x192",
                "type": "image/png"
            },
            {
                "src": "/icon-256x256.png",
                "sizes": "256x256",
                "type": "image/png"
            },
            {
                "src": "/icon-384x384.png",
                "sizes": "384x384",
                "type": "image/png"
            },
            {
                "src": "/icon-512x512.png",
                "sizes": "512x512",
                "type": "image/png"
            }
        ]
    }

You can find icons on the site https://www.iconarchive.com/, and customize the icons to various sizes on the site: https://www.simicart.com/manifest-generator.html/

Updating `_document.js`

Finally, update the _document.js file: src/pages/_document.js:

    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" href="/icon-512x512.png"></link>
    <meta name="theme-color" content="#000" />

Complete file:


    import { Html, Head, Main, NextScript } from 'next/document'

    export default function Document() {
      return (
        <Html lang="en">
          <Head>
            <link rel="manifest" href="/manifest.json" />
            <link rel="apple-touch-icon" href="/icon-512x512.png"></link>
            <meta name="theme-color" content="#000" />
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }

Testing the Installable Next.js PWATesting the Installable Next.js PWA

With the above configurations, you can now test your installable Next.js PWA. Run the following command in your project directory to build the optimized production version of your application:

`npm run build`

After the build process completes, start the production server by running:

npm start

After installing the application, you can search it on the app launcher:

Conclusion

In this article, we explored transforming a Next.js application into an installable Progressive Web Application (PWA). By leveraging the power of Next.js and the PWA capabilities provided by modern browsers, we can create fast, efficient, and app-like experiences for our users. Test your PWA on multiple devices and browsers to ensure broad compatibility and an optimal user experience. With the steps outlined in this article, you now have the knowledge to start building your own installable Next.js PWAs. Happy coding!

How to Fetch Data from an API in Angular

c a — Mon, 29 May 2023 08:44:29 +0000

The Dad Jokes App: Spreading Laughter One Click at a Time

This article will demonstrate how to get data from external APIs in an Angular project.

Humor has a unique way of brightening up our day and creating moments of joy. In the digital age, countless apps cater to various interests, and one app that stands out is the Dad Jokes App. This lighthearted application brings a collection of witty and groan-inducing dad jokes to your fingertips, ensuring laughter is just a click away.
In this article, we'll explore the features and development of the Dad Jokes App and its impact on users' daily lives.

Prerequisites

NodeJs Installed
Basic Angular Knowledge
Angular CLI installed

NOTE:
The demo is using Tailwind CSS to get started with the starter, clone the repository:

https://github.com/achingachris/dad-jokes-angular/tree/tailwindconfig

Creating an Angular Project

To create an Angular project, be sure to have installed the Angular CLI on your local environment:

    npm install -g @angular/cli

You can learn more about the Angular CLI here:

https://angular.io/cli

To start a new Angular project, run the following script on a terminal (CMD):

    ng new dad-jokes

You will be prompted to select some choices for configurations. You can go with the defaults for this article.

Running Angular Locally

Navigate to the project's root directory:

    cd dad-jokes

Run the following command to start the Angular development server:

    ng serve

Open your browser and visit **http://localhost:4200**. You should see the default Angular app running successfully.

Creating a Service:

An Angular service class provides reusable functionality to your Angular application. Services typically handle data access, business logic, and other tasks not specific to a particular component.
Services are defined using the @Injectable() decorator, which tells Angular that the class can be injected into other classes as a dependency. This allows you to easily share code and data between different parts of your application.

This article will use an Angular service to get data from an API.

To create a new service, run the following:

    ng generate service jokes

A new file will be created, src/app/jokes.service.ts. Here, we will define the service to get data from an API.

    import { Injectable } from '@angular/core';
    @Injectable({
      providedIn: 'root'
    })
    export class JokesService {
      constructor() { }
    }

Update the code to request an HTTP API request and retrieve the jokes.

We will use the API: https://icanhazdadjoke.com to fetch random “dad” jokes

Here's an example implementation:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';
    @Injectable({
      providedIn: 'root',
    })
    export class JokesService {
      url = 'https://icanhazdadjoke.com';
      constructor(private http: HttpClient) {}
      getJoke(): Observable<any> {
        return this.http.get(this.url, { headers: { Accept: 'application/json' } });
      }
    }

This service is used to get jokes from the icanhazdadjoke.com API. The JokesService class is decorated with the @Injectable() decorator, which tells Angular that the class can be injected into other classes as a dependency. This allows you to easily share code and data between different parts of your application.

The JokesService class has a single property, URL, and URL of the icanhazdadjoke.com API. The class also has a constructor that takes an instance of the HttpClient service as a dependency. The HttpClient service is used to make HTTP requests to the icanhazdadjoke.com API.

The JokesService class has a single method, getJoke(), which returns an Observable of type any. The getJoke() method requests an HTTP to the icanhazdadjoke.com API and returns an Observable of the response data. The Observable can be subscribed to in order to get the joke data.

Rendering Data:

Now, let's render the fetched joke in our app's component. Open the src/app.component.ts file.

Start by importing the JokesService:

    import { JokesService } from './jokes.service';

We then update the AppComponent() class:

    export class AppComponent {
      joke: string = '';
      title = 'Dad jokes';
      constructor(private jokeService: JokesService) { }  
      fetchJoke(): void {
        this.jokeService.getJoke().subscribe((data: any) => {
          this.joke = data.joke;
        });
      }
    }

Code explanations:

The joke property is a string that will hold the joke that is fetched from the API.
The constructor method takes an instance of the JokesService class as a dependency. The JokesService class is used to fetch jokes from an API.
The fetchJoke() method calls the getJoke() method on the JokesService class and subscribes to the returned Observable.

The fetchJoke() method is called when the application is loaded. The method calls the getJoke() method on the JokesService class. The getJoke() method returns an Observable of type any. The Observable emits an object that contains the joke data. The callback function passed to the subscribe() method is called when the Observable emits a value. The callback function sets the joke property to the joke property of the object that was emitted by the Observable.

The complete src/app.component.ts file:

    import { Component } from '@angular/core';
    import { JokesService } from './jokes.service';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      joke: string = '';
      title = 'Dad jokes';
      constructor(private jokeService: JokesService) { }  
      fetchJoke(): void {
        this.jokeService.getJoke().subscribe((data: any) => {
          this.joke = data.joke;
        });
      }
    }

Next, we update our web view by opening the **app.component.html** file. Update the file:

    <nav class="bg-blue-500 p-4">
      <div class="container mx-auto flex items-center justify-between">
        <a href="#" class="text-xl font-bold text-white">Dad Jokes</a>
      </div>
    </nav>
    <div class="container mx-auto text-center">
      <h3 class="mb-4 text-3xl font-bold">Don't Laugh Challenge</h3>
      <div id="joke" class="mb-4 rounded-lg bg-gray-200 p-4">{{ joke }}</div>
      <button
        id="jokeBtn"
        class="rounded-lg bg-blue-500 px-4 py-2 text-white"
        (click)="fetchJoke()"
      >
        Get Another Joke
      </button>
    </div>

Reload your browser to view the changes:

NOTE:
The demo above used Tailwind CSS to get started with the starter, clone the repository:

https://github.com/achingachris/dad-jokes-angular/tree/tailwindconfig

The complete source code is available on GitHub:

achingachris / dad-jokes

Simple Angular App for Dad Jokes: Angular + Progressive web Apps using PWAFIRE

Dad jokes

View on GitHub

Conclusion:

In this article, we explored how to fetch data from an API using Angular. We covered the prerequisites, setting up an Angular project, fetching jokes from an API using a service, rendering the data in the app's component, and deploying the app on Vercel. With the app up and running, users can now enjoy a delightful collection of dad jokes, spreading laughter one click at a time.

A live demo of the app can be view here:

https://dad-jokes-angular.vercel.app/

Deploying A Django Project on PythonAnywhere

c a — Tue, 23 May 2023 16:16:48 +0000

Deploying a Django project on PythonAnywhere lets you make your web application accessible online. With PythonAnywhere, you can create a web app, configure it with a WSGI file, and host your Django project seamlessly.

This article provides a comprehensive, step-by-step guide to help you deploy your existing Django project on PythonAnywhere successfully.

Prerequisites:

Pythonanywhere Account
An existing Django project is ready for deployment.
GitHub (Code Repo)
Basic Familiarity with Django and the command line interface

For demo purposes, please refer to the following project: Its a voting app from the official Django Tutorial

https://github.com/achingachris/Django-Polls-Tutorials

Uploading Your Code to pythonanywhere

Open a console(terminal) on your pythonanywhere dashboard:

Just click on the blue bash button to open a terminal-like page:

If your Django project is hosted on a code-sharing platform like GitHub or Bitbucket, you can clone it directly onto PythonAnywhere using a Bash console. Here's an example command:

git clone https://github.com/achingachris/Django-Polls-Tutorials.git

Alternatively, as mentioned in the documentation, you can explore other methods of uploading and downloading files on PythonAnywhere.

Set Up a Virtual Environment and Install Dependencies

Create a virtual environment in the Bash console on PythonAnywhere and install Django and any other project dependencies.

To do so, use the command:

 mkvirtualenv --python=/usr/bin/python3.10 <environment name>

Replace <environment name> with any name, you want to give to your virtual environment.

So for the demo, I will use:

mkvirtualenv --python=/usr/bin/python3.10 polls

To install the dependencies, change the active directive on your console to the folder cloned from GitHub(or uploaded):

cd projectname

Ensure you have the requirements.txt file

To install the dependencies, run:

pip install -r requirements.txt

Configure the Web App and WSGI File

To set up your Django project on PythonAnywhere, follow these steps:

Create a Web app with Manual Configuration:

Navigate to the "Web Apps" tab on PythonAnywhere and create a new web app.

Select the default domain for free accounts

Choose the "Manual Configuration" option and select the appropriate Python version matching your virtual environment.

Choose a Python version: (preferably v3.10)

You will get notified that you have to set up the configuration manually:

Specify the Virtual Environment:

Scroll down to the "virtualenv" section of the web app configuration, and enter the name of your virtual environment (e.g., polls).

Edit the WSGI File:

Scroll down to the Code section of the web app configuration.

Click the link and make the necessary changes to the WSGI file. You will be redirected to an in-browser text editor view:

Delete everything except the Django section and then uncomment that section. Your WSGI file should look something like this:

# +++++++++++ DJANGO +++++++++++
    # To use your own Django app use code like this:
    import os
    import sys

    # assuming your Django settings file is at '/home/myusername/mysite/mysite/settings.py'
    path = '/home/myusername/mysite'
    if path not in sys.path:
        sys.path.insert(0, path)

    os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'

    ## Uncomment the lines below depending on your Django version
    ###### then, for Django >=1.5:
    from django.core.wsgi import get_wsgi_application
    application = get_wsgi_application()
    ###### or, for older Django <=1.4
    #import django.core.handlers.wsgi
    #application = django.core.handlers.wsgi.WSGIHandler()

Edit the code to configure your Django application. For the demo, the project name is polls , and my username is chrisachinga:


import os
import sys

path = '/home/chrisachinga/polls'
   if path not in sys.path:
      sys.path.insert(0, path)

os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'

from django.core.wsgi import get_wsgi_application
application = get_wsgi_application()

Remember to save after editing the file.

Database Setup

We will use the simple SQLite database for this demo, so no extra configuration is needed.

Go to the Consoles tab , start a bash console, and use cd to navigate to the directory where your Django projects manage.py lives, then run:

 ./manage.py migrate

(ignore the warnings 🤣🤣)

You can now check if everything is okay. Click the link on the web tab to view the deployed version: chrisachinga.pythonanywhere.com

On loading the site, its most likely to get this error: DisallowedHost:

Here's how you can solve it:

Open the Django settings file (settings.py) in your project. Locate the **ALLOWED_HOSTS** variable. It should be a list or tuple.

Add 'chrisachinga.pythonanywhere.com' to the list of allowed hosts. Example:

ALLOWED_HOSTS = ['localhost', '127.0.0.1', 'chrisachinga.pythonanywhere.com']

I edited mine on GitHub:

Note: Include any other domains or IP addresses you want to allow access to your site.

To update the code on pythonanywhere, you can pull the code from the terminal:

git fetch
git pull

After that, head back to the web application tab and reload the site:

And now, when I load the site on: IT WORKS!

https://chrisachinga.pythonanywhere.com/polls/

Next Steps:

You can interact with the Django shell and API on the console to create a superuser, migrate databases, and more. Just ensure the virtualenv is turned on.

Conclusion:

Following this step-by-step guide, you can successfully deploy your Django project on PythonAnywhere. Remember to adapt the instructions to match your project's specific configuration and requirements. PythonAnywhere offers a convenient platform for hosting your Django application, allowing you to share your web app with users across the internet. Enjoy the benefits of a live Django site hosted on PythonAnywhere and provide an exceptional user experience.

DEV Community: c a

basic django authentication flow using mongodb backend

setup & default user flow

mongodb / django-mongodb-backend

Django MongoDB Backend

Django MongoDB Backend

Documentation

Quick Start

Install

Create a project

Connect to the database

thoughts on the setup

trying django-allauth with mongodb

final thoughts

see you on the next one

reviewing prelude's django starter template(by Sheena O'Connell)

preludetech / django-seed

Modern Frontend Django template repo

setting the template up

running tests

Exploring the Admin

user authentication

conclusion

mongodb backend on django

Trying Out MongoDB database Backend for Django

c a ・ Mar 7

Trying Out MongoDB database Backend for Django

ChrisDevCode-Technologies / django-starter

Django Starter Template

Django Starter

Resources Used

Resources thinking

Creating a MongoDB Account & a Cluster

Django MongoDB Backend Quickstart

Anaiya for MongoDB ・ Feb 3

So we try using the MongoDB starter …

What To Do next?

Creating the MongoDB Database Backend for Django | by MongoDB | MongoDB | Jan, 2025 | Medium

MongoDB ・ Jan 15, 2025 ・ Medium

Become a Good Attendee and Listener at Developer Meetups and Tech Conferences

Organizers & Speakers Sweat: A Behind-the-Scenes Look

Organizers

Speakers

So Becoming a Great Attendee

You Spent Resources to Attend, So Make Them Count

Listen and Give Constructive Feedback

Remember, Youre Not Alone

Come Prepared: Gear Up for Technical Sessions

Dont RSVP for Free Events If You Wont Be Attending

Bonus Tips for Becoming an Attendee Rockstar

Final Thoughts

Using APIs in Python

Setting Up the Dummy Server

Interacting with the API using Python

Conclusion

Building Progressive Web Apps in Angular (using pwafire)

How Does Angular Support PWA?

So… How do you have these service workers in your Angular app?

PWAFIRE … (wth is that)

Code and Demo

achingachris / dad-jokes

Simple Angular App for Dad Jokes: Angular + Progressive web Apps using PWAFIRE

Dad jokes

Using Copy Text API:

Using Share API:

Navigating the Code: A Comparative Analysis of CodiumAI PR-Agent and GitHub Copilot in Code Assistance and Review

Setting Up and Installation

Comparing CodiumAI PR-Agent and GitHub Co-Pilot

A Look Into CodiumAI PR-Agent

achingachris / dad-jokes

Simple Angular App for Dad Jokes: Angular + Progressive web Apps using PWAFIRE

Dad jokes

/describe command

qodo-ai / pr-agent

🚀 PR-Agent (Qodo Merge open-source): An AI-Powered 🤖 Tool for Automated Pull Request Analysis, Feedback, Suggestions and More! 💻🔍

Table of Contents

News and Updates

Feb 28, 2025

Feb 27, 2025

Feb 6, 2025

MongoDB ・ Jan 15, 2025 ・
Medium

Creating a Virtual Environment(with `virtualenv`)

Creating the `manifest.json`

Updating `_document.js`