DEV Community: Nandan Das

NandanX — The Frontend Library That Makes Websites Feel Alive

Nandan Das — Sun, 17 May 2026 00:44:17 +0000

I Built a Frontend Library That Feels Like “Frontend Superpowers”

Most frontend libraries solve one problem.

Animation.

Particles.

Cursor effects.

Forms.

Microinteractions.

Glassmorphism.

Gradients.

Scroll reveals.

I wanted something different.

So I started building NandanX — a frontend library focused on making websites feel alive with almost no setup.

GitHub: https://github.com/nandandas2407-web/NandanX

npm: https://www.npmjs.com/package/nandanx

What is NandanX?

NandanX is a lightweight JavaScript UI/FX library designed for developers who want cinematic and modern interfaces without spending hours configuring animations or visual systems.

The idea is simple:

<script src="https://cdn.jsdelivr.net/npm/nandanx"></script>

Or install with npm:

npm install nandanx

Then:

NandanX.cursorTrail()
NandanX.meshGradient()
NandanX.glow()
NandanX.reveal()

And suddenly your website feels premium.

Why I Started Building It

I noticed something while making projects.

Modern websites often need:

smooth interactions
animated backgrounds
futuristic effects
better hover states
microinteractions
cursor systems
aesthetic UI polish

But setting all of this up usually means:

installing multiple libraries
writing tons of CSS
configuring animation systems
dealing with performance issues

I wanted a single toolkit focused on:

speed
aesthetics
simplicity
instant visual impact

Some Features

Cursor Engine

NandanX.cursorTrail()

Adds smooth cinematic cursor trails instantly.

Mesh Gradient Engine

NandanX.meshGradient()

Creates animated premium-looking backgrounds.

Reveal Animations

NandanX.reveal()

Scroll-based reveals with minimal setup.

Glow Effects

NandanX.glow()

Adds modern glowing UI effects for cards, buttons, and sections.

Particle Engine

NandanX.particles()

Interactive particles without needing a huge framework.

My Goal

I’m not trying to replace huge frameworks like GSAP or Framer Motion.

NandanX is more about:

“Making beautiful frontend experiences ridiculously easy.”

Especially for:

portfolios
landing pages
indie hacker products
AI-generated websites
startup showcases
futuristic UI projects

Biggest Challenge

The hardest part is balancing:

performance
bundle size
developer experience
flexibility

while still keeping the library fun and expressive.

I’m currently working on:

better documentation
live demos
performance improvements
modular builds
TypeScript support

What I Learned Building This

Building a library is very different from building an app.

You’re not just writing code.

You’re designing:

APIs
developer experience
naming systems
documentation
ecosystem thinking

A small API naming decision can affect thousands of developers later.

That changed how I think about software engineering.

Future Plans

Some things I want to add:

plugin ecosystem
visual playground
shader effects
advanced motion presets
mobile optimization
AI-assisted UI generation
theme systems
component packs

Final Thoughts

NandanX started as an experiment.

Now it’s becoming a real ecosystem.

Still early. Still improving. Still learning.

But building it has taught me more about frontend engineering, DX,

The Features That Make OrinIDE Different From Other Browser IDEs

Nandan Das — Sun, 10 May 2026 13:01:29 +0000

A few days ago, I shared a post about building OrinIDE.

This post is different.

This is about the features and design decisions that make it fundamentally different from most browser-based IDEs and mobile coding environments.

Most web IDEs today usually have at least one of these problems:

fake terminals,
poor mobile support,
heavy Electron-based architecture,
cloud dependency,
locked AI features,
or overloaded UIs.

I wanted something simpler and more practical.

So I built OrinIDE — a lightweight AI-powered browser IDE designed to run locally, including on Android through Termux.

Philosophy Behind OrinIDE

The goal was never to create “another VS Code clone”.

The goal was:

real development,
real terminal access,
AI-assisted workflows,
lightweight execution,
and full mobile usability.

I wanted an environment where a phone could genuinely become a coding machine.

1. Real Browser Terminal (Not Simulated)

One thing that frustrates me in many browser IDEs is fake terminals.

OrinIDE uses a real backend terminal system.

That means:

npm works
git works
node works
shell commands work
actual processes run normally

Directly from the browser.

This makes the environment usable for real development instead of just demos.

2. Android + Termux Support

This was one of the biggest priorities.

Most IDEs technically “open” on mobile but become painful to use.

OrinIDE was designed with mobile usability in mind.

It can run directly through Termux:

pkg update -y
pkg install nodejs-lts -y

npm install -g orin-ide

orin-ide

Then simply open:

http://127.0.0.1:3000

Your Android phone becomes a local coding environment.

3. AI Integration Built Into the Workflow

OrinIDE includes built-in AI chat powered through OpenRouter.

You can:

generate code
refactor files
debug issues
explain code
edit entire files
ask development questions

Supported models include:

GPT-OSS 120B
DeepSeek
Gemma
Nemotron
GLM
custom OpenRouter models

The important part is that AI is integrated into the workflow itself instead of being treated like a separate chatbot.

4. AI Diff Viewer

I personally dislike when AI tools silently overwrite files.

So OrinIDE includes a diff-review system.

When AI edits a file:

changes are highlighted,
additions/removals are visible,
and edits can be accepted or rejected.

This creates a safer AI-assisted coding workflow.

5. Lightweight Architecture

A lot of development tools today feel unnecessarily heavy.

OrinIDE intentionally stays lightweight.

Main backend stack:

Express
ws
chokidar
multer
archiver

No Electron.

No massive desktop runtime.

Just a local server + browser.

6. Full File System Access

OrinIDE includes a full project file explorer.

You can:

create files
create folders
rename files
delete files
organize projects
manage structures

directly inside the browser.

7. ZIP Export System

Projects can be exported instantly as ZIP files.

Useful for:

backups
sharing
releases
deployments

This sounds simple, but it becomes extremely useful in mobile workflows.

8. Project-Wide Find & Replace

The IDE supports searching across the entire project.

Useful for:

refactoring
variable renaming
fixing imports
large-scale edits

9. Built-In Snippet System

OrinIDE includes built-in snippets for:

JavaScript
Python
HTML
CSS
React

Accessible quickly through shortcuts.

10. Mobile-Friendly UI

Most browser IDEs ignore mobile usability.

OrinIDE contains responsive layouts and mobile-focused UI adjustments to remain usable on phones and tablets.

This was one of the most important parts of the project.

Internal Structure

The architecture is modular.

frontend/
backend/
routes/
services/
public/js/
public/css/

Frontend modules include:

terminal
editor
AI chat
snippets
file tree
preview system
media handling
utilities

Backend handles:

terminal management
file routes
ZIP exports
uploads
file watching

Technical Details

File Watching

Uses chokidar for real-time updates.

ZIP Exports

Uses archiver.

Media Uploads

Uses multer.

Terminal Communication

Uses WebSockets.

UI preview:

What Makes It Different

I think the main difference is this:

OrinIDE focuses on practical development instead of just looking modern.

That means:

real shell access,
mobile usability,
lightweight execution,
AI-assisted workflows,
and local-first development.

The project was designed to remain usable even on weaker systems and Android devices.

A coding environment should not require expensive hardware.

Future Plans

Planned features include:

Git integration
extension system
collaborative editing
offline AI support
local model execution
multi-tab workspaces
plugin APIs

GitHub

https://github.com/nandandas2407-web/orin-ide

NPM

https://www.npmjs.com/package/orin-ide

Final Thoughts

This project started as an experiment.

Now it is becoming a serious attempt at making development more accessible from anywhere — especially on Android and low-end devices.

If you try OrinIDE, I would genuinely love feedback or ideas.

javascript #nodejs #opensource #webdev #android #ai #programming #termux #ide #coding

Building OrinIDE — A Browser-Based IDE for Android with AI Support

Nandan Das — Thu, 07 May 2026 15:28:28 +0000

Building OrinIDE — A Browser-Based IDE for Android with AI Support

For a long time, coding on Android has felt awkward.

Most mobile coding apps are either:

too limited,
too slow,
dependent on cloud environments,
or simply not designed for real development workflows.

So I started building OrinIDE — a lightweight browser-based IDE designed to run on Android using Termux + Node.js.

The main goal is simple:

make mobile development feel practical, lightweight, and actually enjoyable.

And now I’m experimenting with integrating OpenRouter AI models directly into the workflow to make AI-assisted coding available inside the IDE itself.

The idea behind this project is:

vibe coding on mobile should actually feel easy.

Current Features

File Explorer
Browser-Based Code Editor
Terminal Support
Local Node.js Backend
Mobile-Friendly Interface
Lightweight Architecture
AI Integration Experiments
OpenRouter Model Support

Why Build This?

I wanted a development setup that:

works directly on Android,
runs locally,
feels fast,
stays lightweight,
and still supports modern workflows.

Instead of depending entirely on cloud IDEs or remote machines, OrinIDE focuses on creating a usable local environment that developers can run directly from their phones.

Installation

Termux Setup (Must Do Before Anything)

Before running any packages or creating projects in Termux, you must complete these setup steps:

Storage Permission Setup

termux-setup-storage

pkg update -y && pkg install nodejs-lts -y && npm install -g orin-ide && orin-ide

Then open:

http://127.0.0.1:3000

npm

npm install -g orin-ide

Npm package:

https://www.npmjs.com/package/orin-ide

Demo

https://orinide.netlify.app/

GitHub

https://github.com/nandandas2407-web/orin-ide

Future Plans

Some things currently being explored:

Better AI-assisted workflows
Smarter terminal integration
Plugin/extensions system
Improved mobile UI/UX
Faster filesystem handling
Multi-language support
Better project management tools
Offline-first workflow improvements

Still actively improving the project, testing ideas, and experimenting with what mobile development could realistically become.

Would genuinely appreciate feedback from developers who:

code on Android,
use Termux,
enjoy lightweight workflows,
or are interested in AI-powered development environments.

webdev #nodejs #javascript #opensource #android #termux #ai #openrouter #buildinpublic #coding #programming #developer #npm