DEV Community: Nandan Das

OrinIDE v1.0.7 — The AI Finally Understands Your Whole Project

Nandan Das — Mon, 01 Jun 2026 06:13:17 +0000

I've been building OrinIDE for a while now — a browser-based code editor that runs locally via npx, with a real terminal, a real file system, and AI chat powered by OpenRouter. No cloud accounts, no subscriptions, no uploading your code anywhere.

Today I pushed v1.0.7, and honestly this is the update I've been wanting to build for months.

The problem I kept running into

Every time I asked the AI to make a change, I had to babysit it. "No, look at this file too." "Don't rewrite the whole thing, just change the title." "The colors are defined in main.css, not here."

It got annoying fast. The AI only ever saw whatever file you had open at that moment. And when it did make edits, it would spit back the entire file — 300 lines of HTML for a two-word change. Wasteful, slow, and easy to accidentally break something in the copy-paste.

v1.0.7 fixes both of these properly.

What's new

1. Project-wide AI context

Before this update, the AI only saw the file currently open in the editor. Now it reads every file in your project before each message.

There's a new backend endpoint (POST /files/batch-read) that walks your entire project folder, skips node_modules, .git, and binary files, and sends up to 800 KB of source files to the AI as context. All text files — JS, CSS, HTML, Python, JSON, markdown, whatever you have.

In practice this means you can say things like:

"Update the button color in components/button.css to match the accent color defined in theme.css"

And it actually works, because the AI can see both files. You don't have to open theme.css first, copy the color, paste it into chat. It just does it.

Or:

"Add a dark mode toggle that respects the existing CSS variable structure"

And it knows what your CSS variable structure is without you explaining it.

2. Surgical edits — no more full rewrites

This one changed how I use the tool day to day.

Before: ask AI to change a heading → AI returns the entire 400-line HTML file → you click Apply → the whole file gets overwritten.

Now: ask AI to change a heading → AI returns only the changed part in a patch format → only that specific text in the file gets replaced. Everything else stays exactly as it was.

The format the AI uses looks like this:

@@patch:index.html
<<<search
<title>My App</title>
===
<title>Nandan's Portfolio</title>
>>>

The backend (POST /files/patch) does an exact string match and replaces only that portion. If the search string isn't found — say the file changed since the AI read it — it reports the failure with a specific warning instead of silently corrupting anything. The diff viewer still works too, showing you exactly what changed before and after.

For small edits this is so much faster. The AI response is shorter, applying it is instant, and you're not risking accidentally wiping something you didn't intend to change.

3. Skills system

This one's about turning the AI into a specialist instead of a generalist.

There are four built-in skills:

Frontend — pixel-perfect responsive UI, CSS variables, semantic HTML, accessibility
Cinematic — Three.js, WebGL, custom GLSL shaders, particle systems
Backend — Express.js, REST API structure, JWT auth, error handling
Game Dev — browser game loop, physics, Canvas 2D, Three.js games

When you activate a skill, its full instruction set gets injected into the AI system prompt on every message. So instead of you having to say "use CSS Grid, not floats, and make sure it's mobile-first" every single time — you just activate Frontend skill and it follows those rules automatically.

You can also create your own custom skills with any instructions you want. Name it, write the rules, save. It lives in localStorage and persists across sessions.

@mention autocomplete — type @ in the chat input and a dropdown appears listing all your skills. Arrow keys or click to pick one. Selecting via @mention also activates it automatically.

4. HTML preview inside chat

When the AI generates HTML, there's now a Preview button right on the code block. Click it and the HTML renders in a sandboxed iframe inside the IDE — no new tab, no copy-pasting into a file first, no waiting for Apply.

There's also a New Tab button that opens it as a full page via a Blob URL if you want to see it properly sized.

This is genuinely useful for quick iteration. Generate a component, preview it, ask for changes, preview again — all without leaving the chat panel.

5. Free image API + image picker

When you ask the AI to generate a portfolio or any image-heavy site, it used to fall back to via.placeholder.com gray boxes. Not anymore.

There's now a built-in ImageAPI module backed by picsum.photos and loremflickr.com — no API key, no registration, no rate limits for normal use. 20 categories: person, hero, nature, city, technology, food, travel, business, abstract, banner, team, product, interior, fashion, animals, education, and more.

The AI system prompt now includes a reference sheet of real image URLs for every common section type — hero backgrounds, profile photos, project thumbnails, team members. So when it generates a portfolio site, it uses actual photos that look real.

There's also an Image Picker — a visual grid modal in the toolbar. Browse by category, click any image to copy its URL and append it to the chat input.

Install / update

npx orin-ide

If you already have it installed globally:

npm update -g orin-ide

You'll need an OpenRouter API key for the AI features — free tier is available and works well for most use cases.

A bit of context

I build everything for this project on my Android phone using Termux. No laptop, no desktop. Just a phone, a terminal emulator, and Node.js. That constraint shapes a lot of the decisions — single npx command, no build step, vanilla JS with no framework, everything self-contained.

OrinIDE started as a personal tool because I wanted a proper IDE experience on Termux without fighting with electron or VS Code's remote setup. Somewhere along the way it became something I wanted other people to actually use.

v1.0.7 is the version where the AI stops feeling like a chatbot you're manually feeding context to, and starts feeling like it actually lives inside your project.

Links:

npm: npmjs.com/package/orin-ide
GitHub: github.com/nandandas2407-web/orin-ide

"I Built a Developer-Only Social Platform — Meet Devand 🛠️"

Nandan Das — Sun, 31 May 2026 07:24:55 +0000

published: true
description: "Devand is a social platform built exclusively for developers. Share your work, connect with builders, and explore a feed made for devs."
tags: buildinpublic, webdev, showdev, javascript

I Built a Developer-Only Social Platform — Meet Devand 🛠️

Made by Nandan Das

A social space built by developers, for developers. No noise. Just dev.

🤔 Why I Built This

Every existing social platform feels wrong for developers.

Twitter is full of noise. LinkedIn is too corporate. GitHub isn't social enough. I wanted something in between — a place where developers can share their work, follow other builders, and actually talk to people who code.

So I built Devand.

🔵 What is Devand?

Devand is a social platform designed exclusively for developers. Think Twitter, but every feature is made for the dev experience.

Here's what you can do on Devand:

📝 Post updates, thoughts, and code snippets to the Explore feed
👤 Get your own developer profile with badges and your tech stack
❤️ Like, repost, comment, and bookmark posts
💬 Send direct messages to other developers
🔔 Get notified on likes, follows, and comments
🏆 Climb the leaderboard based on your activity
🛡️ Admin moderation system with a Bluetooth verified badge

🎨 Design

Devand uses a brutalist monochrome design — dark background, sharp edges, monospace fonts. It's minimal and gets out of the way of the content. Built for focus, not distraction.

🛡️ Admin System

The platform has a built-in admin panel. The admin account gets a special 🔵 Bluetooth Verified legendary badge and can remove any post from the explore section directly — keeping the platform clean for everyone.

🔐 Login

You sign in with your GitHub account — your profile picture, username, and bio are pulled in automatically. No forms. No passwords. Just one click.

🔮 What's Coming Next

Real-time notifications
Teams and Organizations
Job board for developers
Mobile app

💬 Final Thoughts

Building Devand was a great experience. I wanted to make something that actually feels right for developers — and I think Devand is getting there.

If you're a developer who wants a social space that gets you, come check it out and drop your first post.

I'd love to hear what features you want to see next — comment below! 👇

Built with ❤️ by **Nandan Das**

🌐 Live at: https://devand.onrender.com
📧 devand.card@gmail.com

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