DEV Community: Shivam Sharma

What I learned building a payments page with no payment processor - A free, self-hosted, zero commission donation platform

Shivam Sharma — Tue, 11 Aug 2026 07:01:09 +0000

I just shipped buy-me-a-chai: an open-source "Buy Me a Coffee"-style donation page for Indian creators that charges 0% commission, forever. Not as a promotion — as architecture. There is no backend, no database, no accounts, and no payment processor anywhere in the project. It's a static site template: fork it, edit one YAML file, deploy free on GitHub Pages, and donors pay your bank account directly.

Building a payments page with no payment infrastructure sounds like a contradiction. It's not — but only because of one deliberate trade-off, and getting there taught me more about URL encoding, mobile browser policy, and Unicode than any project I've done. Here's the tour.

Template Repo: github.com/ShivamS136/buy-me-a-chai
Demo Page: shivams136.github.io/buy-me-a-chai
My Chai Page: shivams136.github.io/chai-for-me

UPI in 90 seconds (for readers outside India)

UPI (Unified Payments Interface) is India's instant payment system — public infrastructure that moves money bank-to-bank in seconds, for free, between any two people. It processes more transactions than any comparable system on earth, and the street vendor selling you chai accepts it via a paper QR code taped to their cart.

That QR code encodes a standardized URI:

upi://pay?pa=creator@bank&pn=Creator%20Name&am=150.00&cu=INR&tn=Thanks%20for%20the%20blog

pa is the payment address (a "VPA" like shivam@okaxis), am the amount, tn a note. Any UPI app — Google Pay, PhonePe, Paytm, BHIM — opens this URI with everything pre-filled. The payer confirms with their PIN, and money moves directly between bank accounts.

Read that again: a plain-text URI is a complete payment request. No API keys, no SDK, no server. My entire "payments integration" is string concatenation.

The trade-off that makes 0% possible

So why do donation platforms in India still take ~5% of a ₹20 chai?

Because UPI person-to-person payments have no callback API. Nothing tells your page "payment completed." To confirm payments you must become a payment aggregator — a regulated intermediary the money routes through — and that's where commissions, KYC, and platform risk come from.

Every platform treats the missing confirmation as the gap they exist to fill. I went the other way: accept that the page never knows whether anyone paid. In exchange:

No money ever touches the project → nothing to take a cut of
No server → nothing to host, nothing to breach, ₹0/month
No accounts → nothing to sign up for, no donor data at all

The constraint isn't a limitation of the product. The constraint is the product. (It also imposes an honesty rule that's now a hard rule in the repo: the page must never show "Thank you for your donation!" — we can't know. The most it says is: "QR scanned? Payment happens in your UPI app.")

Landmine #1: `URLSearchParams` silently corrupts UPI links

The obvious way to build that URI is the standard library:

const params = new URLSearchParams({ pa: vpa, pn: name, tn: note });
`upi://pay?${params}`;

Don't. URLSearchParams implements the WHATWG form-urlencoded serializer, which encodes a space as +:

new URLSearchParams({ tn: 'thanks for the blog' }).toString();
// "tn=thanks+for+the+blog"

encodeURIComponent('thanks for the blog');
// "thanks%20for%20the%20blog"

UPI apps decode the query string with plain percent-decoders. They do not treat + as a space. So the donor's note — and worse, the creator's name on the payment screen — shows up as thanks+for+the+blog. It looks broken at the exact moment someone is deciding whether to send you money.

The fix is encodeURIComponent, plus escaping the five characters it leaves alone (!'()*) so the payload is strictly RFC 3986 unreserved:

export const encodeUpiComponent = (value: string): string =>
  encodeURIComponent(value).replace(
    /[!'()*]/g,
    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
  );

One more subtlety: encode pn and tn only. The VPA in pa is emitted verbatim — percent-encoding its @ breaks apps with naive parsers that never decode the field.

Landmine #2: the deeplink that fails silently

On mobile, the dream UX is a "Pay now" button that's just <a href="upi://pay?...">. Tap, UPI app opens pre-filled, done.

Here's what the docs won't tell you: Google Pay and PhonePe restrict upi:// intents launched from mobile browsers to personal (non-merchant) VPAs. It's an anti-fraud policy, it's undocumented, and it fails silently — sometimes nothing happens, sometimes the app opens and ignores the amount, sometimes you get a cryptic "exceeds limit for this merchant" for someone who isn't a merchant.

You cannot fix this from a web page. What you can do is stop pretending. The design that survived:

The QR code and Copy UPI ID button are the primary paths — they work everywhere, because scanning from inside a UPI app isn't subject to browser-intent policy.
The deeplink still exists, but demoted: mobile-only, visually the quietest element, labeled honestly ("works on most UPI apps").
Nothing is ever hidden behind the deeplink — that's a hard rule in the repo, because a fallback you reach after a silent failure is a fallback nobody finds.

There's a related trap in the URI itself: never add merchant params (mc, tr) to a P2P intent — they can trigger merchant-verification failures against unregistered VPAs. And amounts are whole rupees only: several apps drop or round the paise component of am on P2P intents, and "₹1.50 on the page, ₹1 in the app" is a trust break I have no confirmation channel to even detect.

The scariest bug class: a typo'd payment address

A one-character typo in a UPI ID doesn't error. It sends every donation to a stranger, unrecoverably. For a template that thousands of people configure by hand, this is the catastrophic failure mode — so it's defended twice:

1. An invalid VPA fails the build, not the donor. The config file is parsed with Zod inside a Vite plugin, and a throw during the build is the feature:

✖ chai.config.yaml invalid:
  creator.vpa       → Invalid UPI ID "shivam okaxis". Expected format
                      like name@bank. Double-check in your UPI app → profile.
  chai.basePrice    → Expected integer ≥ 1, got 0

Every error reports at once (not fail-fast — a config with two problems should say both), unknown keys get Levenshtein-powered "did you mean creator?" suggestions, and because validation runs at build time, Zod never ships to the browser — the page receives a plain, already-validated object.

One rule I had to stop myself from adding: no case normalization. VPAs are case-insensitive, but silently rewriting what the creator typed is exactly the class of mutation this bug lives in. Validate loudly; never "fix" quietly.

2. The ₹1 self-test. The setup guide's final step is mandatory: scan your own live QR and send yourself ₹1 before sharing the page. Software validation proves the format; only a real payment proves the destination.

Bonus round: the note field is a Unicode minefield

The donor's message rides along as tn. Sanitizing 60 characters of free text turned out to be its own adventure:

Bidi override characters (U+202E and friends) inside a note can visually reverse the text shown in the payer's app — a spoofing vector, stripped.
But you can't blanket-strip "invisible" characters: ZWNJ is semantically required in Devanagari conjuncts, and ZWJ is how family and profession emoji compose. Strip those and you've corrupted every Hindi note. 🙃
Truncation slices code points, not UTF-16 units — cutting a surrogate pair in half leaves a lone surrogate, and encodeURIComponent throws on one. Since the URI rebuilds on every keystroke, that's a crash in a React render path, triggered by typing an emoji in the wrong spot.

What shipped

A page that renders a live QR (client-side, regenerated on every amount/note change), a one-tap Copy UPI ID, and an honestly-labeled deeplink — all pointing at a UPI ID that provably parsed, on a site with no backend to pay for or trust. Vite + React + TypeScript + Tailwind, MIT-licensed, ~100% branch coverage on the URI builder because string concatenation is the entire payment stack.

ShivamS136 / buy-me-a-chai

Zero commission. Zero platform. Zero signup. Your donation page, your UPI, your host.

☕ buy-me-a-chai

Zero commission. Zero platform. Zero signup. Your donation page, your UPI, your host.

A self-hosted "Buy Me a Chai" page for Indian creators. Fork it, edit one config file, deploy free on GitHub Pages or Vercel. Donors pay you directly over UPI — scan a QR, copy your UPI ID, or one-tap into their UPI app. No middleman ever touches the money, so no one can take a cut.

Why not Buy Me a Coffee / buymeachai.in / chai4.me? They sit between you and your supporters — commissions, bugs, privacy questions, platform risk. UPI P2P is already free and instant. This project just gives it a beautiful, embeddable face that you own.

🔗 Live demo — this repo, deployed as-is

Features

🪙 True 0% fees — plain UPI P2P (upi://pay intents). We can't take a cut of what we never touch.
⚡ Live in ~15 min —…

View on GitHub

One ask. Per-app upi:// deeplink behavior (GPay vs PhonePe vs Paytm vs BHIM, Android vs iOS) is the worst-documented thing on the Indian internet, and I'm building a community-sourced compatibility matrix in the repo's COMPAT.md. If you have a UPI app and 30 seconds, the live demo plus an issue report would genuinely help.

And if this saved you a platform commission — you know exactly what kind of page to thank me on. ☕

Run Android Emulator (AVD) Without Installing Android Studio — Updated Guide (Android CLI Edition)

Shivam Sharma — Thu, 21 Nov 2024 16:09:12 +0000

Android Studio bundles the AVD (Android Virtual Device) Emulator, but if all you need is an emulator — for React Native, Flutter, CI pipelines, or plain APK testing — installing the full IDE is overkill. Google officially supports a command-line-only workflow, and with the release of Android 17 (June 2026) they've shipped a new unified Android CLI (android binary) that makes this even cleaner.

This guide works on macOS (Intel & Apple Silicon) and Linux, and reflects Google's current recommendations:

The new android CLI is now the primary tool — sdkmanager is officially deprecated (android sdk replaces it). Legacy commands still work, but new setups should use the new CLI.
New package syntax uses / separators (platforms/android-36) instead of the old ; — no more quoting gymnastics in your shell.
ANDROID_HOME is the recommended SDK variable; ANDROID_SDK_ROOT is deprecated (this reversed from a few years ago — many old guides get this backwards).
Command line tools must live under cmdline-tools/latest/ — officially documented layout.
JDK 17+ is the baseline. You don't need Oracle JDK — any OpenJDK build works.
Pick your system image ABI by CPU: arm64-v8a for Apple Silicon, x86_64 for Intel Macs and most Linux machines. A mismatched ABI runs painfully slow or not at all.

1. Install Java (JDK 17 or newer)

The SDK tooling is Java-based. Install any OpenJDK 17+ build:

macOS (Homebrew, recommended):

brew install --cask temurin@21

Ubuntu/Debian:

sudo apt-get install openjdk-21-jdk

Verify:

java -version

Prefer Homebrew/apt over the Oracle installer — easier upgrades, no license prompts, and JAVA_HOME tooling (/usr/libexec/java_home on macOS) picks it up automatically.

2. Download the Command Line Tools

Go to the Android Studio download page → scroll to "Command line tools only".
Download the zip for your OS (commandlinetools-mac-*_latest.zip or commandlinetools-linux-*_latest.zip).
Create your SDK directory and extract there:

# macOS convention (same location Android Studio would use):
mkdir -p ~/Library/Android/sdk
# Linux convention:
# mkdir -p ~/Android/sdk

unzip commandlinetools-*_latest.zip -d ~/Library/Android/sdk

Restructure into latest/ — this exact layout is required by Google's docs, otherwise you'll hit the infamous "Could not determine SDK root" error:

cd ~/Library/Android/sdk/cmdline-tools
mkdir latest
mv bin lib NOTICE.txt source.properties latest/

Final path check — both of these must exist:

~/Library/Android/sdk/cmdline-tools/latest/bin/android      # new CLI
~/Library/Android/sdk/cmdline-tools/latest/bin/sdkmanager   # legacy (deprecated)

3. Set Environment Variables

Add to ~/.zshrc (or ~/.bashrc):

######## Android ########
export ANDROID_HOME="$HOME/Library/Android/sdk"   # Linux: $HOME/Android/sdk
export PATH="$ANDROID_HOME/cmdline-tools/latest/bin:$PATH"
export PATH="$ANDROID_HOME/platform-tools:$PATH"
export PATH="$ANDROID_HOME/emulator:$PATH"

Do NOT set ANDROID_SDK_ROOT anymore. It's deprecated, and if both variables are set and ever disagree, Gradle/Android tooling will warn or fail. ANDROID_HOME alone is correct today.

Reload and verify:

source ~/.zshrc
android --version        # new CLI
android info             # shows which SDK path is in use

Keep the CLI itself current with:

android update

4. Install Emulator, Platform Tools & a System Image

platform-tools gives you adb; emulator is the emulator engine itself. Note the new / package syntax — no quotes needed:

android sdk install platform-tools emulator

Now install a system image for Android 16 (API 36 — the latest stable-channel SDK level). Pick the ABI matching your CPU:

# Apple Silicon (M-series):
android sdk install system-images/android-36/google_apis_playstore/arm64-v8a platforms/android-36

# Intel Mac / Linux x86_64:
android sdk install system-images/android-36/google_apis_playstore/x86_64 platforms/android-36

Which image variant?

Variant	Use when
`google_apis_playstore`	You need Play Store apps. adb root is disabled on these images.
`google_apis`	You need Google APIs + root access for debugging. Best for most dev work.
`default` (AOSP)	Lightest, no Google services.

Explore what's available (supports regex patterns):

android sdk list system-images         # filter by pattern
android sdk list --all                 # everything
android sdk update                     # update all installed packages
android sdk remove <package-name>      # uninstall a package

android-36 = Android 16, the latest API level with stable-channel SDK packages as of this writing. Android 17 (API 37) has shipped as an OS, but its SDK platform/system images may still be in pre-release channels — verify with android sdk list before defaulting to it (see next section).

Testing newer releases (API 37 / 37.1)

Android now ships a major SDK release in Q2 and a minor one in Q4 (API 37 = Android 17; API 37.1 expected ~December 2026 with Android 17 QPR2). Until a level's packages reach the stable channel, they only exist under --beta/--canary — the new CLI makes opting in trivial:

# Check which channel a given API level is actually in:
android sdk list --beta --canary system-images

# Install a pre-release image (drop --beta once it reaches stable):
android sdk install --beta system-images/android-37/google_apis_playstore/arm64-v8a platforms/android-37
# fall back to --canary if it's not in beta yet

Then create a separate AVD against it — keep your stable API 36 device untouched so you always have a known-good baseline:

avdmanager create avd \
  --name "Pixel9_API37_preview" \
  --package "system-images;android-37;google_apis_playstore;arm64-v8a" \
  --device "pixel_9"

Once API 37 packages reach stable, just swap android-36 → android-37 everywhere in this guide.

Legacy equivalents (sdkmanager — deprecated but still functional)

sdkmanager "platform-tools" "emulator"
sdkmanager "system-images;android-36;google_apis_playstore;arm64-v8a" "platforms;android-36"
sdkmanager --licenses

5. Create the AVD

Option A — New CLI (quick, profile-based):

android emulator create --list-profiles          # see available device profiles
android emulator create --profile=medium_phone   # creates the device
android emulator list                            # verify

Option B — avdmanager (fine-grained control over device + system image pairing):

Still fully supported, and useful when you need a specific Pixel profile matched to a specific system image:

avdmanager list device

avdmanager create avd \
  --name "Pixel9_API36" \
  --package "system-images;android-36;google_apis_playstore;arm64-v8a" \
  --device "pixel_9"

When asked "Do you wish to create a custom hardware profile?" — say no. Tweak later in ~/.android/avd/<name>.avd/config.ini:

hw.ramSize=4096
hw.keyboard=yes
hw.gpu.enabled=yes
hw.gpu.mode=auto
disk.dataPartition.size=8G

hw.keyboard=yes is what lets you type with your laptop keyboard — it's off by default when you decline the custom hardware profile. See §7.

6. Run the Emulator

New CLI:

android emulator start medium_phone       # or your AVD name
android emulator stop emulator-5554       # stop by serial number

Known issue: android emulator commands are currently disabled on Windows — Windows users should use the legacy emulator command below.

Legacy launcher (still needed for advanced flags):

emulator -avd Pixel9_API36 -no-snapshot-load

Handy flags for the legacy launcher:

Flag	What it does
`-no-snapshot-load`	Cold boot (fresh state) instead of resuming a snapshot
`-no-snapshot`	Don't load or save snapshots at all
`-gpu host`	Force host GPU acceleration (default `auto` is usually fine)
`-netdelay none -netspeed full`	No simulated network throttling
`-wipe-data`	Factory reset the AVD on boot
`-no-window`	Headless mode — perfect for CI

Verify adb sees the running device:

adb devices

7. Type With Your Laptop Keyboard

Out of the box you'll be pecking at the on-screen keyboard with your mouse, which gets old within about thirty seconds. Hardware keyboard passthrough is a per-AVD setting (hw.keyboard), and it's disabled by default on AVDs created through avdmanager when you decline the custom hardware profile.

Enable the flag

# Path matches your AVD name; new-CLI profiles live here too (e.g. medium_phone.avd)
CFG=~/.android/avd/Pixel9_API36.avd/config.ini

# Replace if present, append if not
grep -q '^hw.keyboard=' "$CFG" \
  && sed -i '' 's/^hw.keyboard=.*/hw.keyboard=yes/' "$CFG" \
  || echo 'hw.keyboard=yes' >> "$CFG"

grep '^hw.keyboard' "$CFG"

sed -i '' is the BSD/macOS form of in-place edit — on Linux use plain sed -i.

The related keys, for reference:

hw.keyboard=yes
hw.keyboard.charmap=qwerty2
hw.keyboard.lid=no

charmap is already qwerty2 on modern images; only touch it if keys land in the wrong place.

Cold boot — this is the step people miss

config.ini is read at boot, and a Quick Boot snapshot restores the previous hardware config wholesale. Restart normally and the flag will appear to do nothing:

emulator -avd Pixel9_API36 -no-snapshot-load

Any snapshots you saved before this change still carry the keyboard-less config — re-record them after cold booting once.

Hide the on-screen keyboard

Even with hardware keys working, Android keeps the soft IME up by default and it eats half the screen:

adb shell settings put secure show_ime_with_hard_keyboard 0

Or via the UI: Settings → System → Keyboard → Physical keyboard → Show virtual keyboard (off). Set the value back to 1 when you specifically want to test IME layout and window-inset behaviour in your app.

This is a secure setting on the userdata partition, so -wipe-data resets it — add the adb line to your boot script if you script your runs.

What routes where

Typing, Backspace, Tab, Enter and the arrow keys all go into the focused field. A few keys are claimed by the emulator itself rather than by Android — the ones you'll notice on macOS:

Key	Goes to
`Cmd + C` / `Cmd + V`	Host↔guest clipboard sharing (enable under Extended controls → Settings if unresponsive)
`Esc`	Back
`F2` / `Cmd + P`	Power button
`Ctrl + Cmd + arrows`	Rotate / fold

If a keystroke gets swallowed by host window focus, fall back to adb — also the right choice for anything scripted or repeatable:

adb shell input text 'hello%sworld'          # %s encodes a space
adb shell input keyevent KEYCODE_TAB
adb shell input keyevent KEYCODE_ENTER

Troubleshooting

`Error: Could not load devices from .../devices.xml`

You may hit this when creating an AVD:

Error: Could not load devices from <sdk>/system-images/android-36/google_apis_playstore/arm64-v8a/devices.xml

Cause: avdmanager scans every installed system-image directory for an optional devices.xml (extra device definitions), but some cmdline-tools builds treat the missing file as fatal instead of skipping it. Google ships this file in some image zips and not others (the android-36 playstore arm64 r07 image, for example, doesn't include it) — so a perfectly good download still fails.

Fix: drop an empty-but-valid stub into the image directory — avdmanager just needs parseable XML, and device profiles like pixel_9 come from its built-in list anyway:

cat > $ANDROID_HOME/system-images/android-36/google_apis_playstore/arm64-v8a/devices.xml << 'EOF'
<?xml version="1.0" encoding="UTF-8"?>
<d:devices xmlns:d="http://schemas.android.com/sdk/devices/7"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
</d:devices>
EOF

(Adjust the path if your image variant/ABI differs. If you get a schema/namespace error after this, change devices/7 to devices/8 in the stub.)

Then clean up any half-created AVD from the failed attempts and recreate — don't just re-run with --force, as that can carry the broken state forward:

avdmanager delete avd --name "Pixel9_API36" 2>/dev/null
rm -rf ~/.android/avd/Pixel9_API36.avd ~/.android/avd/Pixel9_API36.ini

avdmanager create avd \
  --name "Pixel9_API36" \
  --package "system-images;android-36;google_apis_playstore;arm64-v8a" \
  --device "pixel_9"

Still stuck? Two escape hatches: use the new CLI's own creation path, which doesn't trip on this (android emulator create --profile=medium_phone), or install the google_apis (non-playstore) image variant, which is a different zip and often ships the file.

`Error: Could not determine SDK root`

Your cmdline-tools aren't in the latest/ sub-directory. Revisit step 2.4 — the binaries must live at cmdline-tools/latest/bin/, not cmdline-tools/bin/.

AVD created but `emulator -list-avds` shows nothing

Some environments split AVD storage between ~/.android/avd and ~/.config/.android/avd. Check both, and if needed pin the location explicitly by exporting ANDROID_AVD_HOME="$HOME/.android/avd" in your shell profile.

Laptop keyboard still does nothing after setting `hw.keyboard=yes`

Almost always a stale Quick Boot snapshot restoring the old hardware config. Boot with -no-snapshot-load (or -no-snapshot to also stop it saving state on exit). Also confirm you edited the config.ini of the AVD you're actually launching — ~/.android/avd/<name>.avd/config.ini, not the <name>.ini pointer file that sits beside it.

Hardware Acceleration Note

Apple Silicon Macs: acceleration works out of the box via the Hypervisor framework — use arm64-v8a images.
Intel Macs: use x86_64 images; Hypervisor.framework is used automatically (HAXM is dead/deprecated).
Linux: ensure KVM is enabled: sudo apt install qemu-kvm and add yourself to the kvm group (sudo adduser $USER kvm), then re-login.

Without acceleration the emulator is unusably slow, so don't skip this if things feel sluggish.

Bonus: What Else the New CLI Does

The android CLI goes beyond SDK/AVD management — worth knowing even for emulator-only setups:

android run --apks=app-debug.apk          # deploy an APK to a device/emulator
android screen capture --output=ui.png    # screenshot a connected device
android docs search 'emulator performance' # search official Android docs from terminal
android create --output=./my-app          # scaffold a new project from a template

Set persistent defaults in ~/.androidrc (one flag per line), e.g. --sdk=<path> to pin an SDK.

Steps Summary (TL;DR)

Install JDK 17+ — brew install --cask temurin@21 / apt install openjdk-21-jdk
Download Command line tools only, extract to ~/Library/Android/sdk (Linux: ~/Android/sdk)
Restructure: contents of cmdline-tools/ → cmdline-tools/latest/
In ~/.zshrc, set only ANDROID_HOME (not ANDROID_SDK_ROOT) and add cmdline-tools/latest/bin, platform-tools, emulator to PATH
source ~/.zshrc → verify with android --version → android update
android sdk install platform-tools emulator
android sdk install system-images/android-36/google_apis_playstore/arm64-v8a platforms/android-36 (use x86_64 on Intel/Linux)
Create AVD: android emulator create --profile=medium_phone — or avdmanager create avd --name "Pixel9_API36" --package "system-images;android-36;google_apis_playstore;arm64-v8a" --device "pixel_9" for full control
Enable the laptop keyboard: set hw.keyboard=yes in ~/.android/avd/<name>.avd/config.ini, cold boot once, then adb shell settings put secure show_ime_with_hard_keyboard 0
Run: android emulator start medium_phone — or emulator -avd Pixel9_API36 -no-snapshot-load

That's it — a full Android emulator setup in under ~2 GB of downloads instead of the multi-gigabyte Android Studio install, now with Google's modern unified CLI.

Advanced Promise: JS Promises on next level

Shivam Sharma — Fri, 25 Mar 2022 15:15:07 +0000

Hi JS Developers,

Have you ever needed to abort a JS Promise or any fetch request before completion?
Did you want to know the current status of a Promise but felt helpless?
Have you ever felt that if there's a way to bind some data to the promise so that it can be accessed if promise variables are handled from outside?
Have you ever wanted to resolve/reject a promise from the outside instead after completion?
I bet you wanted to have a timeout feature in Promises or JS Fetch requests but couldn't find any.

So I have created a single, huge but tiny size solution for that, which is an NPM package named advanced-promise. It's a very simple extension to the JS Promise class. Very easy to use and open source. Must check once. More details are in the link.

Any Open Source contribution is welcomed.😊

Hybrid App Development: Comparison among React Native, Ionic and Flutter

Shivam Sharma — Mon, 03 Jan 2022 15:07:20 +0000

I am a web developer and performed this research in May 2021 for my organization. We currently have separate Android, iOS, and web teams. We thought to create a new platform that can be served as a separate website and can be embedded into the current website and native apps. We were not trying to build and launch a separate App. So below R&D is done keeping that thing in mind. I thought it should be shared with the community so here it is.

I have compared them from a web developer's point of view and provided medals(Gold, Silver, Bronze) which is purely based on my understanding and my scenario, it can be different for you.

So get ready for React Native vs Ionic vs Flutter 🎆

Sections:

Comparison
Medal Tally
Cheat sheet
Conclusion
Articles
How to Contribute to this

Comparison

We will be comparing all the three options React Native, Ionic and Flutter on the basis of below parameters:

Language
Learning Curve
Initial Release
Powered By
Community
Github Issues Opened
Performance
Popularity
Framework Nature
Coding Architecture
Supported Platform
Pricing
Integration
Build size
Testing
Code Reusability
UI Components
StackOverflow Questions Trend
Udemy Trends
Developer Availability
Last 2 years' Share in Hybrid Frameworks used
Poll
OTA(Over the air) Update
SEO

Language

Framework	Language	Medal
React Native	JavaScript & React	🥈
Ionic	HTML+CSS+JSS (with React/Angular/Vue)	🥇
Flutter	Dart	🥉

Ionic and React Native uses JS which matches with the tech stack used by a web developer usually. Dart is by google and it has C language-like syntax which is not similar to JS. So we might need devs who can learn Dart if we go for Flutter. Ionic can be written in Vanilla JS as well.

Learning Curve

Time required to learn (for Web Developers):

Framework	Time to Learn	Medal
React Native	Low (React Dev), Medium (other Web Dev)	🥈
Ionic	Low	🥇
Flutter	High	🥉

Flutter and Dart are new so it might take more time to learn.

Initial Release

Framework	Release Year	Medal
React Native	2015	🥇
Ionic	2013	🥇
Flutter	2017	🥈

Flutter is relatively new but gaining popularity rapidly.

Powered By

Framework	Powered By	Medal
React Native	Facebook	🥇
Ionic	Drifty Co.	🥈
Flutter	Google	🥇

All are Open Source so community support is there, but React-Native and Flutter have the upper hand here.

Community

Framework	Github Stars	Github Forks	Medal
React Native	100K	21.6K	🥈
Ionic	45.9K	13.5K	🥉
Flutter	134K	20K	🥇

React and Ionic has old and strong communities. Flutter is relatively new, however, it has made its space and attracted developers to learn Dart.

Github Issues Opened

Framework	Github Issues Opened/Total	Medal
React Native	1.9K / 20.3K	🥈
Ionic	673 / 18.8K	🥇
Flutter	9.9K / 53.3K	🥉

Flutter is new and attracted more developers recently but still, 9.9K+ is a high number of issues opened.

Performance

As far as I understood in terms of performance of these frameworks while interacting with the Native OS as an App:

Framework	Performance	Medal
React Native	Bridge Based	🥈
Ionic	Plugin Based	🥉
Flutter	Native Channels	🥇

Communication via Bridge and Plugins takes more time, though React is working on resolving Bridge Jam situations. Flutter works via direct platform channels so it's faster. Flutter team states that Flutter Web is for Web Apps not for static or minimal sites. So for small web apps, Flutter gets -ve there.

Popularity

In this section we'll be seeing some of the top products using these frameworks:

Framework	Popularity	Medal
React Native	Most Popular (Facebook, Instagram, Pinterest, Skype, Tesla, Uber, Walmart, Salesforce, Vogue)	🥇
Ionic	Popular among web developers (MarketWatch, Pacifica, Sworkit, Nationwide)	🥈
Flutter	Gaining popularity faster (Alibaba, Hamilton Musical, Greentea, Google Ads. eBay, BMW)	🥇

React Native is more popular than the other two as many tech giants are using it in their production environment. Ionic is very popular among web and mobile app developers due to its easy learning curve. Flutter has just entered the market but has grown in popularity in very little time.

Framework Nature

Framework	Framework Nature
React Native	App First
Ionic	Web First
Flutter	App First

App and Web have different UI structures, so choosing "first platform" may help to decide the framework. If you want your product to be a website first then Ionic is +ve there else -ve.

Coding Architecture

Framework	Coding Architecture	Medal
React Native	Component based, Hot Reloading, React JS UI	🥇
Ionic	One codebase, Plugin based, Web UI	🥈
Flutter	Hot Reloading, Different achitecture with Dart, Enhanced graphics & UI	🥇

All have their qualities, but due to hot reloading, development and Unit testing are faster on React-Native and Flutter.

Supported Platform

Framework	Supported Platform	Medal
React Native	Android, iOS, UWP (Windows 10) Web support by github pkg react-native-web(18.8K Stars), used by some org on production like MMT, Twitter Lite, Flipkart Lite, Uber Eats	🥈
Ionic	Web, Android, iOS Native support via plugins Capacitor, Cordova	🥈
Flutter	Android, iOS, Web, Microsoft Desktop Web support is launched in Mar'21, Microsoft support is in beta	🥇

Web support on React is by open-source package, on Flutter it's new and Native support on Ionic is via plugins. So a trade-off to choose from.

RNW example source. Flipkart Lite Source

Pricing

Framework	Pricing	Medal
React Native	Free and Open Source	🥇
Ionic	Open Source with Paid Support	🥇
Flutter	Free and Open Source	🥇

All are Open Source.

Integration

Hereby Integration I mean how easily can a hybrid sub-app be integrated into an already built mobile app (Android/iOS).

Framework	Integration	Medal
React Native	Only a single app can be integrated If multiple, then need to be merged first	🥈
Ionic	Only a single app can be integrated If multiple, then need to be merged first	🥈
Flutter	Only a single app can be integrated If multiple, then need to be merged first	🥈

So for all the options, if there are multiple Hybrid Apps available then they need to be merged first. Merge time depends on, how merge-friendly the separate apps are written. So Merging guidelines will be needed to make integration smooth.

Build size

Here I created the "Hello World!" app by using these frameworks and the below calculation is the size of the build for the android app. (Not a Mac User so can't create the iOS app)

Framework	Build size	Medal
React Native	7MB	🥈
Ionic	3.5MB	🥇
Flutter	7.5MB	🥉

For small apps, Ionic size is smaller but for bigger apps, it gets worse due to separate HTML+CSS+JS files. For bigger apps, Flutter works best. (Source)

Testing

Framework	Testing	Medal
React Native	Ranges between unit testing to automated testing Testing frameworks are available	🥇
Ionic	Ranges between component testing and end-to-end testing Ionic CLI and Browser based	🥈
Flutter	Multiple testing frameworks are available	🥇

For big applications, component or widget level testing is helpful. React-Native and Flutter have many Testing Frameworks available, while Ionic has normal web-based testing.

Code Reusability

Framework	Code Reusability	Medal
React Native	90%	🥈
Ionic	98%	🥇
Flutter	<90%	🥉

As Ionic uses HTML+CSS+JS for all platforms, It has most of the code reusable, In React-Native components can be reused, but when we add web support then only the components without native functionality can be reused. Same for Flutter.

UI Components

Framework	UI Components	Medal
React Native	The same feel as Native UI component, UI Libraries also available	🥇
Ionic	Big set of pre-built and pre-styled components.	🥇
Flutter	SKIA engine powered UI in the app and Flutter web engine for web, Extensive list of widgets. Flutter web pages are not usual web pages, they are on canvas default but using HTML renderer it can be like a normal HTML web page.	🥈

Flutter Web Pages in Canvas can lead to bad SEO and compatibility issue on very old browsers. React Native provides a Native feel and can be styled with external libraries.

StackOverflow Questions Trend

Here we can see the number of questions on StackOverflow for the tags of these Hybrid Frameworks. This indirectly shows how much developers are working on the particular framework actively.

Framework	Mar'18	Mar'19	Mar'20	Mar'21	Medal
React Native	2053	2370	2861	2808	🥇
Ionic	1084	865	751	467	🥉
Flutter	590	1857	3764	5185	🥇

React Native seems consistently popular among developers while Ionic seems losing its fame. However, Flutter is gaining a lot of attraction. (Source)

Udemy Trends

Udemy is one of the most popular learning platforms with a high number of students and teachers. Below stats tells about the active status of students and teachers on these frameworks:

Framework	Courses	Students	Medal
React Native	132+	1M+	🥈
Ionic	103+	649K+	🥉
Flutter	292+	1.9M+	🥇
Dart	64+	796K+

So Dart and Flutter are gaining popularity with enough resources available. (Source)

Developer Availability

This is the number of people available in India and globally as per Linkedin Search via my account.

Framework	In India	Worldwide	Medal
React Native	42K+	235K+	🥇
Ionic	26K+	172K+	🥉
Flutter	44K+	175K+	🥈

Last 2 years' Share in Hybrid Frameworks used

Framework	in 2019	in 2020	Medal
React Native	42%	42%	🥇
Ionic	28%	18%	🥉
Flutter	30%	39%	🥈

Flutter's share is increasing sharply while for Ionic it's decreasing in the same trend. (Source: Statista)

Poll

I conducted a poll on LinkedIn for the same, but with a short description of my need, it didn't get that many responses but this sample response seems to verify my above research:

Framework	Vaotes Received	Medal
React Native	50.53%	🥇
Ionic	7.37%	🥉
Flutter	42.11%	🥈

Total Votes: 95

Public Voting:

Technical group Voting:

OTA(Over the air) Update

Framework	OTA Compatibility	Medal
React Native	Via CodePush (Source)	🥇
Ionic	Via CodePush (Source)	🥇
Flutter	Very Limited OTA support, App release is required (Source)	🥉

SEO

I know, I'm not that good at this point but still mentionable.

Framework	SEO	Medal
React Native	Same like React App (Doable)	🥈
Ionic	Doable	🥈
Flutter	Doable with Router	🥈

SEO can be achieved like other SPA frameworks but not as simple as a PHP website.

Medal Tally

Framework	🥇	🥈	🥉	Total Score (3G+2S+1B)
React Native	12	11	0	58
Ionic	9	7	7	48
Flutter	10	7	6	52

Cheat sheet

You can find the cheat sheet of this article here. This has just the medals awarded for each attribute and the final medal tally and score.

Conclusion

As a developer, for my use case, I found React Native better so I went for that and created a sample React Native App: Harry Potter Dictionary with web support. Now my organization is working on replacing some modules in android with React Native sub-apps.

Articles

For this research, I've read some articles, which can be found here. You can also have a look at them.

How to Contribute to this

You can simply create your valuable pull request to this Github repo with an optional issue having the detail of the changes, I'll merge them and modify this article as well.

You can start a discussion as well to discuss with other community members.

How to install Android SDK and build Android App without Android Studio

Shivam Sharma — Sun, 13 Jun 2021 14:24:54 +0000

This article is about installing Android SDK in Windows system and run React Native App without Android Studio. Android SDK is required to build, run and debug Android Apps on your machine. So I needed it too to build and run React Native app for android in my windows system.

But Android SDK comes with Android Studio!!! Yes, you are right but not every system can handle Android Studio :) My system is also behind the minimum system requirements so I had to go for Android SDK separately.

Step 1: Install Chocolatey

In the official React Native Documentation, Chocolatey is recommended for downloading Node and Java. If you already have that downloaded and configured then you can skip this step.

You can either follow the complete Chocolatey Installation Doc or just run below command in your Windows Powershell Window.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

You will get Chocolatey installed and Environment Variables set.

Step 2: Install Java

As per the official React Native Documentation, You can use Chocolatey to install Java. If you already have that, skip this step. Just run below command in command prompt to install Node and Java. You can skip the package you have already installed.

choco install -y nodejs.install openjdk8

Now you must have JAVA_HOME set in your environment variables, if not then you can set. To go to environment variable you can follow below steps:

1: Go To Properties:

2: Go to Advance System Settings

3: Go to Environment Variables

4: List of Environment Variables can be accessed here

Step 3: Install SDK Manager

Now firstly we need to install Android SDK Manager to install Android SDK and other tools. For that visit the official site.

1. Download sdkmanager compressed file.

2. Now you need to create a folder, where you want to keep your all SDK packages. I created C:\Android for my case. Unzip the downloaded folder in this directory. Now I'm having the folder structure as C:\Android\cmdline-tools\<unzipped files>.

3. IMPORTANT: Now, we need to move all the unzipped files in a single folder. the name of the folder will be determined by the source.properties file's content, which is one of these unzipped files. Open this file and It'll be looked like this:

Pkg.Revision=4.0
Pkg.Path=cmdline-tools;4.0
Pkg.Desc=Android SDK Command-line Tools

Notice the first line, the value 4.0 is going to be our folder name.

So create a folder named as 4.0 inside C:\Android\cmdline-tools\ and move all other files into this folder. So now full directory structure will be C:\Android\cmdline-tools\4.0\<bin | lib>.

4. Now we'll set 2 Environment variables: ANDROID_HOME and Path for cmdline-tools.

Set ANDROID_HOME to the path of the directory you made in above point 2, in my case it's C:\Android.
Add C:\Android\cmdline-tools\4.0\bin and C:\Android\cmdline-tools\4.0 in Path Variable.

Step 4: Install Android SDK packages

We'll now install the required packages via sdkmanager. For that, open Command Prompt.

1. Install Platform Tools (ADB & Fastboot)

Firstly we need to install adb, for that we can install platform-tools pkg via sdkmanager. Run below command or get it from here.

sdkmanager "platform-tools"

Now add path of platform-tools in Environment Variable Path which is C:\Android\platform-tools in my case.

2. Install Platform

Use the below command to install the Android 10 (API level 30) using the SDK manager. You can download any API level by changing the name.

sdkmanager "platforms;android-30"

Aceept T&C and it'll be installed.

3. Add System Image

I am adding the most recent default 64-bit system image by running below command. Accept T&C and it'll be installed.

sdkmanager "system-images;android-30;google_apis;x86_64"

There are some projects which need Google Play Services. We need system image specific to Google Play Services. We can add that via command as shown below.

sdkmanager "system-images;android-30;google_apis_playstore;x86_64"

4. Install Build Tools

I am adding the most recent build-tools 30.0.3 via below command.

sdkmanager "build-tools;30.0.3"

5. Install Emulator (Optional)

If you want to run your apps inside emulator instead of physical device then you can install emulator and system images to run that. But obviously, it requires good system specs. We'll cover this in very short, please comment if you want detailed article on that.

1. Install Emulator

sdkmanager --channel=3 emulator

2. Create emulator

// Create the emulator with name em30 using default system image
avdmanager create avd -n em30 -k "system-images;android-30;google_apis;x86_64" -g "google_apis"

// Create emulator with name em30ps using Google Play Services system image
avdmanager create avd -n em30ps -k "system-images;android-30;google_apis_playstore;x86_64"

This will ask many questions, answer as per yoyr need.

3. Add emulator path in Path environment variable, in my case it's C:\Android\emulator.

4. List emulator devices installed

emulator -list-avds

5. Run emulator

// Run Emulator named em30
emulator -avd em30

6. How to use my device instead of emulator

You can follow the official documentation here and a related troubleshooting here. I'll be adding article for my version of the same soon.

So everything is set now and you'll be having Android SDK set up in your system. Below are some other related and useful commands.

// list all packages available in sdkmanager
sdkmanager --list

// list installed packages via sdkmanager
sdkmanager --list_installed

// Update installed packages
sdkmanager --update

// Uninstall packages
sdkmanager --uninstall <package name>

// Delete Emulator
avdmanager delete avd -n <emulator name>

Cover Photo by Denny Müller on Unsplash

How to create React Native App for Android, iOS and Web without Expo

Shivam Sharma — Sat, 12 Jun 2021 15:47:03 +0000

Note: This article is updated on 08-Aug-2021, to solve this StackOverflow issue, In this update, Creation of .babelrc is removed, babel.config.js & webpack.config.js are updated. The changes are equivalent to this commit.

In this article, we are going to see, how to create a React Native App which can run on Android, iOS and Web Browser. We'll NOT be using Expo in this process. For web support, we'll be using the package react-native-web.

I am using a Windows machine so I'll be showing the project run in Android and Web only. I am assuming that you have already downloaded and setup Node, NPM, Android SDK, Java and Emulator/Device for build and debugging purpose. If not, don't worry follow this article.

My Environment:

OS: Windows 10 (64 Bit)
Node: 16.3.0
NPM: 7.17

In case, if you want to explore more about which Hybrid App Development Framework to choose then you can have a look at this article: React Native vs Ionic vs Flutter

Step 1: Init a React Native Application:

This step is same as the official React Native Doc. So to init a React Native app:

Open command Prompt and go to the path where you want to create the project, In my case the path is C:\Users\shivam\Desktop\React.
Init App:

npx react-native init AwesomeProject

Your folder will be looking like this commit.
You'll find a new folder AwesomeProject in the current Directory, Now open this folder using any editor, I am using Visual Studio Code.

Step 2: Run this new app in Android (optional)

If you have Android setup done and an emulator or device connected, then you can simply run the app in android by simply running below command using command prompt in the folder AwesomeProject.

npx react-native run-android

Step 3: Web Setup

As already mentioned we'll be using the package react-native-web for web support. So you can find short setup instructions in the official doc of this package.

1. Add Web packages

Add the package react-native-web for web APIs and react-dom for browser.

npm install react-dom react-native-web

If you see any error saying unable to resolve dependency tree then you can use the --legacy-peer-deps option like below.

npm install react-dom react-native-web --legacy-peer-deps

2. Babel Plugin for build time optimization

As per official doc's recommendation, use the babel plugin babel-plugin-react-native-web.

npm install --save-dev babel-plugin-react-native-web

3. Babel Module Aliasing

As we are going to alias react-native as react-native-web so as Babel supports module aliasing using babel-plugin-module-resolver, we'll be using this.

npm install --save-dev babel-plugin-module-resolver

Now, to set alias, we'll use this package in webpack configuration. (These settings will be inside web/webpack.config.js, we'll introduce this file later in this article)

4. Mock Jest

Jest can be configured using the provided preset. This will map react-native to react-native-web and provide appropriate mocks.
For this, in /package.json file, update the value of the key "jest" from "react-native" to "react-native-web". Final value:

/package.json

{
  // Other Settings
  "jest": {
    "preset": "react-native-web"
  }
}

5. Configure Flow

Flow is a static type checker for Javascript like TypeScript. It's used by React-Native by default if you don't init the project using TypeScript template.

It can be configured to understand the aliased module. For this we need to add some config text under [options] key inside the file /.flowconfig.

/.flowconfig

[options]
# Alias the package name
module.name_mapper='^react-native$' -> 'react-native-web'

Flow can be configured to pull types from React Native for Web’s source code. For that add below config text also in the [options] key.

/.flowconfig

[options]
# Point flow to the 'module' field by default
module.system.node.main_field=module
module.system.node.main_field=main

6. Package Optimization

We added a package babel-plugin-module-resolver in step-3, It is recommended for build-time optimizations and to prune modules not used by your application. To config this we'll use webpack configurattions so your /babel.config.js file should look something like below.

/babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

7. Create Entry Files

For web version, we need to create 2 entry files, First one is index.html and second one is index.web.js, both needs to be placed at root path.

/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Testing React Native on the Web!</title>
    <meta content="initial-scale=1,width=device-width" name="viewport" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <style>
      /* These styles make the body full-height */
      html,
      body,
      #root {
        height: 100%;
      }
      /* These styles disable body scrolling if you are using <ScrollView> */
      body {
        overflow: hidden;
      }
      /* These styles make the root element flex and column wise filling */
      #root {
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <div id="react-native-web-app"></div>
    <script type="text/javascript" src="/bundle.web.js"></script>
  </body>
</html>

Notice the script name src="/bundle.web.js", We'll be using this file name while configuring webpack.

/index.web.js

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './src/components/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

AppRegistry.runApplication(appName, {
  rootTag: document.getElementById('react-native-web-app'),
});

If you notice this almost same as index.js except the last line. As you can see above, we are using an App component but from where did it came? So it's the same App.js file copied with the name App.jsx inside the path /src/components/, It's just to demonstrate an important concept which we'll learn later in this article, as this file will be creating some problems. So /src/components/App.jsx will look like below:

Note: As in many Editors/IDE the same App.js file can show errors as the file is using Flow syntax for type definitions and this syntax might not be supported in your IDE, to solve this you can either add Flow Language support via extensions or remove the flow specific code. I have removed the flow specific code in the below example for saving your time in troubleshooting.

/src/components/App.jsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const Section = ({children, title}) => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

8. Configuring and budling

We'll be using Webpack for bundling and Babel for transpiling along with babel-loader.

Install Webpack and related dependencies: Run below command in the terminal to install packages for dev environment.

npm install --save-dev babel-loader url-loader webpack webpack-cli webpack-dev-server

Tree-Shaking: React Native’s Babel preset rewrites ES modules to CommonJS modules, preventing bundlers from automatically performing “tree-shaking” to remove unused modules from your web app build. To help with this, you can install the following Babel plugin:

npm install --save-dev babel-plugin-react-native-web

Webpack Configuration:
This cofiguration is picked from the official doc and slightly modified to add .jsx support and module-resolver we added above via babel-plugin-module-resolver. So to configure Webpack create a file at /web/webpack.config.js. We will be using webpack-cli to diffrentiate between development and production builds, if you want to manage this via script then you can use this guide.

/web/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.(js)|(jsx)$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: ['module:metro-react-native-babel-preset'],
      // Re-write paths to import only the modules needed by the app
      plugins: [
        'react-native-web',
        [
          'module-resolver',
          {
            alias: {
              '^react-native$': 'react-native-web',
            },
          },
        ],
      ],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

module.exports = {
  entry: [
    // load any web API polyfills
    // path.resolve(appDirectory, 'polyfills-web.js'),
    // your web-specific entry file
    path.resolve(appDirectory, 'index.web.js'),
  ],

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },

  // ...the rest of your config

  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      'react-native$': 'react-native-web',
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js', '.jsx'],
  },
};

9. Scripts to run on web

Now we are going to add some scripts to run our web app with short command instead of full webpack-cli command. For this, we need to add below two options in the file /package.json inside "scripts" key.

To know more about webpack-cli options for webpack-5 go here and to know more about dev-tool go here

/package.json

{
  "scripts": {
    "web": "webpack serve -d source-map --mode development --config \"./web/webpack.config.js\" --inline --color --hot",
    "build:web": "webpack --mode production --config \"./web/webpack.config.js\" --hot"
  }
}

10. RUN OUR WEBAPP

So, Finally we are here, as we have set shortcut in our package.json for script so now we can simply run below command to start our webapp in browser.

npm run web

Wait a minute!!! I'm getting error, like below:

ERROR in ./node_modules/react-native/Libraries/NewAppScreen/components/DebugInstructions.js 11:12
Module parse failed: Unexpected token (11:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
|
> import type {Node} from 'react';
| import {Platform, StyleSheet, Text} from 'react-native';
| import React from 'react';
 @ ./node_modules/react-native/Libraries/NewAppScreen/index.js 17:0-63 20:0-27:2
 @ ./src/components/App.jsx 1:864-910
 @ ./index.web.js 1:261-292

So this is the error we talked about in Step 7. I literally spent 3-4 days to find a solution for this. And then the creator and maintainer of react-native-web package, Nicolas Gallagher helped me via this discussion.
So the issue is in the import statement on line 21 of src/components/App.jsx, where we are trying to do something like below:

This line in the stack trace is telling us that we're trying to bundle RN internal code in our web bundle: node_modules/react-native/Libraries/NewAppScreen/index.js.

First, we should not be loading any of the RN package on web, especially not parts that aren't part of the public API . Second, as mentioned in the inline comments of the config web/webpack.config.js, we need to explicitly list everything in node_modules that needs compiling.
import {
 Colors,
 DebugInstructions,
 Header,
 LearnMoreLinks,
 ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
All this code of the problem. We should not import from Libraries. This is not part of the public API.

To solve this, remove the dependency on the library: react-native/Libraries, for that update the code of /src/components/App.jsx as below:

/src/components/App.jsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

// import {
//   Colors,
//   DebugInstructions,
//   Header,
//   LearnMoreLinks,
//   ReloadInstructions,
// } from 'react-native/Libraries/NewAppScreen';

const Colors = {
  white: '#fff',
  black: '#000',
  light: '#ddd',
  dark: '#333',
  lighter: '#eee',
  darker: '#111',
};

const Section = ({children, title}) => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        {/* <Header /> */}
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            {/* <ReloadInstructions /> */}
            <Text>Reload Instruction</Text>
          </Section>
          <Section title="Debug">
            {/* <DebugInstructions /> */}
            <Text>Debug Instruction</Text>
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          {/* <LearnMoreLinks /> */}
          <Text>Learn More Links</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

11. Finally run after Troubleshooting

We can simply run below command in the terminal if it was stopped previously to start our webapp in browser.

npm run web

You should get output similar to below screenshot, and you can go to http://localhost:8080 to see your webapp running.

I'm sure it will help someone, at least it could save my 4 days if I know this before. All the changes done to add web support can be found in this before-update commit and this after-update commit.

I created a release also for the same.

I used the same configurations on this Dummy project and faced no issues after update.

If you find any issue in the configurations and gets it resolved, don't hesitate to contribute to the repo.

You can connect with me on Linkedin or Github as well.

Techgig CodeGladiators 2021 is live now, Participate and prove your skills

Shivam Sharma — Tue, 30 Mar 2021 07:21:49 +0000

Participate from this referral link

As per Techgig's site:

Code Gladiators is an annual coding competition by TechGig, that draws the best and the brightest coding talent from all parts of India. With multiple contests in emerging technologies and the coveted title of Code Gladiators up for grabs, the competition sees enthusiastic participation and has grown from strength to strength with each passing year.

Leetcode 869. Reordered Power of 2 [Solution]

Shivam Sharma — Sun, 21 Mar 2021 16:02:34 +0000

The question is a little bit tricky but once you get the trick, you can easily write the code.

Difficulty: Medium
Jump To:

Problem Statement
Explanation
Solution
Implementation

Problem Statement

Question: https://leetcode.com/problems/reordered-power-of-2/

Starting with a positive integer N, we reorder the digits in any order (including the original order) such that the leading digit is not zero.

Return true if and only if we can do this in a way such that the resulting number is a power of 2.

Example 1:

Input: 1
Output: true

Example 2:

Input: 10
Output: false

Example 3:

Input: 16
Output: true

Example 4:

Input: 24
Output: false

Example 5:

Input: 46
Output: true

Note:

1 <= N <= 10^9

Explanation

So the problem is simple, we are given a number N and we need to check whether we can create a number from this number by changing the place of digits. Considering zero can not be at the leading position.

eg. from 2014 we can create 1024 but not 0124 and 1024 = 2^10 so answer should be true for this N=2014. For N=12 we have two combinations 12 and 21 and both are not in any power of 2 so for N=12 answer is false.

Solution

As a naive approach, we can try to check if the number is the power of 2 for every permutation of the digits in N and it will result in time complexity = O((logN)!∗logN) but look at the constraints condition 1 <= N <= 10^9 and for various power of 2 we can see that 2^29 = 536870912 and 2^30 = 1073741824. So instead of checking whether the permutation of N is a power of 2, we can check that any of the numbers among 2^x ; x=0,1,2...29 has the same number of digits and same frequency of digits with N. If yes then this 2^x can be created from N.

eg. If N=23 then,

We'll check if 2^0 = 1 can be created using 23 by checking the number of digits in 2^0 = 1 and 23 as the number of digits are not equal in 1 and 23 so 1 can not be created from 23.
Now for x=1, 2^x = 2 again due to the different numbers of digits, 2 can not be created from 23.
Now for x=2, 2^x = 4 again due to the different numbers of digits, 4 can not be created from 23.
Now for x=3, 2^x = 8 again due to the different numbers of digits, 8 can not be created from 23.
Now for x=4, 2^x = 16 now the number of digits are same, but the frequency of digits in 16 and 23 are not the same so 16 can not be created from 23.
Now for x=5, 2^x = 32 now number of digits are same, and frequency of digits in 32 and 23 are same (2 => once, 3=> once) so 32 can be created from 23, return true.

Implementation

C++ Code:

class Solution {
public:
    bool reorderedPowerOf2(int N) {
        int d = getNumOfDigits(N);
        int a[10]={0};
        getDigitsFreq(N,a);
        int n2=1;
        int d1;
        for(int i=0; i<30; i++){
            d1 = getNumOfDigits(n2);
            if(d==d1){
                int a1[10]={0};
                getDigitsFreq(n2,a1);
                int j;
                for(j=0;j<10;j++){
                    if(a[j] != a1[j]){
                        break;
                    }
                }
                if(j==10){
                    return true;
                }
            }
            else if(d<d1){
                break;
            }
            n2=n2<<1;
        }
        return false;
    }

    void getDigitsFreq(int N, int a[]){
        while(N){
            a[N%10]++;
            N /= 10;
        }
    }

    int getNumOfDigits(int n){
        int i=0;
        while(n){
            i++;
            n /= 10;
        }
        return i;
    }
};

Runnable C++ code:

Cover Photo by Arnold Francisca on Unsplash

Leetcode 841. Keys and Rooms [Solution]

Shivam Sharma — Fri, 19 Mar 2021 13:30:53 +0000

The question is pretty easy, it's all about just clicking the approach.

Difficulty: Medium
Jump To:

Problem Statement
Explanation
Solution
Implementation

Problem Statement

Question: https://leetcode.com/problems/keys-and-rooms/

There are N rooms and you start in room 0. Each room has a distinct number in 0, 1, 2, ..., N-1, and each room may have some keys to access the next room.

Formally, each room i has a list of keys rooms[i], and each key rooms[i][j] is an integer in [0, 1, ..., N-1] where N = rooms.length. A key rooms[i][j] = v opens the room with number v.

Initially, all the rooms start locked (except for room 0).

You can walk back and forth between rooms freely.

Return true if and only if you can enter every room.

Example 1:

Input: [[1],[2],[3],[]]
Output: true
Explanation:
We start in room 0, and pick up key 1.
We then go to room 1, and pick up key 2.
We then go to room 2, and pick up key 3.
We then go to room 3. Since we were able to go to every room, we return true.

Example 2:

Input: [[1,3],[3,0,1],[2],[0]]
Output: false
Explanation: We can't enter the room with number 2.

Note:

1 <= rooms.length <= 1000
0 <= rooms[i].length <= 1000
The number of keys in all rooms combined is at most 3000.

Explanation

So the problem is simple, We have a room open and we'll find keys of some other rooms then we can visit these rooms and we'll find other keys there. One room can contain no keys as well. We can not visit a room until we have key to it. So we need to find that whether we can visit all rooms or not.

Solution

Doesn't it like look a graph traversal problem??? Where rooms are like node and keys to other rooms present in a room are like edges to other nodes. And we just need to check whether we can traverse all nodes or not. So we can use Breadth First Search(BFS) or Dreadth First Search(DFS). I am using a stack-based DFS approach.

A little enhancement is that I don't want to revisit a node which we have already visited, for that we can use a bitset or a boolean array. One more enhancement we can do that, we can prevent collecting keys for the rooms for whom we already have keys. This can be done using another bitset.

So solution is easy:

Mark Room-0 visitable using bitset keysCollected and push into stack s.
Now perform below operations until the stack s becomes empty:
1. Pop room number from stack, t.
2. If Room-t is not visited yet then visit and mark it visited using bitset visited.
3. Pick those keys from here which open a room which is not visitable yet, which can be checked by keysCollected.
4. For picked keys, mark associated rooms visitable using keysCollected and push into stack s.
If count of visited rooms as per visited is equal to the count of total rooms rooms.size() then return true else false.

Implementation

C++ Code:

class Solution {
public:
    bool canVisitAllRooms(vector<vector<int>>& rooms)
    {
        stack<int> s;
        bitset<1000> visited;
        bitset<1000> keysCollected;
        keysCollected[0] = 1;
        s.push(0);

        while (!s.empty()) {
            int t = s.top();
            s.pop();
            if (!visited[t]) {
                visited[t] = 1;
                for (auto i = rooms[t].begin(); i != rooms[t].end(); i++) {
                    if (!keysCollected[*i]) {
                        keysCollected[*i] = 1;
                        s.push(*i);
                    }
                }
            }
        }
        return visited.count() == rooms.size();
    }
};

Runnable C++ code:

Cover Photo by Jaye Haych on Unsplash

Simple markdown tag insertion snippet using shortcut keys [Pure Javascript]

Shivam Sharma — Fri, 19 Mar 2021 07:54:46 +0000

I needed a tiny, light-weight plug to add markdown syntax in my textboxes, I searched online but all of them were very vast so I decided to create my own with the help of many StackOverflow articles.

It is a very small Pure JS-based scripts to achieve the same, but before that look at some features of this tiny script as below:

Features:

Define your own markdown enclosures like ++ for underline and __ for italic.
If any text is selected then it'll be enclosed with the markdown tag.
If no text is selected, then you have an option to give a default text to be inserted with markdown tags.
Markdown can be inserted using shortcut keys like ctrl+b.
If any markdown tag is already added around selected text and the same markdown is applied then the markdown tag gets removed.
Multiple markdowns can be added sequentially like as **++underlined bold text++**
Different beginning and closing markdown tags can be inserted like as in hyperlinks, the opening tag can be [ and the closing tag can be ](example.com).

Examples:

text means text is selected.

a text to bold => a text to **bold**
a text to remove **bold** => a text to remove bold
a text to remove **bold** => a text to remove bold

Shortcut commands used in snippet:

Markdown	Command	Result
Bold	ctrl+b	bold text
Italic	ctrl+i	__italic text__
Underline	ctrl+u	++underlined text++
Link	ctrl+l	[link title](http://www.example.com)

Code:

HTML:

<!doctype html>
<html>
  <head>
    <title>Markdown Tag Insertion</title>
    <script language="javascript" type="text/javascript" src="script.js"></script>
  </head>
  <body>                                                            
    </br>
    <input type="text" id="title" style="width:250px;height:35px;">
    </br>
    </br>
    <textarea id="desc" rows="8" cols="80"></textarea>
    </br></br>
    <a href="https://stackoverflow.com/a/54364217/8494462">Stack Overflow Answer Link</a>
  </body>
</html>

Javascript:

//Code to bind keyevents 
document.addEventListener("keydown", (function(e) {
        if (e.ctrlKey && !e.shiftKey && [66, 73, 85, 76].indexOf(e.keyCode) > -1) {
                var keyCode = e.keyCode;
                var focused = document.activeElement;
                var id = focused.id;
                if (["title", "desc"].indexOf(id) > -1) { // To apply only on required elemenst
                        e.preventDefault();
                        if (keyCode == 66) { //ctrl+B
                                insertFormating(focused, "**", "bold");
                        } else if (keyCode == 73) { //ctrl+I
                                insertFormating(focused, "__", "italic");
                        } else if (keyCode == 85) { //ctrl+U
                                insertFormating(focused, "++", "underline");
                        } else if (keyCode == 76) { //ctrl+l
                                insertFormating(focused, "[", "link title","](http://www.example.com)");
                        }
                }
        }
}));

/**
* @param     {Object}    txtarea       javascript Element Object to the textarea
* @param     {String}    text          markdown enclosing tag text
* @param     {String}    defaultTxt    Default Text to be inserted when no text is selected
* @param     {String}    text2         markdown enclosing tag text for closing if different from opening
*/
function insertFormating(txtarea, text, defaultTxt = "", text2 = "") {
    var selectStart = txtarea.selectionStart
    var selectEnd = txtarea.selectionEnd
    var scrollPos = txtarea.scrollTop;
    var caretPos = txtarea.selectionStart;
    var mode = 0;
    var front = (txtarea.value).substring(0, caretPos);
    var back = (txtarea.value).substring(selectEnd, txtarea.value.length);
    var middle = (txtarea.value).substring(caretPos, selectEnd);

  // Sets ending tag as opening tag if empty
    if (text2 == "") {
        text2 = text;
    }
    var textLen = text.length;
    var text2Len = text2.length;

    if (selectStart === selectEnd) {
        middle = defaultTxt;
        mode = 1;
    } else {
        if (front.substr(-textLen) == text && back.substr(0, text2Len) == text2) {
            front = front.substring(0, front.length - textLen);
            back = back.substring(text2Len, back.length);
            text = "";
            text2 = "";
            mode = 2;
        } else if (middle.substr(0, textLen) == text && middle.substr(-text2Len) == text2) {
            middle = middle.substring(textLen, middle.length - text2Len);
            text = "";
            text2 = "";
            mode = 3;
        }
    }
    txtarea.value = front + text + middle + text2 + back;
    if (selectStart !== selectEnd) {
        if (mode === 0) {
            txtarea.selectionStart = selectStart + textLen;
            txtarea.selectionEnd = selectEnd + textLen;
        } else if (mode === 2) {
            txtarea.selectionStart = selectStart - textLen;
            txtarea.selectionEnd = selectEnd - textLen;
        } else if (mode === 3) {
            txtarea.selectionStart = selectStart;
            txtarea.selectionEnd = selectEnd - textLen - text2Len;
        }
    } else {
        txtarea.selectionStart = selectStart + textLen;
        txtarea.selectionEnd = txtarea.selectionStart + middle.length;
    }
    txtarea.focus();
    txtarea.scrollTop = scrollPos;
}

Any suggestion is appreciated.

Codepen:

Leetcode 535. Encode and Decode TinyURL [Solution and Discussion]

Shivam Sharma — Mon, 15 Mar 2021 13:19:24 +0000

The question is very good and real-world related, but the test environment for this question in Leetcode is not up to the mark, As even below code is also accepted and it requires no effort.

class Solution {
public:
    string encode(string longUrl) {
        return longUrl;
    }
    string decode(string shortUrl) {
        return shortUrl;
    }
};

That is happening because Leetcode is creating a new instance for each test case hence there is no need to keep past input/output in the code. Also, there are no constraints on the length of a short URL.

But we are here to learn, so ignoring such a bad test environment, we'll be creating a real-world solution. The best thing about this question is the provided hyperlink to the article.

Difficulty: Medium
Jump To:

Problem Statement
Explanation
Solution
Implementation

Problem Statement

Question: https://leetcode.com/problems/encode-and-decode-tinyurl/

Note: This is a companion problem to the System Design problem: Design TinyURL.

TinyURL is a URL shortening service where you enter a URL such as https://leetcode.com/problems/design-tinyurl and it returns a short URL such as http://tinyurl.com/4e9iAk.

Design the encode and decode methods for the TinyURL service. There is no restriction on how your encode/decode algorithm should work. You just need to ensure that a URL can be encoded to a tiny URL and the tiny URL can be decoded to the original URL.

Explanation

So the problem is simple, you need to create an algorithm, which will convert a long URL to a short URL and the long URL can be achieved back from the short URL. One thing to take care of is that the short URL should always map to a single long URL but vice versa is not mandatory but good to have.

Solution

There are many solutions possible to this problem, the one we are going to use is mentioned in the attached article with the question, which is "Simple Base conversion". In this method, we have a base and the base for the system is the number of distinct characters available in the system. Simplest example for it is a Decimal System which has base=10 (0-9) or a Hexadecimal Number System which has base=16 (0-9,A-D). So first let's see how we convert a decimal number to a hexadecimal number.

Mod a number by Base and use the character present at this mod value.
Divide the original number by base.
Repeat the above steps until the number becomes zero.
Now write the characters found in a reverse manner.

Eg. 1732 => 6C4

Base	Number	Remainder	Read Direction
16	1732	4	↑
16	108	C	↑
16	6	6	↑
16	0	→	↑

Now again look at the problem we have a-z, A-Z and 0-9 i.e. 62 characters available to use in short URL, so we can see it as a decimal to 62-based system conversion problem. So we'll convert a number to a 62-based string and this string will be our short URL Hash. This hash can be appended to "http://tinyurl.com/" to form a complete short URL.

Wait a minute??? From where this decimal number came into the picture??? Actually, instead of converting a very long string to a short URL, we'll be converting a decimal number to a short URL and we'll bind this short URL to the long URL. Or to save space we can bind directly the decimal number to the long URL. This number is an increasing counter, which will be increased every time by 1 when encode is called.

For a limited number of long URLs, the first method is OK, but when we are going to convert billions then the second method is way better.

For the first method, In the encoding method, we require only decimal to 62-based conversion and a hash map to store pair of <Short URL Hash, Long URL>. Then in the decoding method, we'll just look up the short URL in this hash map and return the long URL.

In the Second method, we'll have a hashmap for the pair of <integer, Long URL> so we require both decimal to 62-based conversion (for encoding) and 62-based to decimal conversion (for decoding)

Implementation

C++ Code:
For method 1:

class Solution {
public:
    int counter=0;
    unordered_map<string,string> dict;

    string encode(string longUrl) {
        char cmap[] = "abcdefghijklmnopqrstuvwxyz\
            ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        int n = (++counter);
        string shortUrl;
        while(n){
            shortUrl.push_back(cmap[n%62]);
            n=n/62;
        }
        reverse(shortUrl.begin(), shortUrl.end());
        dict[shortUrl] = longUrl;
        return shortUrl;
    }

    string decode(string shortUrl) {
        return dict[shortUrl];
    }
};

For method 2:

class Solution {
public:
    int counter=0;
    unordered_map<int,string> dict;

    string encode(string longUrl) {
        char cmap[] = "abcdefghijklmnopqrstuvwxyz\
            ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        int n = (++counter);
        string shortUrl;
        while(n){
            shortUrl.push_back(cmap[n%62]);
            n=n/62;
        }
        reverse(shortUrl.begin(), shortUrl.end());
        dict[counter] = longUrl;
        return shortUrl;
    }

    string decode(string shortUrl) {
        int id = 0; // initialize result
        for (int i=0; i < shortUrl.length(); i++)
        {
            if ('a' <= shortUrl[i] && shortUrl[i] <= 'z')
                id = id*62 + shortUrl[i] - 'a';
            if ('A' <= shortUrl[i] && shortUrl[i] <= 'Z')
                id = id*62 + shortUrl[i] - 'A' + 26;
            if ('0' <= shortUrl[i] && shortUrl[i] <= '9')
                id = id*62 + shortUrl[i] - '0' + 52;
        }
        return dict[id];
    }
};

Runnable C++ code:

Cover Photo by Annie Spratt on Unsplash

We can have a discussion either here or here regarding this question.

Leetcode 1721. Swapping Nodes in a Linked List [Solution]

Shivam Sharma — Sun, 14 Mar 2021 13:40:08 +0000

If we get the idea correctly then this question is just a combination of two general questions, first one is "Find k-th node from the end in a linked list" and "Swap two numbers". As instead of swapping the nodes, swapping the data of the nodes is sufficient. If you are going to swap actual nodes then this is going to be a little bit more tricky. But you can try that as well to test yourself. We are going to solve this question using the above logic.

Difficulty: Medium
Jump To:

Problem Statement
Explanation
Solution
Implementation

Problem Statement

Question: https://leetcode.com/problems/swapping-nodes-in-a-linked-list/

You are given the head of a linked list, and an integer k.

Return the head of the linked list after swapping the values of the kth node from the beginning and the kth node from the end (the list is 1-indexed).

Example 1:

Input: head = [1,2,3,4,5], k = 2
Output: [1,4,3,2,5]

Example 2:

Input: head = [7,9,6,6,7,8,3,0,9,5], k = 5
Output: [7,9,6,6,8,7,3,0,9,5]

Example 3:

Input: head = [1], k = 1
Output: [1]

Example 4:

Input: head = [1,2], k = 1
Output: [2,1]

Example 5:

Input: head = [1,2,3], k = 2
Output: [1,2,3]

Constraints:

The number of nodes in the list is n.
1 <= k <= n <= 105
0 <= Node.val <= 100

Explanation

So the question wants two simple things from us, first one is to find k-th node from the beginning and k-th node from the end in a linked list. The second thing to be done is to swap both the nodes. As it's not asked to swap the actual node with its address so we can simply just swap the values of the nodes instead of swapping the nodes.

Solution

The problem needs to be solved in the below steps:

Step 1: Point to k-th node from the beginning.

Point a pointer x to the head.
Move the pointer forward in the linked list until we reached k-th node.

Step 2: Point to k-th node from the end.

Point 2 pointers y and t to the head.
Move pointer t till k-th node.
Now move both the pointers y & t until t has reached the last node.
So when t has reached the last node, y must have been reached k-th node from the end.

Step-3: Swap values of both the nodes.

As we can guess that Point 2 of Step-2 can be done in the same loop of Point 1 of Step-1. This will save a bit of computation for us.

Implementation

C++ Code:

class Solution {
public:
    ListNode* swapNodes(ListNode* head, int k) {
        ListNode *x=head, *y=head, *t=head;

        // Until we reach k-th node from beginning
        while(k>1){
            x = x->next;
            t = t->next;
            k--;
        }

        // Until pointer t reach last need 
        while(t->next){
            y=y->next;
            t=t->next;
        }

        // Swap values at both the nodes
        int temp = x->val;
        x->val = y->val;
        y->val = temp;

        return head;
    }
};

Time Complexity: O(N), where N is the length of linked list.
Space Complexity: O(1)

Runnable C++ code:

DEV Community: Shivam Sharma

What I learned building a payments page with no payment processor - A free, self-hosted, zero commission donation platform

UPI in 90 seconds (for readers outside India)

The trade-off that makes 0% possible

Landmine #1: URLSearchParams silently corrupts UPI links

Landmine #2: the deeplink that fails silently

The scariest bug class: a typo'd payment address

Bonus round: the note field is a Unicode minefield

What shipped

ShivamS136 / buy-me-a-chai

Zero commission. Zero platform. Zero signup. Your donation page, your UPI, your host.

☕ buy-me-a-chai

Features

Run Android Emulator (AVD) Without Installing Android Studio — Updated Guide (Android CLI Edition)

1. Install Java (JDK 17 or newer)

2. Download the Command Line Tools

3. Set Environment Variables

4. Install Emulator, Platform Tools & a System Image

Testing newer releases (API 37 / 37.1)

5. Create the AVD

6. Run the Emulator

7. Type With Your Laptop Keyboard

Enable the flag

Cold boot — this is the step people miss

Hide the on-screen keyboard

What routes where

Troubleshooting

Error: Could not load devices from .../devices.xml

Error: Could not determine SDK root

AVD created but emulator -list-avds shows nothing

Laptop keyboard still does nothing after setting hw.keyboard=yes

Hardware Acceleration Note

Bonus: What Else the New CLI Does

Steps Summary (TL;DR)

Advanced Promise: JS Promises on next level

Hybrid App Development: Comparison among React Native, Ionic and Flutter

Comparison

Language

Learning Curve

Initial Release

Powered By

Community

Github Issues Opened

Performance

Popularity

Framework Nature

Coding Architecture

Supported Platform

Pricing

Integration

Build size

Testing

Code Reusability

UI Components

StackOverflow Questions Trend

Udemy Trends

Developer Availability

Last 2 years' Share in Hybrid Frameworks used

Poll

OTA(Over the air) Update

SEO

Medal Tally

Cheat sheet

Conclusion

Articles

How to Contribute to this

How to install Android SDK and build Android App without Android Studio

Step 1: Install Chocolatey

Step 2: Install Java

Step 3: Install SDK Manager

Step 4: Install Android SDK packages

1. Install Platform Tools (ADB & Fastboot)

2. Install Platform

3. Add System Image

4. Install Build Tools

5. Install Emulator (Optional)

6. How to use my device instead of emulator

How to create React Native App for Android, iOS and Web without Expo

Step 1: Init a React Native Application:

Step 2: Run this new app in Android (optional)

Landmine #1: `URLSearchParams` silently corrupts UPI links

`Error: Could not load devices from .../devices.xml`

`Error: Could not determine SDK root`

AVD created but `emulator -list-avds` shows nothing

Laptop keyboard still does nothing after setting `hw.keyboard=yes`