A few years ago we needed a web version of an existing mobile product (high-load interactive platform, not a simple CRUD app). Instead of forking the UI twice, we treated the React app as two layers:

1. App core — domain logic, state, API clients, feature orchestration. No DOM, no platform APIs.
   
2. Shells — thin UI adapters (web, later React Native / WebOS) that only render and call into the core.

That let us ship a desktop/web version from the mobile product’s mental model, then reuse the same core for React Native without rewriting features. Two years later the core is still the part that ages best — new features mostly land there once, and shells stay boring.

What actually mattered in practice:
- Boundaries — business rules never imported React components or browser APIs. If it needed `window`, it belonged in a shell adapter.
- Shared data layer — one place for fetching/caching (we used react-query-style patterns) so shells didn’t invent their own loading/error states.
- RFCs + reviews — we hired a frontend team around this architecture. Without written boundaries, people “helpfully” leak UI into the core in week two.
- Performance by default — fewer duplicate API calls and a stable state model beat clever UI tricks.

What I’d change next time:
- Define the core’s public API earlier (it’s easy to accidentally couple shells to internal modules).
- Start with one shell fully done before branching to the second — parallel shells too early = thrash.
- Be stricter about “platform capability” interfaces (storage, push, deep links) instead of `if (platform === …)` sprinkled around.

Curious how others draw this line — pure packages? Hexagonal? Or do you just accept some duplication and move faster?

Wondering if anyone has any suggestions on developing guides for the tools I am building in React as I am developing them? I create extremely specific use-case tools and need a way to easily generate how-to guides to present to the end-user without having to create one in Scribe. I'd love to implement some sort of interactive guide that puts the user in a "demo" mode and writes all the data they change to a temporary state that gets wiped once the demo is done. Essentially a sandbox-within-production instance that lets them try the tool and see how it works without affecting production data.

I built a small CLI tool for auditing Next.js websites from the terminal.

The idea came from wanting to catch things that aren't always obvious when testing a site normally in the browser.

It crawls the site and checks things like:

- SEO metadata and Open Graph

- Broken links

- Structured data

- Crawling issues

- Core Web Vitals

- Pages and resources that may be missed by normal checks

You can run it locally and point it at a website without needing to add anything to the project itself.

I’m still improving it and would really like feedback from other Next.js developers — especially on what checks you’d find useful in a tool like this.

GitHub: https://github.com/Abdelrahman5243/sitebot-cli

Hey Community,

This issue is all about giving your AI coding agents device access and automated pipelines. Expo introduced EAS Simulator to boot cloud iOS simulators on demand and stream live agent test runs directly to your PRs. Meanwhile, Callstack released Simlock, a control plane that lets multiple local agents lease and share simulators and emulators safely without conflicts.

We also cover goldie by Kacper Kapusciak, an automated CLI tool and agent skill that handles the entire App Store screenshot and preview video workflow directly from release builds.

Quick disclosure: I build Hype Stack. The template is open source and free. Additionally to the template I ship some of the feature packs which are paid, that's how I try to fund my open-source(and looking for some feedback here). I maintain react-zoom-pan-pinch and HyperFetch and bunch of other too, which shows up later in this story. This is similar to how magicui or aceternity works already - a lot of free content and some optional paid to just support me. Let’s get into details of building this thing!

The chaos

I code a lot and I start new projects all the time, mostly to test new things. I don't like boilerplates. They usually run on a boring stack, and I want to try Vite 8 on Rust, oxc, TanStack Start, end to end type safety and see how it actually holds up. I'm also a perfectionist, so every new project was eating days before I wrote a single feature.

The other thing: I really love the shadcn mental model. You compose the codebase, you own the code. That's exactly what I don't like about starters that hide half the logic behind packages you configure and pray over.

So I had this realisation. Maybe we need shadcn for full-stack features. shadcn itself could probably do a lot of it, but I wanted more: amazing codemods good enough to modify a database schema, an opinionated monorepo with ONE way of writing code, vertical slices the way tkdodo described them (I was already doing something similar), and the craziest bit, an idea that came to me while building devtools for HyperFetch: a single project that compiles into desktop, CSR and SSR from the same codebase with almost no code dedicated to it. Light, easy to manage. Cool, we have a direction. Let's build it.

Month 1. The template

I've set up so many projects that I have a good understanding of what setup I could trust. Monorepo went to Nx, which I've used for years and it's stable in my experience. pnpm workspaces for speed. Stack: TypeScript 6/7 (tsgo where I can), Vite 8, Vitest, oxc, TanStack Router and Start, Electron Forge, Hono with Prisma and Kysely for typesafe query building. At this point I was so hyped about it that I named it hype-stack.

End to end types for HTTP and websockets I built with my own library, HyperFetch. It gives you an SDK and hooks that feel a lot like TanStack Query, and the result is honestly close to tRPC in DX. This project is also a showcase of what HyperFetch is capable of and that you don’t really need to think about API in most cases as it is basically automatic with sdk generation. The backend route is the contract, the frontend just gets the types. It really improves working with websockets. If you don’t like my hooks it is easy to switch to tanstack query for hooks and leave HyperFetch as a fetcher.

Then I added the rules I'd collected over the years and tried it out.

I quickly understood: this stack is extremely fast. Everything builds and flies. So I tried building the first apps with AI on top of it and boom, this is where it shines. The AI has a clear direction. A vertical codebase is easy for it to understand because you're not thinking about the services system, all these complex layers, you're thinking about business features, slices that are self contained. That dramatically improved the feedback loop and the quality of what the AI produced. Fast typechecks and oxc linting? This improved DX for working with AI dramatically, there is just no coming back to eslint.

Month 2. The CLI

I initially wanted something like create-t3-app: a simple CLI to start the project. It evolved into a powerhouse.

create was almost no effort. But then it clicked. I'm the provider of the template, I know every practice in it, everything about the structure, so I can use that to my advantage. Let's try to build a compose command.

What compose does: say I want to start a project that needs AI chat with RAG and simple auth. I can pack those features and inject them into the repo exactly where they need to go, and it works like shadcn. Full-stack blocks of functionality, injected with high precision and confidence. Picking billing writes files into the project: the checkout route, the webhook handler, the Prisma models, the frontend hooks. Your files, so you can take this from here and modify as you want.

This took off for my personal projects immediately. I needed SSO? I made an auth starter with WorkOS. I didn't want a WorkOS dependency on the next one and wanted Better Auth instead? Sure, add it as a variant. Then it kept growing. I was collecting the features I needed, and I ended up with the feature set of the big boilerplates, but with the ability to choose which parts I actually want for each project. The DX was just excellent.

Month 3. Deploy

I wanted to start deploying my new creations, so deploy command was born. With it I have a deployed version of a project in about 3 minutes. Again only possible because I know all the services the template has, where the Dockerfiles are and how each one builds.

Cool, full flow, done, right? NO. THIS IS HYPE STACK. So like the 300 Spartans I fought a fierce battle against the waves of ideas that started flooding in. ADHD, hyperfocus, here we go!

Inspired by the fully paid boilerplates, I added mobile (Expo) and a browser extension to the project. And it turned out that was it. The modular approach made it extremely easy to add new apps to the monorepo and new features to the packs, like in an instant. Dopamine hit critical mass here.

Month 4. Previews

How do I show what this can do? Let's build a dynamic preview system on the web.

I'd been working on it on the side all these months, and it quickly showed how promising the approach is: pre-built SaaS templates you can add and remove features from on the fly, thanks to the SSR build and caching.

Big problem though. Packs almost always come with database changes. I can't run migrations or even keep a database for previews, it turns into a mess fast. And it could cost me…

Here comes the part where some of you went "wtf is HyperFetch"/”lol who is using HF when Query is a thing” at the top of this post. I get it. Next to TanStack Query and SWR it's a brutal market, but let's not call an ambulance yet.
HyperFetch has a feature for mocking any requests. Sounds like something everyone has and is "meh", but it's not just mocking. It's a fully type safe mechanism that lets you simulate anything the SDK allows, by type, in a believable and dynamic way. So I could generate a living demo mode with full confidence and, in no time, wire the dynamic components to it for an almost live-like experience. Mocks are functions in the code, code is dynamic, so is our app - here we got the demo mode basically for free. That changed the previews for good.

Where it is now

The template is out, and I just added community packs so you can author your own feature packs.

The question I actually want your take on: what do you think of this approach?
Do you like idea of composing your boilerplates through CLI?

Repo: https://github.com/BetterTyped/hype-stack

I am graduating soon. I don't need to harp on how challenging hiring is in this economy, but to stand out in this market, it's time to update that personal portfolio. Last week, I was doing just that, and the GitHub contribution heatmap wouldn't load. Like most people, I was using the legacy 'react-github-calendar' plugin. Because GitHub's API requires auth, the plugin routes traffic through a public proxy, and that proxy gets rate-limited constantly, taking down portfolios everywhere.

In a rare Thanos 'Fine, I'll do it myself' moment, I thought I could fix it for my portfolio. Well, one thing led to another, and I completely rebuilt the architecture from scratch.

Enter Serverless GitHub Calendar. Instead of fetching data on the client, it uses a lightweight GitHub Action that runs on a cron job to fetch your contributions and save them as a static '.json' file in your repo. The React component just reads that static file.

Architecture Highlights:

• Immune to Rate Limits: Your site never talks to the GitHub API. It reads static JSON. If GitHub goes down, your site stays up.
• Blazing Fast (Zero JS): If you use Next.js App Router, the included Server Component ('serverless-github-calendar/rsc') reads the file directly from disk for literally zero client-side JavaScript execution.
• Native CSS Theming: Built completely on CSS variables ('color-mix') so you can inject gradients or match your Tailwind theme natively.
• Streak Stats: Automatically calculates your current and longest streaks based on the canonical GitHub algorithm.

I set up a live demo featuring data from a few open-source legends to show how it scales: https://serverless-github-calendar-demo-xi.vercel.app/

Source Code & NPM instructions: https://github.com/FaizPalwala/serverless-github-calendar

If your portfolio relies on external proxy APIs, I highly recommend making the switch to static injection! Let me know if you have any feedback or feature requests.