DEV Community: pranay rauthu

We added functionality to store git diffs and preview them!!!

pranay rauthu — Fri, 22 May 2026 19:58:13 +0000

pranay rauthu

May 16

✦ DevPen: The AI-Powered Note-Taking App for Developers 🚀

#webdev #productivity #react #opensource

Comments

2 min read

✦ DevPen: The AI-Powered Note-Taking App for Developers 🚀

pranay rauthu — Sat, 16 May 2026 20:46:37 +0000

If you’re a developer, your notes are probably a mess of snippets, architectural diagrams, and quick thoughts scattered across different apps. I built DevPen to solve this—a note-taking application designed specifically for the developer workflow.

🔗 Try it live at: devpen.in

In this post, I’ll walk through the key features that make DevPen more than just another text editor.

1. The Dual-Editor Experience: Markdown + Monaco 💻

Why choose between the speed of Markdown and the power of a real code editor? DevPen gives you both:

Markdown Mode: Powered by Lexical, it’s perfect for fast, structured writing.
Rich Text / Code Mode: Powered by the Monaco Editor (the same engine behind VS Code). You get proper syntax highlighting and that familiar feel while drafting technical docs.

You can switch between them seamlessly, and the app preserves your formatting and metadata.

2. Your AI Sidekick ✨

Taking notes is only half the battle; finding and using them is the other half. DevPen includes an AI Sidekick (powered by OpenAI) that lives in your sidebar to help you:

Summarize: Turn long brain-dumps into actionable bullet points.
Explain Commands: Stuck on a complex regex or shell script? Ask the AI to break it down.
Refine Tone: Polish your rough notes into professional updates or documentation.

3. Visualizing Logic with Mermaid.js 📊

Sometimes text isn't enough. DevPen supports Mermaid diagrams out of the box. You can write your flowcharts or sequence diagrams in text and have them rendered instantly. It’s perfect for mapping out system architectures or logic flows without leaving your notes.

4. Developer-First Tech Stack 🛠️

Under the hood, DevPen is built with modern, scalable technologies:

Frontend: React 19, Tailwind CSS, Shadcn UI, and Jotai for state management.
Backend: Node.js / TypeScript running on AWS Lambda.
Storage: A smart hybrid approach using DynamoDB for metadata and S3 for note content (ensuring you can save even the largest technical docs without hitches).
Authentication: Secure access via Google Sign-in and OTP validation.

5. Cloud Sync & Responsive Design ☁️

Inspiration strikes everywhere. DevPen is fully responsive, looking great on both desktop and mobile. All your notes are auto-synced to the cloud, so your thoughts are always where you are.

What do you think?
I built this to solve my own pain points, but I'd love to hear your feedback. What features do you consider absolute must-haves in a developer note-taking app? Let me know in the comments below! 👇

boom - command line http tool

pranay rauthu — Sun, 09 Feb 2020 17:21:43 +0000

I have published my first npm package. 💃💃💃

boom is a cli tool built for working with collection of http requests.

pranayrauthu / boom

command line http client

boom

boom is a command line http tool.

installation

boom can be installed globally by

npm i @prauthu/boom -g

usage

create a file with name file.http with following content

GET https://jsonplaceholder.typicode.com/posts/1

boom x file.http will execute the request in file.http

boom c file.http will convert the request in file.http to curl command.

usage with environments

create a file with name .boom.json with environments in following format.

{
    "activeEnvironment": "default",
    "enviroments": {
        "default": {
            "host": "https://jsonplaceholder.typicode.com"
        }
    }
}

and file.http with following content

GET {{host}}/posts/1

View on GitHub

Sudoku puzzle with react hooks

pranay rauthu — Sun, 04 Aug 2019 06:52:55 +0000

I just got my hands react hooks by creating a sudoku puzzle.

pranayrauthu / pk-sudoku

sudoku app

sudoku puzzle built with react. start playing here

View on GitHub

https://pk-sudoku.pranayrauthu.now.sh

Snippet Generator

pranay rauthu — Sun, 06 Jan 2019 15:27:25 +0000

snippet generator is a small web app to
quickly generate code snippets for vs code, atom & sublime text.

It also allows you to share code snippets with the url

github

Regex tools

pranay rauthu — Tue, 25 Dec 2018 16:38:22 +0000

Regex - tools

working with regex is always painful. most of the time developers end up in copy pasting regular expressions from stack-overflow or other sites. Although this satisfies the needs of most common requirements, it is good to have an idea of what the regex is doing and testing it.

I find following tools very helpful while working with regular expressions.

Any text editor or IDE

most of the modern ides and text editors come with a good regular expression support for searching text.

Regulex

This is one of my favourite developer tool. Regulex helps to visualize the regular expression

regex101

If you want to write, test & play with regex this is a good site. It also has good regex documentation.

uuid in JavaScript.

pranay rauthu — Sun, 21 Oct 2018 03:35:35 +0000

while working with array of components in react js application. react complains us to provide a unique value key prop to the list items. we get away with this warning by adding array index as key. But recently I got to know that this will actually lead to errors when you are updating the array(experienced personally in one of my project). so we need set a unique key other than array index.

After googling about the generating unique id, I got to know few solutions & tricks to generate uids.
I came up with following solution. I believe this will have a very less chance of producing a two unique values.

I've decided to generate an id based on following parameters.

time
randomness
counter

time: let's assume that we get a unique value with current time in ms.

new Date().getMilliseconds();

for a better uniqueness. we can also use performance.now function. more info about performance.now can be found here.

randomness: random number can be generated by calling Math.random()

counter: By any chance if we get two unique numbers successively. Just for safety, we need a counter which resets after certain limit. a circular linked list will be able to to the job.

so putting all together.

    function uniqueId() {
        const firstItem = {
            value: "0"
        };
        /*length can be increased for lists with more items.*/
        let counter = "123456789".split('')
            .reduce((acc, curValue, curIndex, arr) => {
                const curObj = {};
                curObj.value = curValue;
                curObj.prev = acc;

                return curObj;
            }, firstItem);
        firstItem.prev = counter;

        return function () {
            let now = Date.now();
            if (typeof performance === "object" && typeof performance.now === "function") {
                now = performance.now().toString().replace('.', '');
            }
            counter = counter.prev;
            return `${now}${Math.random().toString(16).substr(2)}${counter.value}`;
        }
    }

    const randomIdGenerator = uniqueId();

    randomIdGenerator(); // 3519936476425aaa4f2a048 
    randomIdGenerator(); // 3519936472474f1e8119427
    randomIdGenerator(); // 35199364800000017a40a2d1eaa226

this stackoverflow thread has many more solutions.

Please comment below if you know any other techniques to generate uuid.

Webin - html, javascript, css playground

pranay rauthu — Sat, 06 Oct 2018 17:42:01 +0000

I recently started working on a simple web playground.

pranayrauthu / webin

html, css & javascript playground

Webin

webin is web playground to work with html, css & javascript.

Note: This app is still in beta stage. try it for free here

View on GitHub

correct way to request user permissions in browser?

pranay rauthu — Sun, 09 Sep 2018 07:04:35 +0000

This is what happens when I navigate to any website these days.

I open the website.
boom we use cookies is that ok.
me: yes (as if I have a choice)
do you want to enable push notifications.
me: no
add to home scre...

me: close the browser.

any ideas/suggestions how to request permissions without annoying the user?

customizing chrome devtools

pranay rauthu — Wed, 13 Jun 2018 15:09:19 +0000

for frontend developers, devtools is as important as IDE or text editor. Personally, I change my IDE theme frequently & always try to experiment with different fonts. Chrome devtools offer two themes(light & dark). you can try different devtools themes from chrome webstore.

One of the annoying things to me about chrome devtools is it doesn't allow you to change devtools font. Luckily we can override it with extensions. I have created an extension for customizing devtools fonts.

To use above mentioned extensions. you need to follow below steps.

Navigate to chrome://flags and enable Developer Tools Experiments
Enable Allow custom UI themes in Experiments tab of chrome devtools settings.

.bashrc alternative in windows

pranay rauthu — Sat, 09 Jun 2018 17:42:13 +0000

.bashrc is a very useful file in Linux environments. It basically runs every time a new Linux shell is opened & you can add commands like aliases. I wanted to have something similar in windows. After searching over internet I have found the following technique.

create a .bat file with the command name in a directory. (for example if you want to use ls to list directories create a file with the name ls.bat in C:\myBatCommands with dir in it.)
add the folder(C:\myBatCommands) to PATH environment variable
you can start using the commands.

This looks simple but every time you want to add a command you need to create a new file with the name in the folder. so create a .bat file(something like cmdrc.bat) to simplify this with following content.


@echo off

set filename=%~1
set command=%~2

echo %command% > C:\myBatCommands\%filename%.bat

Anytime you want to add a command to the folder run the following command.


#cmdrc <alias-name> <command>
cmdrc ls dir

There are couple of other ways listed here. If there are any others ways of achieving the same please post in comments.

EDIT: 4-11-2018

If you are using powershell you can use profile.ps1 with all the aliases. for more info.

How to generate code for http requests

pranay rauthu — Thu, 10 May 2018 18:52:22 +0000

check this webapp to generate code for http requests.

pranayrauthu / fetcher

http request code generator

Fetcher

generate HTTP request code for various languages. try it for free here.

Generates Snippets for

JavaScript Fetch
cURL
HTTP
C#
PowerShell
Java

Other Features

HTTP Response (beta)

License

MIT

View on GitHub

UPDATE: 22-06-2019

following features are added in recent updates

request sharing (with permalink)
response preview