DEV Community: Ansh Saini

Grow a Song: my run wrote its own soundtrack, with Gemma running on my phone

Ansh Saini — Sat, 10 Oct 2026 08:38:35 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge, Week 1: Touch Grass.

What I Built

On Friday morning I went for a 35 minute run. When I started, my song was a single low drone. By the time I got back it had pads, a bass line, drums, a kalimba melody, and ten seconds of the actual street I ran down mixed in underneath.

Grow a Song turns time outside into music. Every minute you spend outdoors in daylight adds a layer to today's track:

Outside time (20 min target)	Layer
0 min	drone
2 min	pads
5 min	bass
8 min	drums
13 min	melody
20 min	a field recording of where you are

If you stay inside all day, your song stays thin, and it only fills in once you get out. There's no way to skip ahead or buy layers, so the only way to hear the whole song is to go outside.

The composer is Gemma 3 1B, running on my iPhone 13 Pro. Before each walk or run it looks at the time of day, how high the sun is, what you're about to do, and how much you've been outside this week, then picks the key, scale, tempo, chord progression, instruments, a title and a one-line liner note. My run got this:

Ephemeral Echoes. D dorian, 160 bpm, chords 1 7 5 3, warm pads, pulse bass, driving drums, kalimba.
"The world stretches out beneath you, a slow, expectant invitation."

There's no account or server behind it, and after a one-time model download it works in airplane mode.

Demo

Here is the song from my run, rendered by the same engine the app uses, plus a version that replays the run with the layers arriving one at a time:

The numbers from that morning, pulled off the phone:

35.1 minutes counted as outside, 3.4 km
all 6 layers playing by the end (my target was 20 minutes)
a 10 second clip recorded at 7:40 AM, now the top layer of the song
Gemma's field note afterwards: "You ran 3.2 km. 'Ephemeral Echoes' is now a part of the recording." (Accurate in spirit. The distance is off by about 200 m, which is what you get from a 1B model writing journal entries.)

Code

ansh-saini / grow-a-song

Grow a Song

Your time outside becomes music.
Every minute outdoors adds a layer to today's song, composed on your iPhone by an open-weight model

Demo video · Listen to a real run · DEV challenge

What it does

Start a walk or a run. Your song begins as a single low drone. As you spend time outside, new layers fade in:

Share of your daily target	Layer
0 %	Drone
8 %	Pads
25 %	Bass
42 %	Drums
67 %	Melody
100 %	A 10 second field recording of where you are

Stay inside and your song stays thin. The only way to hear all of it is to go outside.

Before each outing, Gemma 3 1B runs on the phone and composes the song: key, scale tempo, chord progression, instruments, a title and a one-line liner note, based on the time of day, the sun's height, what…

View on GitHub

Swift, SwiftUI, AVAudioEngine, CoreLocation, CoreMotion, HealthKit and MLX Swift LM. The music engine is a plain Swift package with 37 tests, so most of it runs and tests on a Mac without a phone.

How I Built It

Gemma composes, Swift plays

I didn't want a 1B model generating audio or MIDI note by note. A model that small does fine at picking a mood and badly at keeping track of hundreds of notes, so Gemma makes about ten musical decisions and returns them as JSON:

{"title": "Ephemeral Echoes", "key": "D", "scale": "dorian", "bpm": 160,
 "progression": [1, 7, 5, 3], "pad": "warm", "bass": "pulse",
 "drums": "driving", "melody": "kalimba", "energy": 1.0,
 "liner_note": "The world stretches out beneath you, a slow, expectant invitation."}

A deterministic sequencer turns that into 16 bars of notes (melody in an A A' B A shape so it repeats enough to stick), and a small synth written from scratch plays it: detuned saw pads, an FM kalimba, a kick that's just a sine wave sweeping down from 155 Hz, and a reverb. The same spec always produces the same song, which turned out to matter later.

Getting reliable JSON out of a 1B model

My first eval on the Mac looked fine on the surface: 6 out of 6 songs were playable. Underneath, the schema-constrained decoding (MLX's MLXGuidedGeneration, built on XGrammar) was failing every time, and a fallback parser was quietly rescuing it.

Logging the partial output showed why. Gemma was emitting newline after newline. JSON allows unlimited whitespace, greedy decoding found that whitespace was always a legal next token, and it filled all 360 tokens with it. Adding the library's whitespace and closing-token biases fixed it:

	Before	After
Schema-guided success	0 / 6	6 / 6
Average compose time (M2 Pro)	9.5 s	4.4 s

The second problem was taste. Gemma picked D major pentatonic, chords 1 5 6 4, 60 bpm almost every time, including for a run. A 1B model leans hard on whichever option it reads first. So the prompt now shuffles the order of every option list, seeded by the current minute, and a small guard folds tempos into a range that fits the activity (a "75 bpm" run becomes 150). After that the same eval produced three keys, four scales and five different progressions in six songs.

Knowing you're outside without a light sensor

An Apple Watch measures time in daylight with its ambient light sensor, and the app reads that from HealthKit when it's there. But I wanted the app to work for anyone with just a phone, and iPhone apps can't read the phone's light sensor.

So the phone infers it. A minute counts when:

the sun is above civil twilight (-6 degrees), computed locally from time and location with the NOAA solar equations, and
CoreMotion says you're walking, running or cycling, or the GPS fix is accurate to 20 m (usually means open sky) and you're away from home.

Driving never counts. On first launch, CoreMotion's 7-day activity history gives you a week of estimated songs straight away. With a watch, the measured number takes over.

The bug that would have ended my run

I had a second AI agent review the code before the run. It found a real crash. iOS doesn't let background apps use the GPU. If I tapped Start and locked my phone while Gemma was still composing, MLX would hit that error and call fatalError, killing the app, the music and the minute counter all at once, a few seconds into the run.

The fix has three parts. Gemma only runs while the app is on screen, and a request made in the background waits until you open the app again. The screen stays awake for the few seconds composing takes. And every MLX call is wrapped in withError so a GPU failure becomes a Swift error and falls back to a built-in song instead of a crash. The music starts immediately with the drone either way, and Gemma's song takes over at the next 16-bar phrase boundary so nothing cuts off mid-note.

The same review caught that run progress was only saved when you tapped End, so it now saves every half minute.

Getting the song off the phone

After the run I wanted the song on my laptop, but I'd never exported it. Because the renderer is deterministic, I copied the day's record and the field clip off the phone over a cable and rendered the identical song on the Mac with the same engine. That's the audio linked above.

Built with an AI agent, tested by running

I built this in one long session with Claude Code: plan, code, test, review, fix. It set up a small harness (make test, make render, make eval, make device) so every change got checked against unit tests, rendered audio levels, and real Gemma output before it reached my phone. Then the real test was mine: put my shoes on and press Start.

Why Does Open Innovation Matter?

Grow a Song needs your location, your movement, sometimes your health data, and a microphone. That's a lot to hand to a server so it can pick a chord progression.

With an open-weight model running locally, none of that leaves the phone. GPS, motion, daylight minutes and the street recordings stay on the device, and there's no backend that could leak them.

It also works where runs actually happen. Trails and parks often have no signal, and after the 0.8 GB download the app doesn't need one.

Running the model costs me nothing, so Gemma can compose before every walk instead of me rationing requests. And because the model is one line of config, I can move to a bigger Gemma once one fits comfortably on a phone.

Prize Categories

Best Use of Gemma: Gemma 3 1B (QAT, 4-bit) runs fully on device through MLX Swift LM and composes every song with schema-guided JSON output.
Best Use of ElevenLabs: narration for the demo video. The app itself makes no network calls.

Built with Claude Code. I directed the project, tested it on my own run, and reviewed and edited this post.

pfft...yet another finance tracker? think again :)

Ansh Saini — Sun, 04 Oct 2026 18:05:20 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

Why I Built

Living in India, we heavily utilise UPI for payments. The introduction of UPI, and 10-minute delivery apps have made spending money so easy and comfortable that it has made spendings get a little out of hand. We don't realise how much money we're spending on a day-to-day basis. I noticed my dear friend/colleague Anmol also struggling to keep track of where his money went.

I personally have been using an Excel tracker for last few years. But I knew Anmol. He wouldn't find it appealing to manually categorize his expenses and create a budget. He's a guy who loves automations. He's the one who introduced me to the iOS Shortcuts app in the past. That got my gears turning. I knew I could use it to trigger an automation whenever a message arrives from a particular sender. I knew Anmol would want something that works seamlessly and requires minimal effort on his part.

What I Built

I built a privacy focused finance tracker (pfft...). How it stands out from the rest?

No manual entries required. It automatically reads bank transactions through your text messages.
Built with privacy in mind. The app never requests access to read all your messages. Just the ones you allow. Using "Automations" in the iOS Shortcuts app. The app only processes the messages you permit, ensuring your financial data remains private.
Uses AI to auto categorise transactions.

Demo

Click here to watch the video demo

Code

ansh-saini / pfft

pfft

Privacy Focused Finance Tracker. A personal finance tracker for India. An iPhone app reads bank SMS (ICICI, Axis), files each transaction into a category and asks you only when it isn't sure. The model that does the filing is open-weight and runs on a Mac at home, so no AI company sees your spending.

demo-compressed.mp4

How it works

iPhone (Shortcuts automation on a bank SMS)
   -> iOS app "Log Transaction" intent
   -> POST /api/v1/ingest   (Next.js API on Vercel)
   -> parse the SMS, store it in Supabase
   -> rules and your own filing history first
   -> otherwise ask the model (Tailscale Funnel -> llama.cpp llama-server, Qwen3-4B-Instruct, on a Mac's GPU)
   -> notification: what it was filed as, or "what was this for?"

Most transactions never reach the model. A description you've used before, a merchant rule, a payment that recurs every month or a merchant you…

View on GitHub

How I Built It

Building this project required several moving parts.

parser: I created message parsers that extract key information such as transaction amount, merchant name, and date from incoming SMS messages.
tagger: The categorisation is done by Qwen3-4B-Instruct, an open-weight model, served by llama.cpp's llama-server running on my own computer.
A beautiful iOS App: Let's be honest, liquid glass feels absolutely amazing to use.

Why Does Open Innovation Matter?

Privacy. SMS Transactions are sensitive and valuable data. By keeping the processing local and using open-weight models, users retain control over their financial information without relying on third-party servers.

My project idea is not unique. There are many products that do this. For example CRED Money. But they are highly invasive. They access your entire banking history, credit records, sometimes even full access to your email account to parse account statements.

What I Learned

New tech. This is my first time using an open-weight model. I learned how to set up a local model on my machine.
Cloud vs Local. Running models on the cloud is kinda slow and made me appreciate the speed and efficiency of my local Apple M2 Chip.
Tunneling. First time tunneled my Mac to the cloud. Learned how to securely expose local services using Tailscale Funnel.
Size matters. I tried a 1.7B model to go faster. It read the prompt 2.5 times faster, then ignored the length limit and wrote a massive piece of junk; 75% of the answers were unusable. The 4B model was the smallest one that behaved.
Hosting. I tried hosting on Render, but the latency was too high for my use case, so I reverted to running the model locally.

Anmol's Concern

Anmol, just like myself...is also a developer. The first question he asked me was, you're logging my transactions in your database? Privacy my foot!

I assured him that on-device storage is on its way. I used a cloud database for the initial implementation but even my eventual goal is to keep all the data on-device to maximise privacy. At least for now I've swapped out my Supabase credentials for his. So he can sleep peacefully knowing I don't have eyes on his bank balance 👀

Thanks to Anmol

Fun fact: Me being a web developer, this project was originally going to be a web app. But Anmol loves the Apple ecosystem. I knew he'd appreciate a clean liquid glass style apple design. He is always showing me examples of various apps in his phone "Look their UI is so clean, so beautiful", he says. So I knew this would be a big factor for him.
I have never built a native iOS app in my lifetime. So thank you Anmol for pushing my boundaries as well with this project.

Thank you for having the kind of taste that made me rebuild a webhook into a full-fledged iOS app.

WorkFlow. Your AI Powered Secretary.

Ansh Saini — Sun, 01 Sep 2024 17:01:00 +0000

This is a submission for the Nylas Challenge: AI Expedition.

What I Built and Why

When you unlock the power of accessing people's email, the possibilities become endless. I've created an assistant which has the email context of not just yourself, but your entire company! So in essence, it can act as a knowledge powerhouse for your entire organization.

WorkFlow is your ultimate personal secretary:

Effortlessly find the best time to meet with anyone.
Schedule meetings
Keep track of your daily tasks.
Instantly see who's on leave and even manage your own leaves.
Get information about colleagues at your fingertips.
Access critical company details like employee count, company vision, or who to reach out to for feedback.

And the cherry on top? It’s Channel Agnostic ✨! Whether it’s WhatsApp, Slack, Discord, or even a website or mobile app, WorkFlow integrates seamlessly with whatever communication platform you’re already using. Just plug it in and let it do the work!

Demo

To bring this to life, I’ve set up a website where you can interact with the assistant. I’ve also integrated it with WhatsApp to demonstrate just how effortlessly it connects with popular communication platforms.

WorkFlow

Your AI Powered Secretary. Delegate your mundane tasks like scheduling meetings, getting task summary, etc to WorkFlow.

workflow-ai-assistant.vercel.app

Here's a video demo

WhatsApp Integration

Code

ansh-saini / workflow-assistant

Your AI Powered Secretary.

WorkFlow. Your AI Powered Secretary.

I've created an assistant which has the email context of not just yourself, but your entire company! So in essence, it can act as a knowledge powerhouse for your entire organization.

This assistant is your ultimate personal secretary:

Effortlessly find the best time to meet with anyone.
Schedule meetings
Keep track of your daily tasks.
Instantly see who's on leave and even manage your own leaves.
Get information about colleagues at your fingertips.
Access critical company details like employee count, company vision, or who to reach out to for feedback.

And the cherry on top? It’s Channel Agnostic ✨! Whether it’s WhatsApp, Slack, Discord, or even a website or mobile app, this assistant integrates seamlessly with whatever communication platform you’re already using. Just plug it in and let it do the work!

View on GitHub

My Journey

The thing I loved about Nylas was the simplicity of APIs and SDKs. They were intuitive to use. I utilised various Nylas APIs to make the assistant capable of handling complex prompts.

Development and testing with Nylas was also straightforward. I liked that I could jump straight in using Test Grants. There was no barrier to entry.

It was a new experience for me to have control of users's email data. This project gave me a perspective on handling sensitive data and writing secure code with good practices.

This was my first time building an AI Agent. I loved that, through the medium of this challenge, I was able to push the limits of my boundaries and dive into seemingly overwhelming topics like Embeddings and RAGs. I've personally learned A LOT throughout the process of building this project.

Through this challenge I've come away with knowledge that I am surely going to implement in my personal as well work projects.

Technology & Integrations

Future Scope and Improvements

In future, If Nylas rolls out support for Storage access like Google Drive, Microsoft OneDrive, It can easily be integrated into WorkFlow. This will allow users to share files using the assistant.
Knowledge Store implementation using RAGs. Switching from a traditional database to a vector database will make the the assistant work much more efficiently and scale for large companies with hundreds of thousands of employees.

Thank You

A huge shoutout to Nylas and the DEV team for organizing such an incredible challenge! This experience has pushed me out of my comfort zone, allowing me to explore new technologies and grow as a developer.

Free up some space on your VS Code

Ansh Saini — Sun, 04 Aug 2024 08:35:20 +0000

This is the first of a series of opinionated posts that I'm going to make about becoming an absolute master of VSCode shortcuts.

This Activity Bar is just something that takes up screen real estate and honestly its just useless.

Just setup keyboard shortcuts for the tabs that you use. These are what I use.

Cmd + Shift + E: File Explorer
Cmd + Shift + F: Find in files (Already the default)
Cmd + Shift + G: Source Control
Cmd + Shift + A: Active pull request
Option + Shift + D: Debug Panel

For panels which you use often, but not on the daily (for example: the extensions panel), you can just use the command palette. Cmd + Shift + P and type 'focus on...'.

Now you can safely get rid of it and on the off chance you might need to access the Activity Bar, you can just use the command palette again to bring it back :)

Finally, a scalable folder structure for your frontend code

Ansh Saini — Sun, 04 Aug 2024 06:32:41 +0000

Problem with "pages"

Well, its simple. Not all features are pages. Then you end up developing features in your re-usable components folder.

Solution

A folder-based structure which aims to keep a feature and its dependencies together. I'll be referring to this structure as The Base in the rest of this post.

FolderName
├── index.tsx // Entry point
├── FolderName.module.css // Styles
├── components // Components that are specific to this feature
│   ├── ComponentName
│   │   ├── index.tsx
│   │   └── ComponentName.module.css
│   └── AnotherComponentName
│       ├── index.tsx
│       └── AnotherComponentName.module.css
├── hooks // Hooks that are specific to this feature
│   ├── useHookName.ts
│   └── useAnotherHookName.ts
├── utils // Utils that are specific to this feature
│   ├── utilName.ts
│   └── anotherUtilName.ts
└── assets // Assets that are specific to this feature
    └── someImage.png

The beauty of this structure is that if you don't need something, just don't create the folder for it.

Here's an example of a react app

src
├── components // Generic re-usable components
│   ├── ui
│   │   ├── Button
│   │   │   ├── index.tsx
│   │   │   └── Button.module.css
│   │   └── TextField
│   │       ├── index.tsx
│   │       └── TextField.module.css
│   └── Navigation
│       ├── Link
│       │   ├── index.tsx
│       │   └── Link.module.css
│       ├── BottomNavigation
│       │   ├── index.tsx
│       │   └── BottomNavigation.module.css
│       ├── TopNavigation
│       │   └── index.tsx
│       └── hooks
│           └── useExcludeShadow.ts
├── features
│   └── Notifications
│       ├── index.tsx
│       ├── Notifications.module.css
│       ├── components
│       │   ├── NotificationRowCard
│       │   │   └── index.tsx
│       │   ├── NotificationsList
│       │   │   ├── index.tsx
│       │   │   └── NotificationsList.module.css
│       │   └── NotificationsPopup
│       │       └── index.tsx
│       └── hooks
│           ├── useNotificationAction.ts
│           ├── useNotifications.ts
│           └── index.tsx
├── api
│   ├── axios.ts
│   └── resources
│       ├── auth
│       │   ├── index.ts
│       │   └── types.ts
│       ├── notifications
│       │   ├── index.ts
│       │   └── types.ts
│       ├── payment
│       │   ├── index.ts
│       │   └── types.ts
│       └── settings
│           ├── index.ts
│           └── types.ts
├── assets
│   ├── lotties
│   │   └── confetti.json
│   ├── icons
│   ├── placeholders
│   │   └── user-avatar-placeholder.svg
│   ├── fonts
│   │   ├── Inter.ttf
│   │   └── Switzer.ttf
│   ├── logos
│   │   ├── logo-primary.svg
│   │   ├── logo-stacked.svg
│   │   └── logo-alternate.svg
│   └── icons
│       ├── apple-icon.svg
│       ├── facebook-icon.svg
│       ├── google-icon.svg
│       ├── linkedin-icon.svg
│       ├── refresh-icon.svg
│       ├── telegram-icon.svg
│       └── whatsapp-icon.svg
├── global
│   ├── AppContext
│   │   ├── context.ts
│   │   └── index.tsx
│   ├── FeatureToggles
│   │   ├── useFeatureToggle.ts
│   │   └── index.tsx
│   └── UserPreferences
│       ├── useUserPreferences.ts
│       └── index.tsx
├── utils
│   ├── routes.ts
│   ├── formatDate.ts
│   └── hooks
│       ├── useArray.ts
│       └── useDeviceOrientation.ts
└── tracking
    ├── googleAnalytics.ts
    ├── firebaseTracking.ts
    └── useTracking.ts

This structure has been working and scaling well for us for over 3 years.
Let me know if you guys want a detailed explanation about the api setup. Maybe I'll convert this post into a series of chapters.

Ready for the iPhone 16?

Ansh Saini — Mon, 15 Jul 2024 00:15:33 +0000

This is a submission for the Wix Studio Challenge .

What I Built

Have you seen those long lines in front of stores before a sale is about to begin? That's exactly what I've built using Wix Studio.

The website showcases a landing page where the upcoming product is revealed. In this case, The iPhone 16 Pro. You can join the queue, you'll be assigned a position in the queue.
When the sale begins, you'll be emailed that its your turn to purchase.
Then you can access the website and make the purchase.

I've also added multiplayer cursors on the landing page for a sense of 'crowd'. I couldn't implement real-time cursors because I would need to use custom elements to make it work which was against the rules, so I had to compromise and just make some fake ones 😅.

Demo

Here's the link to the website

Development Journey

I was thinking of innovation on e-commerce websites, things that came to mind were 3D experiences within the website, or maybe Augmented Reality. I also thought of building a fancy landing page full of animations, but that wouldn't be something innovative in the shopping experience, that would just be a fancy landing page from which you click "Buy Now" and then its a standard checkout process.

So I thought of making an online store-front for a product launch. People can see each other's cursors moving around and they can reserve their spot in the queue.

This was my first time using Wix, or any low-code website builder.
I spent a few days consuming wix tutorials and blogs. Exploring Velo documentation to see what all possibilities are there. The tutorials were really helpful.

Took me a few days to get the hang of it. It was a nice challenge to accomplish everything "The Wix Way". Using $w instead of the JavaScript window.

After the user is authenticated, I save their position in the queue in a Velo Database

APIs

Velo Members API
Velo Databases and Permissions
Velo Products
Velo DOM apis to manipulate DOM elements

Some feedback for Wix

This was my first time using Wix Studio. The tutorial videos were really helpful, I didn't have to search for the tutorials for each thing I needed to do. They were right there in the platform itself. I loved that.
The tutorials were well made and covered decent variety of use cases
Managing store listings is really convenient. Adding products, managing inventory is really intuitive.
Keyboard shortcuts for hiding/revealing the code editor. Much needed.
There's no 'onMouseMove' event listener built-in to Velo. It prevented me from implementing real-time multiplayer cursors which I was really excited about. There is a workaround but it requires custom elements.

Recycling comes to WhatsApp ♻️

Ansh Saini — Fri, 21 Jun 2024 03:44:11 +0000

This is a submission for Twilio Challenge v24.06.12

What I Built 🛠️

A WhatsApp bot which gives you recycling ideas at your fingertips.
WhatsApp is such a popular and convenient platform, that almost everyone has it. Just message the bot and tell it what you want to recycle.
It works with text as well as images 🖼️✨

Motivation

Often times while cleaning my house, I come across stuff I don't need anymore. Wouldn't it be nice to just snap a picture with the most used app on my phone and get instructions on how to recycle it? Well, think no more...

Demo📱

Watch the full working demo on GitHub

Currently the app is running in a sandbox environment.
Text join want-correctly to +14155238886 OR scan the QR code below.

Link to code

ansh-saini / recycle-whatsapp-bot

This is my submission for the DEV Twilio Challenge

WhatsApp Recycle Bot ♻️

A WhatsApp bot which gives you recycling ideas at your fingertips. WhatsApp is such a popular and convenient platform, that almost everyone has it. Just message the bot and tell it what you want to recycle. It works with text as well as images 🖼️✨

Just tell it what you want to recycle

Even works with images!

View on GitHub

Twilio and AI ✨

I used the Twilio Messaging API to setup communication through WhatsApp. I've used Google Cloud Vision API to detect what object the sender has captured. Then I've engineered a prompt and fed that to Open AI's GPT 3.5 Turbo to get instructions on recycling the object.

Additional Prize Categories 🏆

Impactful Innovators

Some thoughts 🩵

Working with Twilio has been quite easy. Things are pretty straight forward. I absolutely loved the fact that I didn't have to provide any billing information to get started.
I was surprised by the simplicity of the steps needed to started with creating a WhatsApp Bot. Great job Twilio! Definitely going to continue using Twilio for building some cool stuff.
Thank you DEV Team for organising awesome contests like these :)

Deadlock

Ansh Saini — Thu, 13 Jun 2024 02:57:29 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

When two or more processes are unable to proceed because each is waiting for another to release a resource. It results in a stalemate where none can progress, requiring intervention like resource reallocation or termination to resolve.

A headless hook-based exam proctoring system with React

Ansh Saini — Thu, 16 Feb 2023 14:39:25 +0000

What I built

I built a headless online exam proctoring system using React.

Features

Force full-screen mode
Warns when user switches tabs
Prevents user from opening the context menu (menu opened by pressing right-click from the mouse)
Prevents user from copying website content
Works well with custom proctoring logic (which you might want to implement separately)
Webcam detection (Coming Soon)

Category Submission

SaaS Superstars✨

App Link

Checkout the demo app here

Screenshots

Description

This is a headless proctoring library which only gives you some flags. What you do with that information is totally upto you. The UI for handling various use cases is completely in your hands. For more details, check out the project README.

Link to Source

ansh-saini / react-proctoring

Headless proctoring system for react

Overview

This is a headless library which only gives you some flags. What you do with that information is totally upto you. The UI for handling various use cases is completely in your hands.

Features

Force full-screen mode
Warns when user switches tabs
Prevents user from opening the context menu (menu opened by pressing right-click from the mouse)
Prevents user from copying website content
Works well with custom proctoring logic (which you might want to implement separately)
Webcam detection (Coming Soon)

Why should you use this?

There are lots of browser specific issues that show up when you are working with browser APIs. This package tries to cover most if not all of them. So you can focus on whats actually important for your business. All features are set up in a way that you can opt out of any feature that you do not wish to use.

Why do

…

View on GitHub

Background

I was looking for a ready-to-use proctoring system for an online exam. I found a few solutions but all of them were coupled very closely with the UI. I could not find a headless proctoring system. So, I decided to build my own. It is perfect for having full control over the UI while reaping all the benefits of a proctoring system.

How I built it

I utilized Linode's web server to deploy the demo application to the web. I had never configured a web server before. I learnt how to do that from Linode's awesome documention.
I'm thinking of adding a face detection feature to this library. I'm planning to host machine learning models on Linode then use it as an API in this library.
I learned about various browser APIs. Like page visibility detection, requesting camera permissions, requesting full screen permission from the browser etc.
I learned about ways of getting around cross-browser issues when it comes to native APIs.

Final thoughts

This was my first time using Linode. Things were very easy to setup. I followed this guide to understand how to deploy my application. I think Linode is a great platform and I'm definitely going to figure out how to utilize my free $100 credit in a better way 😁

How to download fancy QR Codes with React

Ansh Saini — Sun, 08 Jan 2023 10:48:45 +0000

Generating QR codes on the web is easy. There are lots of libraries out there who help us do it. One of them is qrcode.react which we will be using for the purpose of this tutorial.

Code to download a plain QR Code

We're rendering a <canvas> element in the DOM using QRCodeCanvas supplied by qrcode.react. We can convert it to a png using JavaScript and then download it as a file.

// QRCodeDownload.tsx
import React from "react"
import { QRCodeCanvas } from "qrcode.react"

import Button from "components/Button"

const QRCodeDownload = () => {
  const url = "https://anshsaini.com"

  const downloadQRCode = () => {
    const canvas = document.querySelector("#qrcode-canvas") as HTMLCanvasElement
    if (!canvas) throw new Error("<canvas> not found in the DOM")

    const pngUrl = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream")
    const downloadLink = document.createElement("a")
    downloadLink.href = pngUrl
    downloadLink.download = "QR code.png"
    document.body.appendChild(downloadLink)
    downloadLink.click()
    document.body.removeChild(downloadLink)
  }

  return (
    <div className="p-3">
      <QRCodeCanvas id="qrcode-canvas" level="H" size={300} value={url} />
      <div className="my-5">
        <Button onClick={downloadQRCode}>Download QR Code</Button>
      </div>
    </div>
  )
}

export default QRCodeDownload

Voila✨ The QR Code is now saved in the file system as an image.

Taking it a step further

No one wants to share a QR code on its own. Its ugly. We want a nice UI surrounding the QR code, giving it some context. Maybe something like this:

Let's a create a wrapper component which will handle the styling. I'm using react-jss for styling but of course you can use whatever you want and style your QR Code however you like.

// QRCodeTemplate.tsx
import React, { FC, PropsWithChildren } from "react"

import DEV_RAINBOW_LOGO from "assets/qr_code/dev-rainbow.png"
import DEV_RAINBOW_BG from "assets/qr_code/dev-rainbow-bg.png"
import { createUseStyles } from "react-jss"

import Typography from "components/Typography"

const ICON_SIZE = 100

const useStyles = createUseStyles(theme => ({
  root: {
    backgroundImage: `url('${DEV_RAINBOW_BG}')`,
    maxWidth: 1060,
    maxHeight: 1521,
    borderRadius: "32px",
    border: "5px solid #EFEFF7",
    padding: theme.spacing(11),
  },
  logo: {
    boxShadow: "9px 3px 20px 1px rgb(0 0 0 / 10%)",
    height: 150,
    width: 150,
    borderRadius: 8,
  },
  icon: {
    borderRadius: 8,
    width: ICON_SIZE,
    height: ICON_SIZE,
    position: "absolute",
    // Need to offset the values due to `excavate: true` in qrcode.react
    top: `calc(50% - ${ICON_SIZE / 2 + 1}px)`,
    // Need to offset the values due to `excavate: true` in qrcode.react
    left: `calc(50% - ${ICON_SIZE / 2 - 5}px)`,
  },
  qrContainer: {
    position: "relative",
    backgroundColor: "#EFEFF7",
    borderRadius: "56px",
    margin: theme.spacing(8, 0),
    padding: theme.spacing(4),
  },
  qrInner: {
    backgroundColor: "white",
    borderRadius: "32px",
    padding: 90,
  },
  referredBy: {
    fontStyle: "normal",
    fontWeight: "600",
    fontSize: "24px",
    lineHeight: "29px",
    letterSpacing: "0.1em",
  },
}))

const QRCodeTemplate: FC<PropsWithChildren> = ({ children }) => {
  const classes = useStyles()
  return (
    <div className={classes.root} id="fancy-qr-code">
      <img alt="logo" className={classes.logo} src={DEV_RAINBOW_LOGO} />
      <Typography className="mt-7" variant="title1">
        To register, scan the QR Code.
      </Typography>

      <div className={classes.qrContainer}>
        <img
          alt="icon"
          className={classes.icon}
          height={ICON_SIZE}
          src={DEV_RAINBOW_LOGO}
          width={ICON_SIZE}
        />
        <div className={classes.qrInner}>{children}</div>
      </div>
      <Typography className={classes.referredBy} variant="emphasised">
        REFERRED BY
      </Typography>
      <Typography variant="largeTitle">Ansh Saini</Typography>
    </div>
  )
}

export default QRCodeTemplate

We can now pass our QR Code as children to the QRCodeTemplate

<QRCodeTemplate>
  <QRCodeCanvas
    // Passing image here doesn't render when we convert html to canvas. So, we handle it manually.
    // We are only using this prop for `excavate: true` use case.
    imageSettings={{
      src: "",
      x: undefined,
      y: undefined,
      height: 80,
      width: 80,
      excavate: true,
    }}
    level="H"
    size={640}
    value={url}
  />
</QRCodeTemplate>

Earlier we only had a canvas element in the DOM so we could directly convert it to a png. But now, our DOM includes HTML elements like <div>, <img> etc. for styling. So we need to parse our DOM as canvas and then convert it into a png. There's a libary which helps us do just that. html2canvas. We modify our downloadQRCode function such that first we get snapshot of our DOM as a canvas then we convert that into a png.

Final code

// QRCodeTemplate.tsx
import React from "react"

import html2canvas from "html2canvas"
import { QRCodeCanvas } from "qrcode.react"

import Button from "components/Button"
import QRCodeTemplate from "components/dashboard/QRCodeTemplate"

const QRCodeDownload = () => {
  const url = "https://anshsaini.com"

  const getCanvas = () => {
    const qr = document.getElementById("fancy-qr-code")
    if (!qr) return

    return html2canvas(qr, {
      onclone: snapshot => {
        const qrElement = snapshot.getElementById("fancy-qr-code")
        if (!qrElement) return
        // Make element visible for cloning
        qrElement.style.display = "block"
      },
    })
  }

  const downloadQRCode = async () => {
    const canvas = await getCanvas()
    if (!canvas) throw new Error("<canvas> not found in DOM")

    const pngUrl = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream")
    const downloadLink = document.createElement("a")
    downloadLink.href = pngUrl
    downloadLink.download = "QR code.png"
    document.body.appendChild(downloadLink)
    downloadLink.click()
    document.body.removeChild(downloadLink)
  }

  return (
    <div className="p-3">
      <QRCodeTemplate>
        <QRCodeCanvas
          // Passing image here doesn't render when we convert html to canvas. So, we handle it manually.
          // We are only using this prop for `excavate: true` use case.
          imageSettings={{
            src: "",
            x: undefined,
            y: undefined,
            height: 80,
            width: 80,
            excavate: true,
          }}
          level="H"
          size={640}
          value={url}
        />
      </QRCodeTemplate>
      <div className="my-5">
        <Button onClick={downloadQRCode}>Download QR Code</Button>
      </div>
    </div>
  )
}

export default QRCodeDownload

The Result

We have a beautiful QR code saved as a png. And with the power of React, we can create as many styles as we want.

Understanding stops property on LinearGradient in Flutter

Ansh Saini — Thu, 05 Jan 2023 05:53:31 +0000

This is what the official docs say

A list of values from 0.0 to 1.0 that denote fractions along the gradient.

Problem

Lets say we have to create a bar which has a gradient going from red -> green -> blue -> black.
The percentages are as follows:
10% red
30% green
40% blue
Rest of it black (20%)

We might write something like this:

LinearGradient(
  colors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.black,
  ],
  stops: [0.1, 0.4, 0.5, 0.2],
),

Here's what we get:
Of course this is not what we want.

How to fix it?

Before we jump into the solution let's look at the problematic code

LinearGradient(
  colors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.black,
  ],
  stops: [0.1, 0.4, 0.5, 0.2],
),

We have supplied stops=[0.1, 0.4, 0.5, 0.2]

How the `stops` property works

The stops property requires us to specify where the color should start from. So, if we have two colors, red and black and we want both of them to take 50% of the container, we can write

LinearGradient(
  colors: [
    Colors.red,
    Colors.black,
  ],
  stops: [0, 0.6],
),

Notice that I wrote 0.6 instead of 0.5. If we write 0.5, then it would look like a 40-60 split instead of 50-50.

0 to 0.5 would be red, then 0.6 to 1 would be black.
The following code would also give us the same result

LinearGradient(
  colors: [
    Colors.red,
    Colors.black,
  ],
  stops: [0.2, 0.6],
),

This is because as the docs mention, if the stops array doesn’t start with a 0, it implicitly means that it would start with 0 and the first color in the colors array. Same thing happens with last value of stops array. It should either explicitly end with a 1, or flutter will implicitly consider it as 1 with last color supplied in the colors array. So, actually flutter will interpret it as:

LinearGradient(
  colors: [
    Colors.red,
    Colors.red,
    Colors.black,
    Colors.black,
  ],
  stops: [0, 0.2, 0.6, 1],
),

Fixing the issue

Now that we know how the stops property works, we can get our desired gradient.

LinearGradient(
  colors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.black,
  ],
  stops: [0.1, 0.4, 0.8, 1],
),

Playground

I made a dartpad link if you want to play around with the examples above.

Multiplayer Logo Quiz? 😳

Ansh Saini — Tue, 10 May 2022 18:53:21 +0000

Overview of My Submission

Ever played Logo Quiz? Its a game where you see a logo and have to guess which brand owns that logo. I've played it a lot but have always felt that it would be more fun if I could play against my friends. That's exactly what "PvP Logo Quiz" is.

Submission Category:

🃏 Wacky Wildcards

Link to Code

ansh-saini / pvp-logo-quiz

Play Logo Quiz with Friends!

PVP Logo Quiz

Project setup guide

Install and run Appwrite.
Create a project on Appwrite.
Add a Web Platform to your project.
Head to API Keys section and create a new appwrite server key with the following permissions The command will fail if you have not provided the necessary permissions.

users.read, users.write, collections.read, collections.write, attributes.read, attributes.write, indexes.read, indexes.write, documents.read, documents.write.
Clone this repository
Create a copy of .env.example file. Rename it to .env and fill out the variables. You can find values for APPWRITE_ENDPOINT, APPWRITE_PROJECT on the Appwrite dashboard itself. APPWRITE_SERVER_API_KEY is the server API key secret that we generated. Rest of the variables will be generated by the setup script.
Run yarn setup. It will create the required collections and provide you with their unique IDs. Add them to your .env file. It will also add some logos to your database so you can get up and…

View on GitHub

Link to Website

PvP Logo Quiz

Play Logo Quiz with Friends!

pvp-logo-quiz.vercel.app

Additional Resources / Info

Tech Stack

🔥 Appwrite 🔥 (Backend)
Next.js (Frontend + Backend)
DigitalOcean + Vercel (Deployment)

Demo & Screenshots

Log in

Sign up

How to play

Home

Join Room

Share Room Code

Round in progress

Result

How it works

After creating an account or logging in on "PvP Logo Quiz", you can create a room and share the room code with your friends.
The game will start when all players have joined the room.
Players will be presented with 10 questions (logos). The first player to get the most questions right wins.
You only get three seconds to answer the question.
After the game ends for all players, you can see various stats like who won the game and how many questions each player got right and how much time they took overall.
Every thing is ✨Realtime✨. You can see you opponent's progress. And they can see yours ;)

Future Scope

✨Matchmaking✨. This will allow players to play with anyone in the world without needing to share an invite code.
Ability to have more than 2 players in a room.
Play as guest (No need to signup)
Ability to set number of questions per game.
Ability to play again in the same room.
Categories filter. Play a game with only a specific category of logos.
Mobile version so players can play on the go. 😁

Project Setup Guide

I have created a setup script. Just run one command and everything will be set up for you :).
See project README for more details.

Appwrite features used

Database
Authentication
Realtime
Users
Accounts

Thoughts about Appwrite

This was my first time using Appwrite. The tool is pretty awesome. It does so many things behind the scenes that would've taken ages to set up from scratch. Had an amazing time using Appwrite. However, there are a few things that I struggled with. Please please please let me know if there was something that I missed in the documentation which would have helped me with my problems. In no way I am trying to criticize Appwrite. This is just my personal feedback from using Appwrite to build this project.

I would've liked to have an option to list all documents of a collection. The limit of 100 seems like a good default. But it would be nice to be able to override it beyond 100.
Support for JSON field However, if I turn on Array mode for a string attribute, I can send a JavaScript Object as payload. It gets accepted but doesn’t show up properly in Appwrite admin. But when you retrieve it using the API, the data comes as it is. :)
It was a bit unclear to me how to verify the user's identity on my Next.js server. Reached out on Appwrite discord and someone told me that I needed to generate a JWT for the user and send it to my backend then I can perform actions on behalf of the user. I have personally never used this way for authorizing a user. It felt a little cumbersome.
Can’t use Query() with Users API :/ If I want to fetch data of two users, I have to write 2 get queries with their ID. I can not use the list API.
I accidentally exceeded the size limit of a string field. I got a very vague error (Generic 500 saying 'Internal Server Error') from which I was not able to figure out that I exceeding the size limit. I had to do some trial-and-error to figure out the root cause.
I was adding attributes to my collection from Appwrite admin. I was not able to add many attributes with a high size. This is not specified anywhere in the docs that I cannot add multiple high-value size fields. I got an error saying "Attribute limit reached." when I tried to add 2 fields with size=10000
db.getIndex function throws exception even when index exists. The API Key does have indexes.read and index.write permission. ```js

(await database.getCollection("6277923110f6559c7549")).indexes
// Response of getCollection
[
{
key: 'name',
type: 'unique',
status: 'available',
attributes: [ 'name' ],
orders: [ 'ASC' ]
}
]

// getIndex does not work on the same collection
await database.getIndex("6277923110f6559c7549", "name")
// Response of getIndex
AppwriteException [Error]: Index not found
at Client.call (\node_modules\node-appwrite\lib\client.js:162:31)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Database.getIndex (\node_modules\node-appwrite\lib\services\database.js:1046:16)
at async x (\setup.js:51:15) {
code: 404,
type: 'index_not_found',
response: {
message: 'Index not found',
code: 404,
type: 'index_not_found',
version: '0.13.4'
}
}

### Final Thoughts

This was my first time participating solo in a hackathon. Thank you so much Dev and Appwrite for this opportunity. I learned a lot of new things while building out this project. It was a lot of fun. Looking forward to using Appwrite in future projects.