DEV Community: Shani Tiwari

Become pro dev fast with WebTree

Shani Tiwari — Wed, 19 Aug 2026 14:01:00 +0000

I added a new category to my developer resources website. 👀

“Be Pro” 🚀WebTree

The idea is simple:

You don't always need a 3-hour tutorial to improve your development skills.

Sometimes, a 10–20 minute problem can teach you more because you're actually solving something.

What I added 👇

I collected some crazy little websites/tools** where you can practice:

→ JavaScript
→ React
→ Other development concepts

Each one gives you a small problem or challenge.

You try it.

You get stuck.

You search.

You experiment.

And suddenly you understand something you wouldn't learn by just watching another tutorial. 😅

Why I like this approach

We often say:

“I need to learn more JavaScript.”

But instead of consuming more content, try solving one small problem today.

10–20 minutes.
One problem.
One new concept understood.

Do that consistently and your skills compound. 📈

I added these under Be Pro on my developer resources website.

Go pick one challenge and try it.

Don't just learn the tech.
Make the tech fight back a little. 😄

Because getting stuck on a small problem is often where the real learning starts.

Ai in Docs - Saviour of Dev's

Shani Tiwari — Sun, 16 Aug 2026 05:54:00 +0000

AI in docs changed how I learned to build a SaaS. 🤯

I recently built a SaaS using:

→ Next.js
→ Clerk + custom auth flow
→ PostgreSQL / Neon DB
→ Drizzle ORM

The interesting part?

I didn't actually know PostgreSQL or SQL queries properly. 😅

And still, I was able to build the flow I needed.

What made it easier?

AI inside documentation.

Normally, the problem is:

“I know what I want to do… but I don't even know what this feature is called.”

So searching docs becomes difficult.

With AI, I can explain the context:

“I'm getting this data, I need to connect it with this table, and then return it like this…”

And AI can help me find:

→ the right method
→ the right property
→ the right docs page
→ the right way to structure it

That saved me from spending hours trying to guess the correct technical keyword.

What I learned from this 👇

I don't think developers need to memorize every technology.

What matters more is understanding the flow:

Requirement → Data → Logic → Connection → Response

How data is generated.
How it moves.
What connects to what.
What should happen next.

Once you understand that, learning the actual technology becomes much easier.

So my approach now 🚀

Understand what I want to build.
Break the requirement into a simple flow.
Explain the problem with context.
Use AI + official docs to find the correct implementation.
Build it.
Understand what the code actually did.
Repeat.

That's how you can build real projects while learning the technology at the same time.

One important nuance though:

AI can help you find the path, but you still need to understand the road you're driving on. 😄

Using AI isn't replacing learning.

It's making the learning loop much faster.

JSX - 0 to Hero

Shani Tiwari — Sat, 15 Aug 2026 05:32:00 +0000

key takeaways:

Definition: JSX stands for JavaScript XML. It is a syntax extension that allows you to write HTML-like code directly within JavaScript.
Role of XML: The "XML" in JSX refers to the ability to define custom tags, providing the flexibility to create reusable UI components.
Purpose: It was introduced to solve the problem of separating UI logic from markup, which was common in older template-based libraries. It keeps rendering logic and UI logic in the same place.
Readability: JSX serves as a visual aid, making the code more readable and intuitive to write compared to using pure JavaScript functions like React.createElement.
JavaScript Integration: You can embed any valid JavaScript expression inside JSX by wrapping it in curly braces.
Compilation: Browsers cannot read JSX directly. Tools like Babel act as a translator, converting JSX into JavaScript function calls that produce React elements.
Single Parent Requirement: A JSX expression must always return a single parent element. If you need to return multiple items without adding an extra node, you can use React Fragments (empty tags).
Camel Case Attributes: Most HTML attributes in JSX must be written in camel case (e.g., onClick), because JSX is closer to JavaScript than traditional HTML.
Exceptions: Some attributes like class become className, and for becomes htmlFor to avoid conflicts with JavaScript reserved keywords. Aria and data attributes remain unchanged.
Security: JSX helps prevent injection attacks by automatically escaping data, which prevents malicious code from being executed when rendering content.
File Extensions: Using a .jsx extension is a hint to build tools like Babel that the file contains JSX code, but it is technically optional if your environment is configured correctly.

🧑‍💻 5 Tools Every Beginner Developer Should Understand

Shani Tiwari — Thu, 13 Aug 2026 10:12:00 +0000

🧑‍💻 5 Tools Every Beginner Developer Should Understand

If you're starting to build real-world apps, you'll eventually hear terms like ORM, ODM, Webhooks, Clerk, Drizzle, LocalTunnel.

Here's what they actually mean 👇

1. Drizzle ORM 🗄️

Drizzle helps your JavaScript/TypeScript code communicate with a SQL database without writing raw SQL everywhere.

Think:

Your code → Drizzle → PostgreSQL

Instead of manually writing SQL, you can work with your database using TypeScript.

2. ORM / ODM 🔄

ORM = Object-Relational Mapper
Used with SQL databases like PostgreSQL/MySQL.

It maps:

JavaScript/TypeScript objects ↔ Database tables

ODM = Object-Document Mapper
Usually used with NoSQL databases like MongoDB.

So:

SQL → ORM
MongoDB/Document DB → ODM

Drizzle is an ORM.

3. Webhook 🔔

A webhook lets another service notify your application when something happens.

Example:

User signs up on Clerk → Clerk sends webhook → Your server creates the user in your database.

Instead of your app constantly asking:

“Did something happen?”

The service tells your app:

“Hey, something just happened!”

4. Clerk 🔐

Clerk handles authentication and user management for your application.

It can handle things like:

Sign up
Login
Email verification
Sessions
User profiles
Social login

So you don't have to build authentication completely from scratch.

5. LocalTunnel 🌐

Your local app normally lives at:

localhost:3000

Other people/services on the internet can't normally access it.

LocalTunnel gives your local server a temporary public URL.

localhost:3000
       ↓
LocalTunnel
       ↓
https://something.loca.lt

This is especially useful when testing webhooks locally.

🧠 Easy way to remember

Clerk → Who are you? 🔐
Drizzle → How do I talk to my database? 🗄️
ORM/ODM → How does my code map to database data? 🔄
Webhook → Tell me when something happens. 🔔
LocalTunnel → Let the internet reach my local app. 🌐

My First SAAS Building Experience

Shani Tiwari — Tue, 11 Aug 2026 23:00:00 +0000

My First SaaS Building Experience 🚀

I started building my first serious SaaS project with:

Next.js + Clerk + Neon + Drizzle ORM

I had used Next.js before, but never at this level. This project quickly became less about building an app and more about learning how real applications actually work.

1. It started with a tutorial

Initially, I was following a tutorial to understand the basics of building a SaaS.

The stack was new to me:

Next.js
Clerk
Neon
Drizzle ORM
RBAC
Database + authentication

At first, things felt pretty straightforward.

Clerk authentication was especially easy because of its built-in flow and good documentation.

But that didn't last long. 😅

2. Then I reached the database

This was where things became interesting.

I'm not very good with SQL, and Neon + Drizzle was completely new to me.

The tutorial was using Prisma, but I ran into problems setting up an account with Prisma.

I had two choices:

Stop and follow the exact tutorial setup
or
figure out Drizzle myself.

I chose the second one.

3. The turning point 🔥

I started reading the Drizzle documentation.

Then more documentation.

Then debugging.

Then changing things.

Then breaking them again. 😅

One of my biggest struggles was understanding how to properly define the database schema and relationships.

But eventually, I got the Drizzle setup working and started connecting it with Neon.

That was probably the biggest turning point of this project.

I wasn't just copying the tutorial anymore.

I was figuring out how to replace one technology with another and make it work myself.

4. The smallest moment felt huge 📩

One of my favorite moments so far was receiving the email verification code from my own project.

It sounds small.

But seeing an authentication flow that I had configured and debugged actually work felt really satisfying.

That's when it felt like:

“Okay... I'm actually building a SaaS.”

5. What I'm actually learning

The biggest lesson hasn't been learning another library.

It's learning how to learn a technology when someone isn't showing me every step.

I'm learning to:

Read documentation properly
Debug unfamiliar errors
Understand schemas and relationships
Work with ORMs
Connect authentication with databases
Understand RBAC
Make decisions when the tutorial doesn't match my setup

And probably the most important one:

Don't depend completely on the tutorial.

A tutorial can show you one way.

Your job as a developer is to understand why it works and how to build your own way.

6. Where I am now 🚧

The project is still being built.

Done:

✅ Next.js setup
✅ Clerk authentication
✅ Email verification
✅ Basic auth flow
✅ Neon + Drizzle setup

Still working on:

🔨 Webhooks
🔨 Database CRUD
🔨 RBAC implementation
🔨 Completing the SaaS

7. The real takeaway

I'm still learning and the project is nowhere near finished.

But this experience has already changed how I approach learning.

Earlier, I wanted to finish tutorials.

Now I want to reach the point where the tutorial ends and think:

“Cool. Now let me figure out the rest.” 🚀

Small Update, Big Difference

Shani Tiwari — Tue, 11 Aug 2026 06:37:00 +0000

Spent some time polishing my Framer template:

→ ✨ Better animations & interactions

→ 🌓 Refined shadows + UI details

→ 🛠️ Fixed project card elements

→ 💬 Added tooltips

→ 🔗 Added social links

But I’m stuck on one thing:

The second section of project cards.

Desktop looks good — but how should I present them on mobile?

👉 Stack them?

👉 Horizontal scroll?

👉 Show fewer cards?

Still figuring out the cleanest solution without making the mobile UI feel crowded.

https://shani-tiwari.framer.template

🔐 Access Control — 5 ways to decide “Who can access what?

Shani Tiwari — Sun, 09 Aug 2026 02:05:39 +0000

🔐 Access Control — 5 ways to decide “Who can access what?”

RBAC asks “What is your role?”

ReBAC asks “How are you related?”

PBAC asks “What does the policy say?”

ABAC asks “What are your attributes?”

FGAC asks “Exactly what are you allowed to touch?”

RBAC — Role-Based Access Control

Permissions are based on the user's role.
→ A Developer can access code, while an Admin can manage users.

ReBAC — Relationship-Based Access Control

Permissions are based on the relationship between the user and resource.
→ You can edit a GitHub repo because you are its owner.

PBAC — Policy-Based Access Control

Access is decided by rules/policies defined by the system.
→ Allow deployment only when the branch is main and tests have passed.

ABAC — Attribute-Based Access Control

Access depends on attributes of the user, resource, or request.
→ Allow access if role = developer and environment = staging.

FGAC — Fine-Grained Access Control

Permissions are controlled at a very specific level, rather than giving broad access.
→ A developer can edit user.name but cannot access user.password.

Now you know something new, feel free to ask question or search for more information and grow.

Connect:

Github - https://github.com/shani-tiwari

IG - https://instagram.com/shani.develops

X - https://x.com/shanidevelops

Webtree - Resources Hub for Dev's

Shani Tiwari — Sun, 31 May 2026 08:40:12 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built - WebTree

why I built it - As an developer I had many bookmark folders having multiple websites for assets, fonts, videos, design ideas, UI library etc...to not waste my time in searching for websites when needed, but once I lost 1 saved website & that's my fav. one, my go to website for animation inspiration but i lost it.
By the time i'm also thinking about building something by my own and not another tutorial project, so i build...
Webtree - a place where you get 140+ categorized dev resources & u can directly save them, visit , copy link, share them.
your saved websites goes to personal collection.
As a dev I hate creating account for an tool - so in webtree, there's nothing to stop you. you go & get access for free resource library.

Live Link - https://webtree.shaniweb.com
home page -

about page -

Reviews page -

Collection page -

--- project started with 7-8 categories and 40-50 websites that's already in my saved.
--- But as i got reviews and suggestions on X, linkedin, the website, categories increases with 15 category and 140+ websites.

X - https://x.com/shanidevelops
linkedin- https://linkedin.com/in/theshanitiwari
ig - https://instagram.com/shani.develops

DEV Community: Shani Tiwari

Become pro dev fast with WebTree

What I added 👇

Why I like this approach

I added these under Be Pro on my developer resources website.

Ai in Docs - Saviour of Dev's

AI in docs changed how I learned to build a SaaS. 🤯

What made it easier?

What I learned from this 👇

So my approach now 🚀

JSX - 0 to Hero

🧑‍💻 5 Tools Every Beginner Developer Should Understand

🧑‍💻 5 Tools Every Beginner Developer Should Understand

1. Drizzle ORM 🗄️

2. ORM / ODM 🔄

3. Webhook 🔔

4. Clerk 🔐

5. LocalTunnel 🌐

🧠 Easy way to remember

My First SAAS Building Experience

My First SaaS Building Experience 🚀

1. It started with a tutorial

2. Then I reached the database

3. The turning point 🔥

4. The smallest moment felt huge 📩

5. What I'm actually learning

6. Where I am now 🚧

Done:

Still working on:

7. The real takeaway

Small Update, Big Difference

🔐 Access Control — 5 ways to decide “Who can access what?

Webtree - Resources Hub for Dev's

What I Built - WebTree

My Experience with GitHub Copilot