Mian Shahzad Raza

435 posts

Mian Shahzad Raza banner
Mian Shahzad Raza

Mian Shahzad Raza

@MSR_Builds

Web Developer, Digital Creator & Educator.

Lahore, Pakistan شامل ہوئے Mart 2013
100 فالونگ222 فالوورز
Thomas Trimoreau
Thomas Trimoreau@TTrimoreau·
Is Product Hunt still worth launching on?
English
69
1
64
7.1K
GitLawb
GitLawb@gitlawb·
We forked the leaked Claude Code source and made it work with ANY LLM: GPT, DeepSeek, Gemini, Llama, MiniMax. Open source. The name is OpenCode
English
355
1.8K
20.9K
1.7M
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@GithubProjects Great open source strategy. Just accidentally leak 512K lines via npm. Very intentional. Very bold. 10/10 Anthropic.
English
0
0
0
613
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@steveruizok Jumped into this stack from WordPress and never looked back. Next.js pages router was so clean it made the app router feel like a downgrade at first. Still feels that way sometimes.
English
0
0
0
21
Steve Ruiz
Steve Ruiz@steveruizok·
there was a moment in 2023 when your team was using Figma, Linear, VS Code, Typescript, React 18, esbuild or Next.js with the pages router. Peak software in every category. wonderful stack. you were young and happy and in love
English
15
35
780
49.2K
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@CodeEdison Missing from the backend list: headless WordPress + WPGraphQL. Pair it with Next.js and you get serious content flexibility without the full rewrite. Especially powerful when clients are already on WP. Same data layer, way better DX.
English
0
0
0
11
Edison
Edison@CodeEdison·
Full-Stack Developer’s 2026 Tech Stack • Frontend → React / Next.js / Vue.js • Backend → Go / Rust / Spring Boot / Node.js / Django • Database → PostgreSQL / MySQL / MongoDB • Authentication → JWT + Refresh Tokens / OAuth 2.0 • Infrastructure → Docker + Kubernetes / Nginx as Reverse Proxy • CI/CD → GitHub Actions / GitLab CI / Jenkins • Additional Tools → Redis (Caching), Kafka (Event Streaming), GraphQL (APIs)
English
13
47
316
16.3K
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@averycode The 'explicit constraints' tip is underrated. Coming from WordPress dev, I learned this the hard way: vague prompts = spaghetti code. Now with React I treat the AI like a smart junior: clear spec in, review out. The discipline makes vibe coding actually ship-able.
English
0
0
0
12
Avery
Avery@averycode·
3 days ago, I vibe coded a game and it went viral Can’t believe 350k+ people watched me try to beat my high score 😮‍💨 Here are my vibe coding tips for mobile apps: > Build using opus 4.5 on rork ai > Start with a clear, well defined goal > Be explicit about constraints (8x8 grid, block shapes and sizes) > Define the game loop step by step - instead of “build a block blast clone” > Refine the prompt on chatgpt first to save credits (Full prompt in replies)
Avery@averycode

My vibe coded game got 100k+ views 🤯 There's no way to skip ads on block blast, so I built my own version using rork + chatgpt Free to play, no ads, one simple monetization feature Which would you prefer? > Ads > Ad free (+ optional in app purchase)

English
59
50
605
90.8K
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@leerob Shadcn + Tailwind is exactly where I landed too — coming from years of WordPress theme dev. Server Components flipped my mental model: stopped thinking "where does this fetch?" and started thinking "what layer owns this data?" Clean architecture win.
English
0
0
0
16
Lee Robinson
Lee Robinson@leerob·
Here's how I usually structure my Next/React apps. Let's talk about styling, data fetching, UI libraries, settings, and more. Styling The short story is Tailwind. Why? It was easy for me to pick up, stays consistent whenever I revisit old projects, and works great with AI / @v0. I've wrote a lot more about this here: leerob.io/blog/css Data Fetching For those who have been around Next.js for a while, you know the quirks of the Pages Router. No end-to-end type safety? No global data fetching?? The App Router is so much nicer in this regard. So, I've been defaulting to this for almost two years now (time flies...): #end-to-end-type-safety" target="_blank" rel="nofollow noopener">nextjs.org/docs/app/build… Most of the time, I fetch data in a Server Component (like a page or layout). Occasionally, I'll still pull for an external lib for client-fetches (e.g. swr) when working with existing codebases. A newer pattern that I've started to sometimes use is forwarding Promises to a Context provider, and then "unwrapping" the Promise with `use`. The data can then be used from a hook in any client component. Can work well if you have global data you need to use deep in the component tree (esp. if there's lots of client components): #L148-L155" target="_blank" rel="nofollow noopener">github.com/vercel/commerc… UI Libraries Can I say something without everyone getting mad? I wasn't really a fan of shadcn/ui at first. It felt like a lot of dependencies and "weight" in my repo. There was something more minimalist about just putting the deps in `package.json`. It was similar to my initial reaction to Tailwind. "Eww". Well, that was wrong too. Maybe that was just my familiarity with existing component libraries. I've really changed my opinion. Unstyled, accessible UI components that integrate with Tailwind are... really nice. And that can be easily edited and customized. You either use a component library, or you build your own. And there's so many dang quirks to get accessible components right. I think that's why unstyled primitives are growing so quickly. It's really a new generation of component libraries. Other Libraries I almost never use ESLint on personal projects anymore. I still use it when working on larger projects with the team. But type checking + Prettier has been good enough. Long live TypeScript. We're hoping to add support for Biome to Next.js, and then maybe having the single unified toolchain will be my new approach. Not sure yet. Prettier has worked so well, for so long, I'm apprehensive to any change. cc: JS fatigue. In general, I'm trying to have fewer dependencies, because you can often get an AI-assisted version of just the one function you needed versus bringing in the whole package. Things like date formatting, or markdown parsing. I wrote more about this here: leerob.io/blog/2023 • An extremely underrated Postgres client is `postgres.js`: github.com/porsager/postg…. However, most of the time I'm using `drizzle` as my ORM. • `zod` somehow finds its way into almost all of my projects these types. Forms You can get surprisingly far with the new React hooks like `useActionState` and Server Actions. Throw some Zod in there, and it's pretty easy to get client/server-side validation with ease: github.com/vercel/next.js… There's a few community packages automatically setting this up for you, which is nice: next-safe-action.dev Charts shadcn/ui: x.com/shadcn/status/… Icons shadcn/ui, so `lucide-react` currently: lucide.dev/icons/ Fonts Geist: vercel.com/font Settings I daily drive VS Code. I do want to learn neovim at some point, btw. I don't have any fancy extensions, mostly just the essentials: Tailwind, Prettier, MDX, vscode-icons. Maybe will try Zed again when the git support improves: x.com/leeerob/status…. Or maybe some of the new AI enhanced editors (I do use Copilot currently). A few VS Code settings you might have that I like: "editor.cursorSmoothCaretAnimation": "on", "editor.smoothScrolling": true, "editor.cursorBlinking": "solid", I'd also recommend checking out custom editor labels if you hate the page/layout/route duplication: x.com/nextjs/status/… Payments Stripe It was easy for me to pick up, stays consistent whenever I revisit old projects, and works great with AI / @v0. Iterating I spend a decent amount of time now talking to @v0 to help make edits or debug things. Definitely not perfect, and it gets things wrong sometimes, but saves me a lot of time versus writing everything from scratch. Especially for more tedious refactors that are basically just pushing code into different places, or reformatting/restructuring it. You can kind of 'fire and forget' @v0, then do something else, return in 15 seconds or so, copy the output, and keep moving. It's like my concurrency level went from 1 to 2. AI agent workflows might make this even easier in the future. Summary "Well, you know, that's just like uh, your opinion, man."
CJ (Coding Garden)@CodingGarden

Next.js devs - what are some of the first things you do in a new project? Any common libraries you install? Any common settings / configs you change?

English
62
113
1.1K
124.5K
Jeremy Koering
Jeremy Koering@jeremykoering·
@MSR_Builds People said that last year. And the year before. The miscalculation is that uncreative people assume AI is creative, which it is not.
English
1
0
0
12
Jeremy Koering
Jeremy Koering@jeremykoering·
Social media feeds me the same trash AI takes every day. "WordPress is dead, AI killed it." Blah blah blah. I'm convinced AI is a shell game. AI cannot create on its own. It can only steal and regurgitate a human's work. It is not creative. It can only create what you imagine. The best output requires knowledge, expertise, and skill. If someone says something like "AI has killed WordPress," I would question whether that person should be listened to.
English
3
0
2
174
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@theo I am glad by the time I reached Tailwind (coming from WP ecosystem with Bootstrap) I didn’t have to memorize class names 😂
English
0
0
0
354
Theo - t3.gg
Theo - t3.gg@theo·
Can’t believe I spent years learning all the Tailwind class names just to have AI write them for me
English
177
70
2.6K
95.6K
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@melvynx Coming from WordPress dev → React, this hit different. WP taught me to name things (hero, card, sidebar). React just made the vocab sharper. Knowing component terms before you prompt = cleaner AI output every time. 🎯
English
0
0
0
12
Melvyn • Builder
Melvyn • Builder@melvynx·
Pro tip for Vibe Coding: just knowing the "terms" behind UI components can 100x your frontend results This website shows you ALL the typical UI components found on websites with examples and inspiration Learn it, screenshot it, and vibe code
English
54
177
2.4K
157.7K
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@trikcode The crash hits those with no debugging foundation. My WordPress background (PHP hooks, plugin conflicts, theme quirks) forced me to understand what's actually running. Now I vibe code React the same way — always ready to read the mess the AI made. 🔍
English
1
0
1
32
Wise
Wise@trikcode·
The vibe coding crash is coming. Thousands of apps built by people who can't explain a single line of their own codebase.
English
701
154
2.9K
197.2K
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@karpathy As a WP dev who started vibe coding my way into React — this throwaway tweet gave me the permission slip I didn't know I needed. A year later I'm shipping full-stack apps faster than I ever could with a decade of WordPress behind me. Unpredictable impact, for real. 🙌
English
0
0
0
6
Andrej Karpathy
Andrej Karpathy@karpathy·
A lot of people quote tweeted this as 1 year anniversary of vibe coding. Some retrospective - I've had a Twitter account for 17 years now (omg) and I still can't predict my tweet engagement basically at all. This was a shower of thoughts throwaway tweet that I just fired off without thinking but somehow it minted a fitting name at the right moment for something that a lot of people were feeling at the same time, so here we are: vibe coding is now mentioned on my Wikipedia as a major memetic "contribution" and even its article is longer. lol The one thing I'd add is that at the time, LLM capability was low enough that you'd mostly use vibe coding for fun throwaway projects, demos and explorations. It was good fun and it almost worked. Today (1 year later), programming via LLM agents is increasingly becoming a default workflow for professionals, except with more oversight and scrutiny. The goal is to claim the leverage from the use of agents but without any compromise on the quality of the software. Many people have tried to come up with a better name for this to differentiate it from vibe coding, personally my current favorite "agentic engineering": - "agentic" because the new default is that you are not writing the code directly 99% of the time, you are orchestrating agents who do and acting as oversight. - "engineering" to emphasize that there is an art & science and expertise to it. It's something you can learn and become better at, with its own depth of a different kind. In 2026, we're likely to see continued improvements on both the model layer and the new agent layer. I feel excited about the product of the two and another year of progress.
Andrej Karpathy@karpathy

There's a new kind of coding I call "vibe coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. It's possible because the LLMs (e.g. Cursor Composer w Sonnet) are getting too good. Also I just talk to Composer with SuperWhisper so I barely even touch the keyboard. I ask for the dumbest things like "decrease the padding on the sidebar by half" because I'm too lazy to find it. I "Accept All" always, I don't read the diffs anymore. When I get error messages I just copy paste them in with no comment, usually that fixes it. The code grows beyond my usual comprehension, I'd have to really read through it for a while. Sometimes the LLMs can't fix a bug so I just work around it or ask for random changes until it goes away. It's not too bad for throwaway weekend projects, but still quite amusing. I'm building a project or webapp, but it's not really coding - I just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works.

English
642
820
8.8K
1.2M
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
Here is my workflow: I build for myself, then add more features and ship it for others. An example: wplauncher.msrbuilds.com I started with a tool to help me distribute my plugins/themes so the users can test them in a sandbox environment. Later on, it turned out to be a fully functional local development toolkit (that replaced Laragon/LocalWP) for me and an online platform where anyone can distribute their products OR launch WP instances for clients on a VPS.
English
0
0
0
3
Gini
Gini@sherifgjini·
Are you using what you're building? I dont think this line its always accurate, especially for us builders
English
99
1
77
3.9K
Boxmining
Boxmining@boxmining·
Everyone who loves: - AI Automation - AI Agents - Vibe Coding - Crypto / Stocks investing - Content Creation - Saas / Start-ups - Financial Freedom I hope you find my account 👇🏼
English
51
6
114
5.3K
Minh-Phuc Tran
Minh-Phuc Tran@phuctm97·
Is Context7 MCP still necessary these days?
English
40
0
50
26K
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@vivoplt The $20 pack is outdated now. You need at least $100 to build something solid.
English
0
0
0
141
Vivo
Vivo@vivoplt·
The vibe coding stack in 2026: Claude: $20/mo Supabase: $0 Vercel: $0 GitHub: $0 Domain: $10/yr You don't need a CS degree. You don't need a co-founder. You need an idea and a weekend. Ship it.
English
66
9
241
12.5K
Mian Shahzad Raza
Mian Shahzad Raza@MSR_Builds·
@bcherny One I'd add: `/init` to generate a CLAUDE.md for your repo. Game changer for WP+React projects — I store all my hooks, CPT names, and ACF field schemas there. Claude stays in context across sessions without re-explaining the architecture every time.
English
0
0
1
1.6K
Boris Cherny
Boris Cherny@bcherny·
I wanted to share a bunch of my favorite hidden and under-utilized features in Claude Code. I'll focus on the ones I use the most. Here goes.
English
548
2.5K
23K
3.8M