Forem: Rachit Khurana

Building Jist: An AI-Powered Notification Summarizer with GitHub Copilot CLI

Rachit Khurana — Sun, 15 Feb 2026 14:12:02 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Jist is an open-source Android application that intercepts notifications from apps like WhatsApp, Telegram, Gmail, Slack, and more batches them per contact/group/thread and uses LLM APIs to generate concise, intelligent summaries.

Key Features:

🔔 Notification Capture — Listens to all app notifications via Android's NotificationListenerService
🤖 Multi-Model LLM Support — OpenAI, Gemini, Claude, OpenRouter, and any OpenAI-compatible API
⚙️ Model Selection — Configure your preferred LLM provider and model
📋 Auto Mode — Background summarization of notifications
🔑 Bring Your Own Key — Users provide their own API keys, no backend needed
🔒 Privacy First — All processing on-device, only notification text sent to chosen LLM
🌐 Modern UI — Material Design 3

Screen Captures

Tech Stack:

Component	Technology
Language	Kotlin
UI	Jetpack Compose, Material Design 3
Database	Room

My Experience with GitHub Copilot CLI

Building Jist with GitHub Copilot CLI was an incredible experience. Here's how I leveraged its capabilities throughout development:

🎯 Model Selection Strategy

One of the most powerful features of Copilot CLI is the ability to switch between different AI models for different tasks. I developed a mental model for when to use each:

Model	Best For	Why
Gemini 3 Pro	UI/Compose code	Excellent at visualizing layouts, Material 3 components, and Jetpack Compose patterns
Opus 4.6	Planning & architecture	Superior reasoning for system design, database schemas, and complex logic
GPT-5.2 Codex / Sonnet	General development	Balanced for boilerplate, testing, and debugging

🤖 Agent Skills

Copilot CLI's has the ability to use skills proper to give more accurate and contextual results, so I installed these skills:

Android Jetpack Compose: For building declarative UIs with modern Compose patterns
Material Design 3: For implementing Material You theming, dynamic colors, and expressive components

These skills provided context-aware suggestions specific to Android development, reducing the learning curve significantly.

🔧 MCP Servers

I used Model Context Protocol (MCP) servers to enhance productivity:

File System MCP: For navigating the Android project structure and understanding the codebase
GitHub MCP: For checking issues and managing development workflow
Custom Context Providers: For Android-specific patterns and best practices

And more..

These MCPs enabled Copilot to understand project context deeply, resulting in more accurate and relevant suggestions.

💻 How It Impacted My Development

Rapid Prototyping: Copilot CLI helped generate boilerplate code, letting me focus on business logic
Learning Android Compose: As someone relatively new to Jetpack Compose, asking Copilot about Material 3 components accelerated learning
Architecture Decisions: Switched to Opus for planning database schemas and service architectures
Debugging: When issues arose, switching to Claude helped trace through complex code flows
UI Polish: Gemini's strength in visual code helped create polished, modern interfaces

📊 Impact on Development

Time Saved: Significant reduction in boilerplate code writing
Quality Improved: Better adherence to Jetpack Compose and Material 3 best practices
Learning Accelerated: Fast track understanding of Android architecture components
Creativity Boosted: Focus on unique features rather than getting stuck on syntax

Few Challenges & Solutions

Challenge 1: Nested Scrolling in Compose

The onboarding screen crashed due to nested scrollable containers. Copilot CLI helped identify and fix the issue by explaining Compose measurement constraints.

Challenge 2: Battery Optimization Handling

Different Android OEMs handle battery optimization differently. Used Copilot to research and implement proper guidance for users across Samsung, OnePlus, Xiaomi, etc.

Challenge 3: Multi-Model LLM Abstraction

Creating a unified interface for different LLM providers with different APIs was complex. Copilot helped design a clean factory pattern that works seamlessly with OpenAI, Gemini, Claude, and OpenRouter.

Conclusion

GitHub Copilot CLI transformed my development experience building Jist. The ability to switch between specialized AI models for different tasks, rather than using a one size fits all approach unlocked new levels of productivity and code quality.

The combination of Copilot CLI's agentic capabilities, MCP servers, and model selection made this complex Android application achievable in a fraction of the time it would have taken otherwise.

Thank you for considering my submission!

GitHub Repository: github.com/notnotrachit/jist

My Portfolio Got a Glow-Up

Rachit Khurana — Mon, 19 Jan 2026 19:27:33 +0000

My Portfolio Got a Glow-Up (Thanks to Gemini)

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hello everyone, I'm Rachit Khurana, a Full Stack Developer who loves building things that live on the internet. Currently, I'm an Intern at Hyathi Technologies, and building BossAI.

I'm passionate about crafting scalable web applications and exploring new technologies. My journey spans across frontend frameworks like React and Next.js to backend technologies like Django, FastAPI, and Golang. I believe in the philosophy of "FAFO", constantly experimenting and learning by doing.

Portfolio

Portfolio Link

How I Built It

Tech Stack

This portfolio is built with a modern, performance-focused tech stack:

Framework: TanStack Start with React 19 — for blazing-fast SSR and seamless routing
Styling: TailwindCSS 4.0 — for rapid, utility-first styling
Animations: Framer Motion + GSAP — for smooth, cinematic animations
3D Graphics: Three.js with @react-three/fiber — for interactive 3D elements
Smooth Scrolling: Lenis — for butter-smooth scroll experiences
Typography: Outfit, Space Grotesk, and Syne from Google Fonts
Deployment: Google Cloud Run — for scalable, containerized hosting

The entire codebase is open source — check it out on GitHub!

Development Process

I had a previous portfolio built with Next.js (check it out here), but I wanted something completely fresh — a ground-up redesign that felt modern and unique. So I fed my old portfolio to Gemini 3 Pro in the Antigravity IDE along with this initial prompt:

"This is my portfolio. Change it fully. Make it look modern, and unique yet minimalistic. Make it as unique as possible. I don't want it to look vibe coded. It should feel like a professional company designed it. Feel free to use any third party tools/libraries. Also make it from scratch. I don't wanna use Next.js at all now. Rebuild it using TanStack Start."

(Lol, I know its kind of a funny/weird prompt, but Gemini handled it like a pro)

From there, everything was built through iterative prompting. I explored multiple aesthetics and design directions with Gemini — trying different color schemes, animation styles, and layouts — until I landed on this cifi inspired, holographic design that felt just right.

The AI assistance was particularly helpful for:

Generating complex CSS animations and transitions
Implementing the parallax effects and smooth scrolling behavior
Debugging tricky edge cases in responsive design

The workflow was incredibly efficient — I would describe what I wanted, Gemini would implement it, and we'd refine it together until it matched my vision.

What I'm Most Proud Of

Modern, Minimalist Design

I'm really proud of the modern aesthetic I achieved with this portfolio. The design combines:

Holographic elements: The profile picture has a cyberpunk-inspired glass container with animated borders, scanline effects, and a floating animation
Aurora backgrounds: Subtle, animated gradient backgrounds that create depth without distraction
Glass morphism: Frosted glass effects throughout for that premium, modern feel
Smooth micro-animations: Every interaction feels polished with carefully crafted transitions

Hidden Easter Eggs

One of the most fun parts of building this portfolio was adding multiple hidden easter eggs throughout the site! With Gemini's help, I was able to quickly implement several fun surprises that reward curious visitors who like to explore and interact with websites.

I won't spoil the fun by revealing them all here, but I encourage you to visit the portfolio and try to find them yourself! Some involve keyboard interactions, some require a bit of patience, and others are hidden in plain sight. Happy hunting!

Implementing App notifications: The FOSS way

Rachit Khurana — Sat, 12 Jul 2025 06:16:50 +0000

The Beginning: Building My First "Real" App

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 Webpush 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:

Your app registers for notifications directly with FCM endpoints
No Firebase project or configuration required
No Firebase libraries needed
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:

Generate VAPID key pairs
Use WebPush protocol for sending notifications
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: UnifiedPush 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!

Vibe Coding an entire game, Maze Trials

Rachit Khurana — Sun, 11 May 2025 19:11:17 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment!

What I Built

I built a 3D Maze Game inspired by the Maze Runner series using web technologies. The game puts players in a mysterious research facility where they must navigate through a maze while battling an infection and avoiding dangerous creatures called "Grievers."

Game Features:

Immersive 3D Environment: A fully navigable maze with dynamic walls that shift in darkness
Compelling Storyline: Players uncover the mystery behind the maze and their own identity through collectible story notes
Survival Elements: Players must manage their infection level, health, and stamina while searching for serum vials
Dynamic Day/Night Cycle: The environment changes as time passes, with increased danger at night
Enemy: Grievers hunt the player, especially in darkness
Cinematic Sequences: Story-driven cutscenes that reveal the narrative
Atmospheric Sound Design: Dynamic audio that enhances the tense atmosphere

Technical Highlights:

Built with Three.js for 3D rendering
Custom collision detection system
Dynamic lighting and environmental effects
Procedurally generated maze layout
Optimized performance for smooth gameplay
Responsive UI with health, stamina, and infection indicators
Integrated sound system with spatial audio

Demo

You can try out the game at mazetrials.rachitkhurana.tech

Code Repository

The full source code is available on GitHub:

notnotrachit / mazekiller

How I Used Amazon Q Developer

I used Amazon Q both as a CLI as well as a VSCode Extension.
Amazon Q Developer was instrumental in creating this project:

Game Architecture Design: I used Amazon Q to help design the overall architecture of the game, including the component structure and how different systems would interact.
Three.js Implementation: Amazon Q provided guidance on implementing Three.js features like lighting, camera controls, and collision detection. It helped me optimize the rendering pipeline for better performance.
Debugging Complex Issues: When I encountered issues with the player movement and collision detection, Amazon Q helped identify the root causes and suggested fixes.
Sound Management System: Amazon Q helped me design and implement the sound system that handles ambient sounds, music, and spatial audio effects.
Story Implementation: Amazon Q assisted in creating the cinematic sequence system and how to integrate the narrative elements into the gameplay.
Performance Optimization: When the game started experiencing frame rate drops, Amazon Q suggested several optimization techniques like frustum culling and staggered updates.
UI Development: Amazon Q provided guidance on creating responsive UI elements that update based on player status.

The most valuable aspect of using Amazon Q was how it helped me understand complex game development concepts and implement them efficiently. It suggested best practices for game architecture that made the code more maintainable and performant. When I got stuck on technical challenges, Amazon Q provided clear explanations and sample code that helped me overcome obstacles quickly.

For example, when implementing the dynamic wall movement system, Amazon Q suggested a pattern for updating the collision grid that I wouldn't have thought of on my own. This made the feature much more robust and eliminated several bugs I was experiencing.

Overall, Amazon Q Developer acted as both a coding assistant and a mentor throughout the development process, significantly accelerating my progress and improving the quality of the final game.

Building a RAG with Supabase Vector & OpenAI

Rachit Khurana — Mon, 16 Sep 2024 12:04:49 +0000

As AI continues to evolve, one of the limitations of generative AI is its tendency to hallucinate—producing inaccurate or nonsensical outputs, especially when it lacks relevant context. This is where Retrieval-Augmented Generation (RAG) comes in. RAG combines a large language model (LLM) with a knowledge retriever, helping provide context to queries and significantly improving accuracy. In this blog, we’ll explore how to build a RAG system for image descriptions using Supabase Vector and Azure OpenAI.

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

Deploy Django to Azure - The Easy Way

Rachit Khurana — Thu, 11 Jul 2024 12:21:55 +0000

The general perception is that deploying applications on the cloud is complicated, but that is not always true. We have really easy ways to deploy stuff on the cloud as well. So I will be demonstrating how to deploy Django Webpps to Azure easily.

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.

Top 5 Must-Have Tools for Linux Users

Rachit Khurana — Tue, 02 Jul 2024 11:20:55 +0000

Linux is known for its flexibility and powerful command-line tools. To make the most out of your Linux system, here are five productivity tools that can enhance your workflow.

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!

Let's Learn Django #6: Using Database & Admin Panel

Rachit Khurana — Sat, 22 Jul 2023 20:31:01 +0000

In the last blog, we discussed how can we use Django templating to the fullest. In this blog, we will discuss how can we use databases and handle our data in Django.

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.

Let's Learn Django #5 Django Template

Rachit Khurana — Wed, 21 Jun 2023 18:23:14 +0000

In the previous blog, we looked at how to set up and use Django templating. Now, let's dive deeper into Django templating and explore its powerful features.

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/

Let's Learn Django #4 Using templates & static files

Rachit Khurana — Sat, 17 Jun 2023 10:51:09 +0000

We have already seen how to write our first view in the previous blogs. In this blog, we will explore how to use & render templates.

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.

Let's Learn Django #3 Writing our first view

Rachit Khurana — Thu, 15 Jun 2023 12:30:25 +0000

By now, we have seen how to initialise our project and the overview of different files in a Django project.

Now, we will write out the first view/page.

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.

Let's Learn Django #2 File Structure

Rachit Khurana — Wed, 14 Jun 2023 18:39:02 +0000

After initialising a Django project, we can see several files. Don't worry, this blog will explain all of them in detail.

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

Forem: Rachit Khurana

Building Jist: An AI-Powered Notification Summarizer with GitHub Copilot CLI

What I Built

Key Features:

Screen Captures

Tech Stack:

My Experience with GitHub Copilot CLI

🎯 Model Selection Strategy

🤖 Agent Skills

🔧 MCP Servers

💻 How It Impacted My Development

📊 Impact on Development

Few Challenges & Solutions

Challenge 1: Nested Scrolling in Compose

Challenge 2: Battery Optimization Handling

Challenge 3: Multi-Model LLM Abstraction

Conclusion

My Portfolio Got a Glow-Up

My Portfolio Got a Glow-Up (Thanks to Gemini)

About Me

Portfolio

How I Built It

Tech Stack

Development Process

What I'm Most Proud Of

Modern, Minimalist Design

Hidden Easter Eggs

Implementing App notifications: The FOSS way

The Beginning: Building My First "Real" App

The Notification Wall

The F-Droid Reality Check

Down the Rabbit Hole: Discovering UnifiedPush

Understanding the Foundation: WebPush and VAPID

WebPush Protocol

VAPID (Voluntary Application Server Identification)

The Mobile Connection

How UnifiedPush Works

The Flow

What Are Distributors?

The Elegant Solution: Embedded Distributors

How It Works

The Best of Both Worlds

The Implementation Reality

Server-Side Changes

Mobile App Integration

The Debugging Nightmare (And Its Embarrassingly Simple Solution)

The Community That Made All the Difference

The Results: Better Than Expected

User Experience Wins

The iOS Reality: Apple's Walled Garden

What's Next?

For Fellow Developers

Resources

Vibe Coding an entire game, Maze Trials

What I Built

Game Features:

Technical Highlights:

Demo

Code Repository

notnotrachit / mazekiller

How I Used Amazon Q Developer

Building a RAG with Supabase Vector & OpenAI

What is RAG??

Let’s Build an Image-Based RAG

1. Uploading and Storing the Image

2. Generating an Image Description

3. Creating Embeddings

4. Saving the Embedding

5. Querying the Images

Adding a Simple UI with Streamlit

Conclusion

Deploy Django to Azure - The Easy Way

Prerequisites

Lets Deploy

1) Make a GitHub repository

2) Head over to Azure Portal

3) Creating an App Service

4) Making Required Changes

Top 5 Must-Have Tools for Linux Users

1) Zoxide (z)

1) Zoxide (`z`)