Devlog: QDel delivery simulation lab

QDel began as a set of unfinished Python components. I connected them into a discrete-event quick-commerce simulation and built a public dashboard so delivery-system designers can change operating assumptions and watch the results.

What shipped

• A shared Python and SimPy engine powers both the local command-line runner and the dashboard’s browser worker.
• Customer demand arrives stochastically. Orders move through a packing queue, then compete for a rider.
• FIFO and shortest-trip-first dispatch make it possible to compare how order policy affects throughput and service levels.
• Riders stay assigned for the outward trip, customer handoff, and return to the store. The dashboard animates rider positions on a Manhattan-distance city grid.
• Scenario controls tune demand, customers, riders, packers, speed, simulation length, service target, and random seed.
• Results include completed deliveries, average and P95 delivery time, SLA attainment, active overdue orders, queue size, and resource utilization.
• An order ledger can be filtered and exported as CSV. A saved baseline supports side-by-side scenario comparisons.
• A responsive dashboard, CLI, build script, reproducible seed handling, input checks, and model notes complete the first release.

Model boundaries

This release represents one centrally located store, one square street grid, fixed rider speed, no batching, and one outstanding order per customer. Delivery averages and SLA percentages use completed orders; overdue open orders appear separately. The model is a repeatable strategy sandbox, not a calibrated operational forecast.

Validation and release

The simulation passed six automated checks covering reproducibility, order lifecycle, resource capacity, dispatch priority, and validation. Browser checks covered playback, filters, CSV export, baseline comparison, and mobile layout. The first public version is available at qdel-simulation-lab.elatedgoby2048.chatgpt.site.

Project set up and started Email reading script design

I worked on setting up the basic project stuff (github repo, etc.) and then went on to build the first component of the app which is getting API access to Gmail Inbox.

I set up the required Google Cloud project (and an app inside it) for accessing the Gmail API via it, and added read.only scope.

Then after I used my app credentials to authorize a test script to read last 5 emails from my own inbox.
Which required me first giving the app permission for the same

Shipping the project

I completed updating the project readme with extensive details: Description, How to try?, How it works? and all the credits.

Here’s how it looks:

Completed the basic mission requirements of the project

I wrapped up writing the handling logic of the last command for the bot: /sarvgyan-search which takes a query and returns an AI summar answer for the search.

For search, and AI answer I used the free tier of Tavily Search API. (It gives 1000 free req/month)

Next I intent to deploy it on nest to get it up and running 24/7

btw: here’s a search result screenshot from the bot:

Completed logic for two slack commands

Before writing a single line of code I spent ~1hr learning how to use slack_bolt to register a command listener and how to write logic to perform actions on the command trigger using the decorator @app.command("/command") from the guide and web.

Using it I went on to programming actions for two commands:

• /sarvgyan-ping: returns latency for acknowledging command.

• /sarvgyan-befunny: Tells you a joke (which I must say doesn’t look like a joke 😅)

Project Setup

I worked on setting up the project basics: github repo, installing slack_bolt package and all that.

For this project I’ve decided to not follow the guide and go on to build it on my own in python rather than JS coz I feel more comfortable in it.

I think I’ll be using the official slack guide to help me along the way to build the app in python:

I tried fixing the frequent appearance of error while loading the website. Also I rewrote the whole logic of my website to get rid of messy .then() and .catch() blocks of code by using async and await keywords.

On the left can be seen the previous version of main.js and the right one is the refactored version

Shipping the project

I worked primarily on three things

1. getting a website deployment issue sorted (using Codex) due to a name mismatch in the local vite.config.js file and the remote github repo name.

2. Updating the README with complete project description, demo image, and website URL.

Finally the website is deployed at: here

Hurray, Wrapped up the project

I just did re-implement the final feature for it to be more visually appealing, but another thing is that I observed that the website took more time to reload and even had a few failed attempts to load the APOD. IDK why it’s happening, if any of you might please lemme know.

Now I only have to complete the project info and ship it.

Here’s how the new feature looks:

Added a custom feature for you to view the NASA APOD for the day you were born

This took a little bit of time as I had to figure out how to add forms in HTML, how to connect them to my JS logic so that I can access their data, and write the event logic.

I was able to do it without using any tutorial just using Google AI mode and Copilot. (I didn’t use them to write code for me)

TLDR; added a small form you can fill out on the website to view the APOD for your birthdate.

btw here’s the APOD for my birthdate:

Completed styling the website and started working on adding a cool feature (literally surprise ;)

I styled my website using clip-path: property and added custom fonts for the explanation as well as the title.

I then started the work on the feature and soon realized after a bit of experimenting I have to watch a JS learning tutorial to learn how to add forms/fields to my website and use the collected data.

Completed the JS logic for the website and started work on styling the website.

Majorly I worked on modifying main.js logic in order to handle occasional youtube video urls in the response and handle errors during the process using .error(...)

After that I worked on styling my website: adding pseudo-elements and styling them.

Now the website kinda looks like this:

I worked on exploring the project guide to learn about JS syntax and did various tasks mentioned.

I implemented the logic to fetch APOD data from NASA api then convert it into a JS object and then display the Title, Image and Explanation of the APOD on the website.

Along the way I learnt to use the fetch(...) function, .then(...) methods and creating conditionals in JS as well as constructing strings with placeholders ${...}.

TLDR; I worked primarily on writing the logic of my website in main.js.

I am following the mission guide (Website Pulse) for this project.

TLDR; This session was about setting up Vite in the project and automating the deployment and build workflow

In the first session I worked on creating Vite in my project repo, setting up a remote github repo, and creating a deploy.yml file in the project root specifying the deployment workflow.

Now whenever I push to the main branch of the repo, the workflow will be automatically triggered and the website will be built and deployed live.

I also create and securely added the NASA API key in a .env file.

I redesigned my website (twice) along the way I learnt about how to create a header & footer and how to center elements in the viewport.

Throughout the session the most learning has come by just reading through the source code of other’s website and making sense of it. It has been a very good imparter of knowledge on me.

HERE’S the transformation:
before- on the left (black)
AFTER- on the right (blue)

I completely redesigned my website. I added my profile photo, my Social links (accessible via icons; which I figured out myself how to do).