DEV Community: Aashutosh Bairagi

From a Fresh Arch Install to a Fully Configured Development Environment in One Command

Aashutosh Bairagi — Mon, 20 Jul 2026 18:31:55 +0000

How I automated my Arch Linux + Omarchy + Hyprland setup with reproducible dotfiles, backups, and a single bootstrap script.

Introduction

Like many Arch Linux users, I've reinstalled my system more times than I'd like to admit.

Every reinstall meant spending hours installing packages, configuring Hyprland, tweaking Waybar, setting up Ghostty, restoring VS Code settings, copying wallpapers, and hoping I didn't forget some tiny configuration that I'd eventually notice days later.

I wanted my development environment to be reproducible.

So I built a repository that can recreate my entire setup—from packages to desktop configuration—with a single command while safely backing up any existing configuration before making changes.

🔗 GitHub Repository:

https://github.com/Aashutosh31/dotfiles

Why I Built This

I wanted a setup that could:

Recreate my workstation in minutes
Install required packages automatically
Restore all configurations
Never overwrite files without creating a backup
Stay version-controlled in Git
Be easy to maintain and extend

Instead of manually configuring everything after every reinstall, I wanted to simply run one command.

What's Included

Desktop

Distribution: Arch Linux (Omarchy)
Window Manager: Hyprland
Status Bar: Waybar
Theme: Tokyo Night

Terminal

Terminal: Ghostty
Shell: Zsh
Prompt: Starship
System Information: Fastfetch

Development

Editor: VS Code
Alternative Editor: LazyVim
Terminal Multiplexer: Zellij

Utilities

File Manager: Yazi
Audio: Wiremix
OSD: SwayOSD

Desktop Preview

This is my everyday desktop powered by Hyprland, Waybar, Ghostty, and the Tokyo Night color scheme.

The goal wasn't to create an eye-catching desktop for screenshots—it was to build something comfortable enough to use every day for software development.

Terminal Setup

Ghostty has become my preferred terminal thanks to its speed and modern rendering.

Combined with Zsh, Starship, and Fastfetch, it creates a clean and productive terminal experience.

VS Code Configuration

Although the repository also includes my LazyVim configuration, VS Code is currently my primary editor.

My VS Code setup includes custom settings, extensions, keybindings, and themes that match the rest of the desktop.

Yazi File Manager

Yazi is an incredibly fast terminal file manager that fits naturally into my workflow.

It's keyboard-driven, lightweight, and feels right at home alongside the rest of the terminal-based tools.

One Command Installation

For a fresh Arch installation, everything can be installed using:

curl -fsSL https://raw.githubusercontent.com/Aashutosh31/dotfiles/main/bootstrap.sh | bash

The bootstrap script automatically:

Installs Git (if needed)
Installs yay
Clones the repository
Installs required packages
Applies all configurations

After that, the actual installation is handled by install.sh.

Automatic Backups

One feature I cared about the most was safety.

Before replacing any configuration, the installer creates a timestamped backup.

Example:

~/.dotfiles-backup/
└── 20260720-184501/

Nothing gets overwritten without first being backed up.

If I ever want to restore an older configuration, it's just a simple copy operation.

Repository Structure

.
├── hypr/
├── ghostty/
├── fastfetch/
├── starship/
├── yazi/
├── vscode/
├── waybar/
├── wallpapers/
├── packages/
├── scripts/
├── install.sh
└── bootstrap.sh

Keeping every application's configuration inside its own directory makes the repository easier to maintain and extend over time.

Why I Didn't Use GNU Stow

Many dotfile repositories rely on GNU Stow.

While it's a great tool, I wanted something that also handled package installation, backups, and first-time machine setup.

The installer performs everything in one workflow:

Package installation
Backup creation
Configuration deployment
Initial machine bootstrap

This makes it much easier to move to a brand-new machine.

Lessons Learned

Working on this project taught me a lot beyond shell scripting.

Some takeaways:

Good documentation is just as important as good code.
Automated backups make installation much safer.
Modular configuration directories are much easier to maintain.
Version-controlling your development environment saves a tremendous amount of time.
Small automation scripts quickly become some of the most useful tools you write.

Future Improvements

There are still plenty of ideas I'd like to add:

Theme switching
Optional package groups
Better wallpaper management
CI validation
More customization options

Final Thoughts

What started as a personal backup of my Linux setup gradually evolved into a fully reproducible development environment.

If you're using Arch Linux, Omarchy, or Hyprland, I hope this repository helps you build your own workflow—or at least gives you some ideas for organizing your own dotfiles.

If you find it useful, feel free to ⭐ star the repository, open an issue, or suggest improvements.

I'd love to hear your feedback.

GitHub Repository

https://github.com/Aashutosh31/dotfiles

ARC-AI: I built an autonomous, AI agent workspace Using MERN stack (RAG memory, live web research, WhatsApp automation, and more)

Aashutosh Bairagi — Sat, 18 Jul 2026 18:54:45 +0000

🤖 What is ARC-AI?

ARC-AI (Autonomous Real-time Conversational Agent) is a full-stack, voice-activated AI assistant I've been building that goes beyond the typical "chatbot with a system prompt." It's a persistent, AI workspace with long-term memory, live web research, proactive scheduled routines, and the ability to actually act — sending WhatsApp messages, emails, and controlling its own UI.

Think of it as sitting somewhere between ChatGPT, Claude, and Cursor — but self-hosted, MERN-based, and fully yours.

🔗 Live demo: https://arc-ai-project.vercel.app/
🔗 Source code: https://github.com/Aashutosh31/arc-ai-project
📽️ Latest Video:https://www.instagram.com/aashutosh_bairagi.31/reel/DYmluEPxOhf/
🎥 Full walkthrough: https://www.youtube.com/watch?v=jt7q8v5KsrU

Why I built it

Most "AI assistants" are reactive — you ask, it answers, and it forgets everything the moment the tab closes. I wanted something that behaves more like an actual agent: it remembers what matters, researches things on its own, runs scheduled tasks in the background, and can reach across into the real world (browser, WhatsApp, email) instead of being boxed into a chat window.

That meant building real infrastructure, not just wiring up an LLM API call — a provider-agnostic runtime, workspace isolation, vector memory, sandboxed code execution, and production-grade lifecycle management.

🧠 Core Features

Infinite Memory (RAG)

ARC-AI doesn't just keep a chat log — it separates memory into four distinct layers to avoid contamination and keep retrieval sharp:

Conversation History
Working Context
Semantic Memory
Long-Term User Facts Retrieval runs through relevance scoring, recency weighting, and duplicate suppression using Pinecone vector search, so the assistant pulls in prioritized, low-noise context instead of dumping everything it knows into the prompt.

🎥 Live Vision & Multimodal Routing

ARC-AI can see. When you speak while your webcam is active, it captures the current frame and pipes it straight into the same real-time socket payload as your voice input, routing visual context to a vision-capable model (Pixtral) with guardrails to prevent silent attachment loss on fallback.

🌐 Live Web Research

Real-time DOM scraping (Cheerio) plus API-based search, weather, and news retrieval — so answers aren't capped at a training cutoff.

⏰ Proactive Routine Engine

Ask it in plain English and it turns that into a scheduled cron job — recurring reminders, deferred tasks, background routines — no manual cron syntax required.

💬 WhatsApp Automation

Full autonomous message composition and delivery through an integrated WhatsApp workflow, so the agent can actually reach you (or others) outside the app.

🖥️ UI Actuation

The assistant can act on its own interface — switching themes, opening websites, playing media, copying to clipboard — driven directly by conversational context.

🏗️ Under the Hood: Provider-Agnostic, Workspace-Isolated Runtime

The architecture went through several major evolutions to get here:

Provider-orchestrated runtime — an LLMRouter dynamically selects between Gemini (reasoning, multimodal, planning, long-context) and Mistral (fast, cheap, summarization, fallback), while preserving streaming continuity and tool-call consistency across providers.
Multi-workspace runtime — every workspace behaves as its own isolated environment. Conversations, memories, executions, and even Pinecone vector namespaces are fully scoped per workspace, with zero cross-workspace leakage.
Execution isolation — the TaskPlanner/TaskExecutor system keeps retries, recovery, and replanning strictly bound to their originating workspace.

- Realtime Socket.IO pipeline — voice or text input flows through `ai:stt:final`, gets routed for generation, streams token-by-token, and guarantees clean finalization even on interruption.

🔥 What's new in v1.0.0 (first stable release)

The latest release was all about turning ARC-AI from "cool demo" into something you can actually self-host in production:

Security hardening

Replaced the deprecated, vulnerable vm2 executor with QuickJS WebAssembly sandboxing (quickjs-emscripten) for any code the LLM executes — closing an RCE vulnerability.
GOOGLE_TOKEN_ENCRYPTION_KEY is now a mandatory env var — the server fails fast on startup if it's missing, instead of silently falling back to something insecure.
Replaced wildcard CORS with a dynamic origin resolver, fixing credentialed-request validation issues. Runtime reliability
An activity-aware idle reaper kills headless Chromium (WhatsApp) sessions after 5 minutes of inactivity, so it stops eating RAM/CPU.
Graceful shutdown on SIGINT/SIGTERM — HTTP servers, MongoDB connections, and Puppeteer/WhatsApp processes all tear down cleanly and in parallel.
Fixed race conditions between client destruction and recovery hooks. Onboarding & deployment
Docker Compose now uses portable relative bind mounts instead of hardcoded host paths.

- Full `.env.example` templates for both root and server, documenting every LLM routing/model/timeout option.

💻 Tech Stack

Layer	Technology
Frontend	React, Vite, Tailwind CSS, Web Speech API
Backend	Node.js, Express.js, Socket.IO, node-cron
Database	MongoDB Atlas, Pinecone (vector RAG)
AI / ML	Gemini, Mistral AI, Pixtral
Infra	Docker Compose, Google Apps Script (webhook email)

⚙️ Try it yourself

git clone https://github.com/Aashutosh31/arc-ai-project.git
cd arc-ai-project/server
npm install
cp .env.example .env   # fill in your keys — GOOGLE_TOKEN_ENCRYPTION_KEY is mandatory
npm run dev

Or spin it up with Docker:

cd server
cp .env.example .env
docker compose up --build

Full setup instructions (frontend, Docker, persistent WhatsApp sessions) are in the README.

What's next

I'm continuing to harden the multi-workspace runtime and expand the autonomous tool ecosystem. If you try it out, run into issues, or have ideas, I'd genuinely love the feedback — issues and PRs are open on the repo.

If this is interesting to you, a ⭐ on the repo goes a long way.

🔗 GitHub: github.com/Aashutosh31
🔗 LinkedIn: https://in.linkedin.com/in/aashutosh-bairagi-559aa530b
🐦 X/Twitter: @Aashutosh_dev31
🌐 Portfolio: aashutoshbairagi.vercel.app

How I Built a Real-Time Stock Suggestion App with the MERN Stack, WebSockets, and Algorithmic Trading Logic ?

Aashutosh Bairagi — Mon, 10 Nov 2025 17:59:12 +0000

Web Application Link

Finance and tech are converging faster than ever. As developers, we have the tools to build incredibly powerful applications that demystify market data. I set out to do just that: build a full-stack web application that not only tracks stock data but also provides actionable, AI-driven suggestions in real-time.

This article is a technical deep-dive into the architecture and key features of my Stock Suggestion App. We'll cover the "AI" backend, the real-time WebSocket layer, and how it all connects to a resilient React frontend.

The Tech Stack 🥞

1.Frontend: React 18, Vite, React Router 7, Tailwind CSS, Framer Motion.
2.State Management: @tanstack/react-query (for server state) & React Context (for auth/theme).
3.Backend: Node.js, Express, Mongoose (MongoDB).
4.Real-time Layer: ws (WebSocketServer).
5.Authentication: Passport.js.
6.Charting: lightweight-charts & recharts.

The Architecture: A Three-Layered Approach

The app is broken down into three core components: the "AI" Signal Service, the Real-time Data Hub, and the Reactive Frontend.

1. The "Brain": Algorithmic Signal Generation

The term "AI" gets thrown around a lot. In this project, it refers to a dedicated backend service (signalService.js) that runs technical analysis on historical stock data to generate actionable insights.

It calculates several key Technical Indicators (TIs):

Simple Moving Average (SMA): I calculate both the 50-day and 200-day SMAs to identify long-term trends.
Relative Strength Index (RSI): A proxy calculation to determine if a stock is overbought or oversold.
Moving Average Convergence Divergence (MACD): A proxy to gauge momentum by comparing short-term and long-term averages.

These indicators are fed into two key functions:
1.determineSignal(latestData): This function applies a rules-based logic (e.g., "if RSI < 30 and MACD > 0, signal 'Strong Buy'") to provide a clear BUY, SELL, or HOLD recommendation.

2.calculateTrendingScore(latestData): This is the secret sauce for the "Top Picks" page. It generates a proprietary score from 0-100 based on a weighted average of momentum, RSI strength, and long-term trend confirmation (e.g., is the price above its 200-day SMA?).

This service runs on the backend, enriches the data, and saves the results to MongoDB. This pre-calculated data is then served to the user.

2. The "Heartbeat": Real-Time with WebSockets

A stock app without real-time data feels static. I used the ws library to build a lightweight WebSocket server that integrates directly with the main Express API.

On the Backend (server.js): Instead of running a separate server, I attach the WebSocketServer to the same HTTP server instance that Express uses. This is efficient and simplifies deployment.

// In server.js...
import { WebSocketServer } from 'ws';
import { handleConnection } from './core/websocket.js';

// ... after mongoose connects ...
const server = app.listen(process.env.PORT || 5000, /* ... */);

// --- 2. INITIALIZE THE *NEW* WEBSOCKET SERVER ---
const wss = new WebSocketServer({ server }); // Attach to the Express server

wss.on('connection', (ws) => {
    handleConnection(ws); // Delegate logic to a separate module
});

console.log("✅ Real-time WebSocket service initialized...");

This handleConnection module is responsible for managing connected clients and, crucially, broadcasting real-time price and signal updates as they happen.

3. The "Face": A Resilient React Frontend

The frontend's main challenge is managing data from two sources: a traditional REST API (for historical data, watchlist) and a WebSocket (for live updates).

1.The Hybrid Data-Fetching Pattern: I landed on a powerful hybrid pattern using Tanstack Query (React Query) and a WebSocketContext. The TopPicks.jsx page is the best example of this.

2.Initial Load (HTTP): The page first uses useQuery to fetch the pre-calculated list of top picks from the /api/stocks/top-picks REST endpoint. This gives the user instant, cached data.

3.Live Updates (WebSocket): Simultaneously, useWebSocket() (from my custom context) is connected. It listens for live "tick" messages from the server.

4.Merging Data: The component intelligently decides which data to display. If the WebSocket is connected and has sent data, it uses that live data. If not, it falls back to the useQuery batch data.

Here's the key logic from TopPicks.jsx:

// In TopPicks.jsx...
import { useWebSocket } from '../context/WebSocketContext';
import { useQuery } from '@tanstack/react-query';

// ...

const { topPicks: wsTopPicks, realtimeData } = useWebSocket();
const { data: batchData, isLoading } = useQuery(
    'topPicksBatch', 
    () => fetchTopPicksBatch(token),
    { enabled: wsTopPicks.length === 0 } // Only run if WS isn't ready
);

// Source of Truth: Prefer live data, fall back to batch API data
const sourceData = wsTopPicks.length > 0 ? wsTopPicks : (batchData?.picks || []);

// Combine with real-time price ticks
const rankedStocks = sourceData.map(stock => {
    const realtime = realtimeData[stock.symbol] || {};
    return {
        ...stock,
        latestPrice: realtime.price || stock.latestPrice,
        signal: realtime.signal || stock.signal, // Live signal!
    };
}).sort((a, b) => b.trendingScore - a.trendingScore);

This pattern makes the app feel incredibly fast and resilient. It loads instantly and provides live-tick updates without complex state management. For simpler data, like the WatchlistPage.jsx, I just use useQuery for a standard, cached fetch.

Polishing the UI: To make the app feel modern, I used Tailwind CSS for all styling and Framer Motion to add subtle, satisfying animations, like the card load-in effect on the Top Picks page.

Conclusion

Building this app was a fantastic journey into combining data-driven backend logic with a high-performance, real-time frontend. The core challenge—merging historical analysis with live data—was solved by the hybrid useQuery/WebSocket pattern. The signalService.js was my first real attempt at codifying trading logic, and the ws library proved to be a simple yet powerful tool for the real-time layer.

This architecture provides a scalable and responsive foundation, and I'm excited to continue refining the signal algorithms.

Thanks for reading! I hope this deep-dive was useful. What real-time data challenges are you tackling?

How I built a Stock Suggestion app using React + node.js + free APIs ?

Aashutosh Bairagi — Mon, 10 Nov 2025 17:43:06 +0000

Application Link

This is How I Built a Real-Time Stock Suggestion App with the MERN Stack, WebSockets, and Algorithmic Trading Logic!

The Tech Stack 🥞

1.Frontend: React 18, Vite, React Router 7, Tailwind CSS, Framer Motion.

2.State Management: @tanstack/react-query (for server state) & React Context (for auth/theme).

3.Backend: Node.js, Express, Mongoose (MongoDB).

4.Real-time Layer: ws (WebSocketServer).

5.Authentication: Passport.js.

6.Charting: lightweight-charts & recharts.

The Architecture: A Three-Layered Approach

The app is broken down into three core components: the "AI" Signal Service, the Real-time Data Hub, and the Reactive Frontend.

1. The "Brain": Algorithmic Signal Generation

It calculates several key Technical Indicators (TIs):

Simple Moving Average (SMA): I calculate both the 50-day and 200-day SMAs to identify long-term trends.
Relative Strength Index (RSI): A proxy calculation to determine if a stock is overbought or oversold.
Moving Average Convergence Divergence (MACD): A proxy to gauge momentum by comparing short-term and long-term averages.

These indicators are fed into two key functions:

determineSignal(latestData): This function applies a rules-based logic (e.g., "if RSI < 30 and MACD > 0, signal 'Strong Buy'") to provide a clear BUY, SELL, or HOLD recommendation.
calculateTrendingScore(latestData): This is the secret sauce for the "Top Picks" page. It generates a proprietary score from 0-100 based on a weighted average of momentum, RSI strength, and long-term trend confirmation (e.g., is the price above its 200-day SMA?).

2. The "Heartbeat": Real-Time with WebSockets

A stock app without real-time data feels static. I used the ws library to build a lightweight WebSocket server that integrates directly with the main Express API.

On the Backend (server.js): Instead of running a separate server, I attach the WebSocketServer to the same HTTP server instance that Express uses. This is efficient and simplifies deployment.

// In server.js...
import { WebSocketServer } from 'ws';
import { handleConnection } from './core/websocket.js';

// ... after mongoose connects ...
const server = app.listen(process.env.PORT || 5000, /* ... */);

// --- 2. INITIALIZE THE *NEW* WEBSOCKET SERVER ---
const wss = new WebSocketServer({ server }); // Attach to the Express server

wss.on('connection', (ws) => {
    handleConnection(ws); // Delegate logic to a separate module
});

console.log("✅ Real-time WebSocket service initialized...");

This handleConnection module is responsible for managing connected clients and, crucially, broadcasting real-time price and signal updates as they happen.

3. The "Face": A Resilient React Frontend

The frontend's main challenge is managing data from two sources: a traditional REST API (for historical data, watchlist) and a WebSocket (for live updates).

The Hybrid Data-Fetching Pattern: I landed on a powerful hybrid pattern using Tanstack Query (React Query) and a WebSocketContext. The TopPicks.jsx page is the best example of this.

Initial Load (HTTP): The page first uses useQuery to fetch the pre-calculated list of top picks from the /api/stocks/top-picks REST endpoint. This gives the user instant, cached data.
Live Updates (WebSocket): Simultaneously, useWebSocket() (from my custom context) is connected. It listens for live "tick" messages from the server.

3.Merging Data: The component intelligently decides which data to display. If the WebSocket is connected and has sent data, it uses that live data. If not, it falls back to the useQuery batch data.

// In TopPicks.jsx...
import { useWebSocket } from '../context/WebSocketContext';
import { useQuery } from '@tanstack/react-query';

// ...

const { topPicks: wsTopPicks, realtimeData } = useWebSocket();
const { data: batchData, isLoading } = useQuery(
    'topPicksBatch', 
    () => fetchTopPicksBatch(token),
    { enabled: wsTopPicks.length === 0 } // Only run if WS isn't ready
);

// Source of Truth: Prefer live data, fall back to batch API data
const sourceData = wsTopPicks.length > 0 ? wsTopPicks : (batchData?.picks || []);

// Combine with real-time price ticks
const rankedStocks = sourceData.map(stock => {
    const realtime = realtimeData[stock.symbol] || {};
    return {
        ...stock,
        latestPrice: realtime.price || stock.latestPrice,
        signal: realtime.signal || stock.signal, // Live signal!
    };
}).sort((a, b) => b.trendingScore - a.trendingScore);

Polishing the UI: To make the app feel modern, I used Tailwind CSS for all styling and Framer Motion to add subtle, satisfying animations, like the card load-in effect on the Top Picks page.

Conclusion

This architecture provides a scalable and responsive foundation, and I'm excited to continue refining the signal algorithms.

Thanks for reading! I hope this deep-dive was useful. What real-time data challenges are you tackling?

DEV Community: Aashutosh Bairagi

From a Fresh Arch Install to a Fully Configured Development Environment in One Command

Introduction

Why I Built This

What's Included

Desktop

Terminal

Development

Utilities

Desktop Preview

Terminal Setup

VS Code Configuration

Yazi File Manager

One Command Installation

Automatic Backups

Repository Structure

Why I Didn't Use GNU Stow

Lessons Learned

Future Improvements

Final Thoughts

GitHub Repository

ARC-AI: I built an autonomous, AI agent workspace Using MERN stack (RAG memory, live web research, WhatsApp automation, and more)

🤖 What is ARC-AI?

Why I built it

🧠 Core Features

Infinite Memory (RAG)

🎥 Live Vision & Multimodal Routing

🌐 Live Web Research

⏰ Proactive Routine Engine

💬 WhatsApp Automation

🖥️ UI Actuation

🏗️ Under the Hood: Provider-Agnostic, Workspace-Isolated Runtime

- Realtime Socket.IO pipeline — voice or text input flows through ai:stt:final, gets routed for generation, streams token-by-token, and guarantees clean finalization even on interruption.

🔥 What's new in v1.0.0 (first stable release)

- Full .env.example templates for both root and server, documenting every LLM routing/model/timeout option.

💻 Tech Stack

⚙️ Try it yourself

What's next

How I Built a Real-Time Stock Suggestion App with the MERN Stack, WebSockets, and Algorithmic Trading Logic ?

The Architecture: A Three-Layered Approach

1. The "Brain": Algorithmic Signal Generation

2. The "Heartbeat": Real-Time with WebSockets

3. The "Face": A Resilient React Frontend

Conclusion

How I built a Stock Suggestion app using React + node.js + free APIs ?

This is How I Built a Real-Time Stock Suggestion App with the MERN Stack, WebSockets, and Algorithmic Trading Logic!

The Architecture: A Three-Layered Approach

1. The "Brain": Algorithmic Signal Generation

2. The "Heartbeat": Real-Time with WebSockets

3. The "Face": A Resilient React Frontend

Conclusion

- Realtime Socket.IO pipeline — voice or text input flows through `ai:stt:final`, gets routed for generation, streams token-by-token, and guarantees clean finalization even on interruption.

- Full `.env.example` templates for both root and server, documenting every LLM routing/model/timeout option.