DEV Community: Shoaeeb Osman

Practice NSE Trading for Free in India (No Real Money Needed)

Shoaeeb Osman — Wed, 10 Dec 2025 12:23:05 +0000

If you want to learn stock trading in India without risking real money, paper trading is the best way to start. It lets you buy and sell stocks with virtual money while watching real market prices. This is perfect for beginners, students, or anyone who wants to test strategies safely.

One of the easiest tools for this is PaperTrade India (papertrade-india.vercel.app). It’s a simple, fast, and free NSE paper trading simulator made for Indian traders.

✅ Why beginners should paper trade

No real-money risk

Learn intraday and delivery trading

Understand how orders, P&L, and market moves work

Build confidence before entering the real market

🚀 Features of PaperTrade India

Real-time NSE stock prices

Buy/sell with virtual balance

Intraday & delivery modes

Leaderboard to track performance

🎯 Start your trading journey safely

If you want to practice trading before opening a Demat account or risking savings, paper trading is the smartest first step. Use it daily to build consistency and understand the market better.

👉 Try it here:

papertrade-india.vercel.app

🧠 Is This Normal? — A Place to Find Out

Shoaeeb Osman — Thu, 17 Jul 2025 02:25:40 +0000

Have you ever wondered whether something you're thinking or doing is... well, normal?

I recently launched Is This Normal? — a simple, anonymous platform where people can ask questions about their habits, thoughts, or situations and get feedback from the community through voting: “Normal” or “Not Normal.”
Check it out:
https://is-this-normal.onrender.com/
🔍 Features
No sign-up needed to ask or vote

Vote anonymously on others' questions

Browse by categories: social, work, relationships, etc.

Comment and start discussions

Search functionality + dark mode support

SEO optimized for search visibility

🛠️ Built with:
React • Node.js • Express • MongoDB • Render • React Helmet (SEO)

Check it out:

Let me know what you think — and feel free to drop a weird question of your own 😄

I Built a Drag-and-Drop React Form Builder with Zod & React Hook Form – Here’s How

Shoaeeb Osman — Tue, 15 Jul 2025 11:05:48 +0000

Like many React devs, I often found myself rebuilding forms again and again — manually wiring up inputs, validations, conditional fields, and handling submission logic. It got repetitive and frustrating.

So I decided to build something to fix that.

🎯 The Goal:
Create a visual form builder using React that allows developers to:

Drag and drop form fields

Edit their properties visually

Preview the final form live

Export the form as a ready-to-use React component with:

Zod validation

React Hook Form integration

TypeScript types

And so, FormCraft was born.

🔨 Tech Stack
React 18 with hooks and concurrent features

TypeScript for full type safety

Zustand for global state management

@dnd-kit for drag-and-drop

React Hook Form for performant form handling

Zod for schema validation

Tailwind CSS + shadcn/ui for styling

The app is bundled with Vite for blazing-fast dev experience.

🧪 Features at a Glance
✅ Core Features:
Drag & Drop interface (powered by @dnd-kit)

Live preview panel

Export as:

JSON Schema

React + Zod + RHF component

Built-in templates: Contact, Registration, Survey, etc.

🔧 Advanced Features:
Multi-step forms (with step navigation)

Conditional fields (e.g., "show field X if option Y is selected")

Field-level validation with:

Min/max length

Custom regex

Custom error messages

Dark/Light theme (based on system preference or manual toggle)

📦 Form Field Types Supported
Text, Email, Password, Number, Tel, URL

Textarea, Select, Radio, Checkbox

Date, Time, File Upload

🧱 How It Works Behind the Scenes

Form Schema State
All forms are stored as JSON schemas in Zustand. Each field has a unique ID, type, label, validation config, and conditional logic (if applicable).
Drag & Drop UI
Using @dnd-kit, users can drag field types from the left panel into the form canvas. Fields can be reordered and grouped into steps.
Live Preview
The right panel renders a functional React Hook Form version of the form using the internal schema.
Export Options
When ready, users can export:

The raw form schema (JSON)

A working .tsx component with all field logic and Zod validation baked in

Here’s a sample generated form export:

tsx
Copy
Edit
const schema = z.object({
email: z.string().email(),
name: z.string().min(2),
});

const { register, handleSubmit, formState: { errors } } = useForm({
resolver: zodResolver(schema),
});
Pretty slick, right?

🌐 Try the Demo
👉 Live Demo -https://form-craft.onrender.com/

No sign-up needed. Just open it and start building.

🙏 Why I Built It
I wanted to prove to myself that I could:

Build something useful from scratch

Work with modern React tools (like RHF, Zod, Zustand)

Make something other devs could actually use

Honestly, if even a few developers find it helpful, that’s a win for me.

I Built a US News Aggregator Website Using Gemini AI (No Manual Coding!)

Shoaeeb Osman — Sun, 27 Apr 2025 15:31:56 +0000

Hi everyone! 👋

I recently completed a simple US News Aggregator website — and here's the interesting part: I didn't write a single line of code myself!
I used Gemini AI to guide me through the entire process.

It was a really cool experience where I combined AI's coding capabilities with my ideas to bring a small project to life. 🚀

🌟 What the Website Does
It shows news articles from different sources.

You can filter news based on categories like technology, sports, health, etc.

Clicking on a news article redirects you to the original source to read the full story.

Users can comment on any news article — but for that, they need to log in (either using username/password or Google Login). 🔒

🔧 Tech Stack
I (well, Gemini AI and I) used the MERN stack:

MongoDB (Database)

Express.js (Server-side framework)

React.js (Frontend)

Node.js (Backend runtime)

🤖 How AI Helped
I relied entirely on Gemini AI for:

Setting up the backend and frontend structure

Writing all the code for authentication, fetching news, filtering by categories

Handling Google login integration

Deploying the app

It was more about collaborating with AI — giving it clear instructions and guiding the overall flow — rather than writing code line-by-line myself.

🎯 Why I Did This
I wanted to see how far AI can go in helping a beginner or non-coder build something real.
It turned out to be an amazing learning experience, and it boosted my confidence that with the right tools, building things is becoming more accessible to everyone.

🔗 Project Link
If you're curious, here's the live site:
👉 US News Aggregator