DEV Community: Ansh Saini

I built the running coach that actually listens to your body

Ansh Saini — Sat, 17 Oct 2026 10:27:36 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

I run with Nike Run Club. It tracks every run well, but its plans aren't personal. They don't know my heart rate zones, my actual paces, or what my last few weeks looked like. A tempo session says "comfortably hard" whether my resting heart rate is 50 or 70, and the plan doesn't notice when I miss a week or double my mileage. I wanted a coach that looks at my data and changes the plan because of it.

OpenStride is an iOS running coach that reads your data from Apple Health and plans your week around it:

Heart rate zones from your resting HR and the highest HR seen in your own runs (Karvonen)
Pace zones from your best recent effort, or from pace plus heart rate when the effort wasn't all-out (Jack Daniels' VDOT)
Training load per run and your 7-day vs 28-day load ratio
HR drift between the first and second half of each run
How much of last week you actually did

Every week, Gemma (Google's open-weight model) reviews those signals, adjusts the plan, and tells you why in plain words. It runs on the iPhone through MLX, so the app needs no account or server. With the on-device model (the default), your health data stays on the phone.

Pricing

One-time purchase on the App Store and Google Play: $10 (₹599 in India). No subscription or account needed.

Adaptive training plans are already a paid category (Runna, TrainingPeaks), sold as monthly subscriptions. OpenStride can skip the subscription because the coach runs on the phone: after someone buys it, they cost nothing to serve. The app is iOS only today; the Play Store version comes with Android.

Here's how it would look on the App Store (full sample listing):

Demo

Demo page with the full 60 s video: ansh-saini.github.io/open-stride

Recorded on my iPhone with a runner who doubled their mileage last week. Gemma 3 4B runs on the phone; the planning step is sped up.

The week	A session	Signals	What the coach saw

Code

ansh-saini / open-stride

OpenStride

An AI running coach that reads your body and runs on your iPhone.

OpenStride reads your runs and heart rate from Apple Health, works out your zones and training load,
and plans each week with Gemma 3, an open-weight model running on the phone.

Demo video · Store listing · How it works · Results

Why

Nike Run Club plans are templates. They don't know your resting heart rate, your actual paces, or that you doubled your mileage last week. OpenStride builds the plan from your own numbers and changes it when they change.

What it reads	How
Heart rate zones	Resting HR and the highest HR seen in your runs	Karvonen method
Pace zones	Your best recent effort, or pace plus heart rate	Jack Daniels' VDOT
Training load	Every run's duration and heart rate	Banister TRIMP, 7-day vs 28-day ratio
HR drift	First half vs second half of

…

View on GitHub

How I Built It

I created several modules which work together in steps to deliver an optimial running plan:

CoachKit (pure Swift, unit tested) computes zones, paces, load and drift, then builds a draft week: phase (base, build, peak, taper), weekly volume, a long run, quality sessions.
Code turns the metrics into signals with fixed thresholds, each one OK or FLAG. For example: acute_chronic_load_ratio = 1.98 -> FLAG: above 1.5, injury risk.
Gemma decides. It sees the signals and the draft, and picks from a small action set: cut volume, slow easy pace, make_easy, shorten or drop a day, each with a reason.
Guardrails apply the decision and override anything unsafe. No flag means the draft stands. A flag with too small a response gets a floor. The long run can't be dropped.
Gemma explains. A second call writes the note from facts that code computed by diffing the draft against the final plan. Code writes the first sentence ("Your heart rate drifted 7.7% during recent runs."), and Gemma continues it. The note always matches what you see.

If the model fails, a rule-based coach writes the week, so the week still gets planned.

An eval harness

I built six synthetic runners with seeded histories and an expected coach behavior for each:

Runner	Signal	A good coach should
steady	all in range	keep progressing
overreaching	load ratio 1.98	cut volume, max one hard day
detrained	21 days off	no hard sessions
hr_drift	7.7% drift	slow easy pace
missed_sessions	did 20% of last week	not add volume
beginner	8 km a week	progress gently

coach-eval runs them through Ollama, and mlx-eval runs them through the exact MLX weights the phone uses. Each run is scored on whether the decision parsed, whether the final plan is right, whether the model got it right without a guardrail floor, and whether the note cites a real number.

Coach	Runs	Valid	Final plan right	Model right on its own	Note matches plan	Note cites the flagged number	Avg time
rules	6	100%	100%	100%	100%	100%	0.0s
gemma3:1b (Ollama)	18	100%	100%	33%	100%	100%	1.0s
gemma3:4b (Ollama)	18	100%	100%	100%	100%	100%	4.8s
Gemma 3 4B (on-device)	18	100%	100%	100%	100%	100%	8.0s
Gemma 3 1B (on-device)	18	100%	100%	33%	100%	100%	4.3s

Real data is messier than test data

My own runs exposed two things the personas didn't. None of my runs from the last four weeks have heart rate recorded, so there's no drift signal, and the coach has to work without it. And my "best effort" wasn't all-out, so the race formula underrated my fitness. Now, when heart rate exists, VDOT is also estimated from pace and heart rate reserve, and the higher estimate wins.

Stack

SwiftUI, HealthKit, Swift Charts, XCUITest on simulator and device, MLX Swift LM with mlx-community/gemma-3-text-4b-it-4bit (2.6 GB, downloaded once), Ollama for the simulator and evals, XcodeGen.

Why Does Open Innovation Matter?

Privacy that holds up. Heart rate, resting heart rate and VO2 max are health data. With an open-weight model on the device, the coach has no server to send your data to. A closed API needs one.

Zero marginal cost. Every plan runs on the phone's GPU. No per-token bill means a solo developer can price this as a one-time purchase instead of a subscription that has to cover inference.

Works offline. After the one-time download it works on a trail with no signal, which is where runners are.

Inspectable and swappable. The Insights screen shows exactly what the coach saw and what it answered. Because the weights are open, I could test the same model on my Mac, in the simulator and on the phone, and I can swap in a newer Gemma or a fine-tune without changing the app.

Injury Prevention

The most common mistake runners make is doing too much too fast. A good week feels great, so the next one gets longer and faster, and the body's tendons and bones can't keep up with the lungs. A static plan can't see that coming. OpenStride watches for it every week:

It measures the jump. The load ratio compares your last 7 days of training to your 28-day average. Above 1.3, the coach cuts next week's volume by at least 10%. Above 1.5, it cuts at least 20% and allows only one hard session.
It progresses slowly. Weekly volume builds about 8% at a time from your 4-week average, so one big week doesn't become the new normal. A guardrail caps any week at 110% of that average plus 2 km, whatever the model asks for.
It plans recovery weeks. Every fourth week drops volume by 20%.
It caps the long run. The long run can't be more than 15% plus 1 km longer than your longest run in the last four weeks.
It spaces hard days. Hard sessions never fall on back-to-back days, there are at most two a week, and in the base phase, runners under 15 km a week get easy running only.
It respects time off. After 14 or more days without running, the plan starts from half your recent 4-week average with no hard sessions.
It listens to your heart. When your heart rate drifts more than 5% during easy runs, it slows your easy pace.
It reacts to missed weeks. If you finished less than 60% of last week, the next week gets lighter instead of trying to catch up.

In the demo, the runner doubled their mileage in one week (load ratio 1.98). The draft plan had 31 km for the next week; the coach cut it to 25 km, kept one hard day, and explained why in the note.

My First User

My first user is me. I ran the device test on my own iPhone with two months of my real runs: 22 runs, mostly 3 to 5 km, averaging about 14 km a week.

What it got right: it planned four easy runs and a slightly longer Sunday run, about the same volume I've been doing, at an easy pace close to how I actually run. No signals were flagged, and the note said so instead of inventing a problem.

What it taught me: the first estimate of my fitness was too low, because my "best" run wasn't an all-out effort. That's why the app now also estimates fitness from heart rate. And none of my runs since September 21 have heart rate recorded, so there's no drift to read and the coach is working with less than it could.

Next Steps

I had a ton of fun building this project as it solves a real problem for me, and I know for a fact that many people face this problem. I'm super excited to integrate this with Apple Watch and seeing how that transforms my running experience. It will give me access to real-time heart rate tracking and session feedback, ensuring the coach receives complete data for more accurate planning. Maybe the coach can say "Hey you're going too fast, slow down" into my earphones during my run itself.

Prize Categories

Best Use of Gemma: Gemma 3 4B runs on the iPhone through MLX as the coach. Gemma 3 1B and Ollama-served Gemma are the fallbacks.

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.