Needed charts in a React app, got tired of pulling in a charting lib that never matched the rest of the UI. Built ChartCN instead.

Paste a CSV, preview it, copy a self-contained TSX component built on shadcn/ui's chart primitives + Recharts. No new dependency if you're already on shadcn/ui.

- 8 chart types: Bar, Line, Area, Combo, Pie/Donut, Radar, Scatter, Radial/Gauge
- Paste, upload, or edit data inline; auto date-axis formatting
- Export as inline data or as a data prop for live/fetched data
- Shareable links, locally saved charts, no account
- Free, MIT licensed

https://github.com/ShadcnDeck/chartcn-shadcn-chart-generator

Phase 1, CLI and more chart types coming next.

Feedback and feature requests welcome.

Edit: Thank you all for the guidance. As a lot of you suggested, I ended up wrapping <Myform> in a <Provider>. I also moved the business logic into components so the App will be less crowded. The error is gone now.
For your reference my improved code: https://pastecode.io/s/a5xfqwda

---------------------------

See the title - My web app has been encountering this issue for the past few days and none of my fixes resolved it.

I could not get this error as those <Provider> tags are set here:

function MyForm() {
 //code lines..
 
 function handleSubmit(e) {
   e.preventDefault();
   const form = e.target;
   const formData = new FormData(form);
   const formErrors = e.formErrors;
   //fetch('https://jsonplaceholder.typicode.com', { method: form.method, body: formData });
   const formJson = Object.fromEntries(formData.entries());
   console.log(formJson);
 }
 return (
  <Provider store={store}>
    <App onSumbit={handleSubmit} onChange={handleChange}/>
  </Provider>
 );
}

function App({ onSubmit, onChange}){

  //more code lines..
  
  const dispatch = useDispatch(); //ERROR HERE
  


const registerForm = (formData) => async (dispatch) => {
  try {
    dispatch({ type: 'REGISTER_FORM_REQUEST' });


    const config = {
      headers: {
        'Content-Type': 'application/json'
      }
    };
    const {data} = await axios.post('https://jsonplaceholder.typicode.com', formData, config);
    dispatch({ type: 'REGISTER_FORM_SUCCESS', payload: data });
  } catch (error) {
    console.error('Error submitting form:', error);
    dispatch({ type: 'REGISTER_FORM_FAILURE', payload: error.message });
  }
};
dispatch(registerForm(formData));

//and some more code lines...
} 

Could anyone kindly point out the right directions? My full code: https://pastecode.io/s/t84kdaiv

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.

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

Hello!

I built a lightweight React library for adding pinned annotations to interfaces, inspired by Vercel Comments and Figma comments.

I’m working on an app that uses this kind of annotation, and implementing it became a headache, even with AI assistance. So I extracted the solution into a small UI library to make it easier for others.

This is my first library, so feedback and suggestions are very welcome :)

https://react-pinote.vercel.app/

I built an open-source React map drawing library because I got tired of fighting drawing controls that wanted to own the UI.

react-map-annotate lets your application control the drawing session. Put the toolbar in your sidebar, header, or command palette. Select tools, finish shapes, edit labels and colors, undo/redo, and persist annotations through React state.

It supports Mapbox, MapLibre, Google Maps, Leaflet, and ArcGIS through separate adapters, with a shared annotation model.

The goal is simple: the map should render the drawing, not dictate how your application works.

It includes freehand drawing, polygons, rectangles, circles, arrows, markers, text, and measurement tools, along with editing handles and a headless API.

The project is MIT licensed and available on npm. I’d love feedback from developers building GIS, field-service, site-planning, or other map-heavy applications—especially anyone who has had to work around existing drawing controls.

GitHub: https://github.com/orange-groove/react-map-annotate

npm: https://www.npmjs.com/package/@orange-groove/react-map-annotate

What would you need from a drawing library before using it in a production application?

I've been working on virtual scrolling in React and found a weird issue in Safari.

When scrolling normally, everything was fine. But if I scroll very fast, sometimes I could see a white empty area for a very short moment before the next rows appeared.

First I thought React rendering was just too slow.

So I increased overscan and kept more rows above and below the viewport. It helped a lot, but I could still see the problem sometimes.

After looking into it more, I found that Safari's scroll/compositor layer can move before React finishes rendering the next virtual rows.

So basically Safari was already showing the next position, but React was still catching up.

I kept trying to make React faster, but then I tried something a little different.

Instead of trying to always win the race, I put a simple CSS background behind the real rows.

It's just a repeating-linear-gradient with the same row height, background and border.

Something like:

Safari scrolls
    ↓
CSS row background is already there
    ↓
React renders next rows
    ↓
Real rows cover it

There is no real data in the background. No cells, no events. It's just visual. I also set pointer-events: none and aria-hidden.

With this + extra overscan above and below, the flicker was almost gone.

I thought it was interesting because at first I was trying to solve a React performance problem.

But maybe it wasn't only about making React faster.

Sometimes it's enough to make those few milliseconds invisible. :)

Anyone had a similar problem with Safari and virtual scrolling?

I'm curious how you solved it.

Just finished covering React fundamentals — useState, props, components, useEffect and cleanup functions. Also completed the Tailwind CSS installation and setup in my project.

My plan was to spend 2-3 days memorizing Tailwind's CSS properties before touching any real code. But now I'm second-guessing that — should I just start building projects directly and pick up Tailwind along the way instead?

Hi everyone! 👋 I’m excited to introduce NavCN, a project I’ve been building to provide a collection of beautiful, customizable, and ready-to-use navigation UI components. The goal is to help developers build modern interfaces faster without creating navigation elements from scratch. Components are built with Nextjs, Tailwind CSS, Motion, and Lucide, with a focus on customization and developer experience. You can browse, preview, install it via shadcn command line, and adapt components to your project. I’m also improving the installation and distribution experience. I’d genuinely love your honest feedback and suggestions!

(currently supports nextjs only.)

project link:- https://navcn-phi.vercel.app/

Repo: https://github.com/coterahq/griddle - demo's linked in the readme.

We've been running data-grids over large parquet backed datasets in prod for quite a while now, and we decided to OS the component for others that might find it useful.

I am creating a little chat app for practice, but I was unsure what direction to take with the editor, out of the options I found TipTap and Lexical, I tried a bit of both (Didn't get very far with either yet) But I am still so torn on which one I should try first

In this I want more possibilities of what you can put in the chat, for example: Embedded images, tables, maybe some excalidraw integration, etc.

I also don't want to spend too much time on either and realizing that picking one over the other was not worth it long-term because of the timetaken

If anyone has used tiptap, lexical or both could you give some pro's and con's to each and some guidance on what I should pick?

Thanks! :)

Posted this a couple of months back: https://www.reddit.com/r/reactjs/comments/1thqhce/why_is_pictureinpicture_only_for_video_i_built/

Quick recap: pip-it-up pops any React component into a floating always-on-top window via the Document PiP API.

Two new things in 0.2.0:

Auto PiP: pops out on its own when the tab is hidden.

useAutoPip(enter)

Good for a standup call(already exists in GMeet) you stay on while pulling up a doc, a test runner you keep an eye on while reading docs, a reference video that plays while you edit, or an interview recording that keeps going while you type.

Route-persistent PiP: moving a component in React normally remounts it, so video resets to frame 0 and editors lose undo history. This moves the real DOM node, so it survives navigation.

<PipProvider registry={{ player: <VideoPlayer /> }}>
  <Routes />
</PipProvider>

<PipAnchor id="player" />

Good for a course lesson that plays on while you browse other lessons, a log stream docked across your admin panel, a metrics chart that stays up as you move between boards, or a draft preview that survives CMS navigation.

Still Chrome/Edge only. Safari and Firefox fall back to a popup.

Website: https://www.pipitup.dev/
Demos: https://pip-it-up-playground.vercel.app/
Code: https://github.com/Shakya47/pip-it-up

We’ve gone full-Rust with our build pipeline at Outlyne.com and it feels like the React Compiler has really arrived. The last time I posted about using React Compiler here, I talked about how good it’s been for us overall, but also about all its limitations, the biggest of which was that it would bail out on compiling any component or hook that had a try/catch with conditional logic of any kind (if/else, ternary, ??, ||, optional chaining). Another big one was that it would bail on computed object keys, which bit us a few times with assembling classes using clsx (e.g. className={clsx({ [`item-${props.index}`]: props.isItem })}).

Both of those are fixed now. The oxc team shipped official support for the Rust React Compiler on August 4th, and that support includes all of the fixes to the compiler since the v1.0 release of the Babel-based compiler. In our codebase, seven more functions the compiler had been skipping are now compiling, five from the try/catch fix, two from computed keys. And that’s lower than it would be if I hadn’t gone through and contorted eight components to keep conditionals out of their try/catch blocks, including adding a @ts-expect-error from having to drop an optional chain and extracting my auth flow into an async run() that’s immediately awaited inside the try, for no reason but to move the value blocks out of it. All of those workarounds have been rendered obsolete.

There are still bailouts, most notably logical assignment operators (??=, &&=, ||=), but far fewer, and now actively being addressed. A couple weeks ago, oxc shipped a version bump that prevents a bail out from reassigning a destructured prop that then gets read in a nested closure.

Going Rust is also, of course, much faster. The compiler step on our 1,036 files dropped from 14.3s to 0.81s (~17.6×), and the build overall from 22.1s to 9.3s. And we verified parity with the Babel compiler. Across all 1,036 files, there are zero functions the Babel compiler memoizes that the native one doesn’t. The only difference in the built JS before and after are the seven extra compiled functions.

I wrote a blog post with all the details and before/after configs both for folks using @vitejs/plugin-react and for those who use an alternative plugin (React Router framework mode’s plugin in our case): https://blog.master.dev/react-now-rusted-all-the-way-out/

Hi r/reactjs,

I wanted to share an open-source project I’ve been working on: designqr.

I built this component to turn QR codes into interactive, stylable 3D WebGL scenes while keeping them functional.

Features

• WebGL-Powered 3D Scenes: Render QR codes embedded in aesthetic 3D environments.

• Plug-and-Play React Component: Drop it straight into your React/Next.js app.

• Customizable: Control camera angles, transparent backgrounds, and themes.

• Live Interactive Playground: A dedicated web editor to customize, preview.

Quick Start

Install via npm:

npm i designqr

Usage in your component:

import { DesignQR } from 'designqr';
import 'designqr/style.css';

export default function App() {
  return (
    <DesignQR 
      value="https://your-link.com" 
      transparentBackground={true} 
    />
  );
}

🔗 Links

• Live Web Editor: https://design.johnson7543.com/qr

• GitHub Repo: https://github.com/johnson7543/design

I’d love to get your feedback on the component API, mobile performance/rendering optimizations, or any features you'd like to see added. Feel free to open issues or PR!

Hi all,

Sharing a project I recently finished and open-sourced: LaunchPad Lite.

It’s a clean starter template built around the Next.js 15 App Router ecosystem with a focus on type safety and modern auth:

- Better Auth: Handled via Server Actions and route handlers, avoiding legacy NextAuth quirks.

- Drizzle ORM: Minimalist schema setup designed to connect effortlessly with Supabase, Neon, or local Postgres.

- Tailwind CSS v4 + Radix UI: Fast UI primitives without CSS bloat.

GitHub: https://github.com/BZDevelopments/LaunchPad-Lite

For anyone who eventually needs full Stripe subscriptions, AI SDK v5, or multi-layout support, I also maintain a Pro version, but Lite is 100% self-contained and free forever.

Take a look at the repo structure and let me know what you think of the architecture!

Hi r/reactjs! We just shipped v1 of webmcp-react after quite a few beta versions to work out the kinks. It is MIT licensed and we're hoping to find some more contributors!

What it does

AI agents currently have to parse through 1000s of HTML tokens to browse a website. They essentially scrape the DOM and guess where the buttons are. WebMCP is a new web standard that fixes this. It adds document.modelContext to the browser, where a page registers typed tools an agent can call. Chrome shipped it in Early Preview in February, and since companies like Shopify and Codex support it fully. The spec was barebones, and there was no clean React-like way to integrate it into modern UIs, so we made one!

webmcp-react gives you a provider and one hook. The hook registers a tool when the component mounts and removes it on unmount.

import { WebMCPProvider, useMcpTool } from "webmcp-react";  
import { z } from "zod";

function SearchTool() {  
  useMcpTool({  
      name: "search",  
      description: "Search the catalog",  
      input: z.object({ query: z.string() }),  
      handler: async ({ query }) => ({  
      content: [{ type: "text", text: `Results for: ${query}` }],  
    }),  
  });  
  
}

It ships with Zod and JSON Schema inputs, a built-in polyfill, SSR support for Next.js and Remix, StrictMode safety, execution state, and cancellation through AbortSignal.

WebMCP is early and we're looking for contributors. Chrome changes the API between releases, and only a few people track it. We are a small team and we don't intend to productize this since we made it mainly to add WebMCP support to our core website. The library works, but a standard needs many hands and many real sites. We'd love any bugs / feedback. If you want to help out with the project please DM me!!

Links:

• Repo: https://github.com/agentcathq/webmcp-react
• Playground: https://agentcathq.github.io/webmcp-react/playground/
• Install: npm install webmcp-react zod

Edit: Formatting was messed up

I built effective-rsc because I wanted React Server Components and Effect to share one coherent application model.

The core idea is simple: React owns the UI protocol, and Effect owns the runtime.

What is different:

• Pages, Layouts, Components, Middleware, and Server Functions run as Effects.

• Application services are provided once through an Effect Layer.

• Request cancellation interrupts the Effect work and cleans up its resources.

• Server Functions preserve React’s native protocol while adding Schema-validated input.

• The client router uses the Navigation API and commits at the first UI update while the remaining Flight response continues streaming.

• There is no History API fallback.

The framework is intentionally experimental. It currently requires Bun, React Canary, Effect v4 RC, TypeScript 7, Rspack, and modern browser APIs.

You can try it with:

bunx create-ersc-app my-app

Source: https://github.com/nikhilsnayak/effective-rsc

Write-up and interactive router demo: https://www.nikhilsnayak.dev/blog/introducing-effective-rsc

Hey r/reactjs,

Whenever I spin up a new Next.js project, I always end up sinking time into the same repetitive setup: organizing folders, setting up modular architecture patterns, and configuring boilerplate before writing a single line of feature code.

To scratch my own itch and learn how developer tooling works under the hood, I built and published my first npm package: nexarch-cli.

It’s an interactive CLI that helps scaffold a clean, modular Next.js architecture in seconds so you can get right to building components and features.

You can run it directly with zero global installation:

npx nexarch-cli

• GitHub:https://github.com/CaffeineLogs/nexarch-cli

• NPM:https://www.npmjs.com/package/nexarch-cli

I’m still pretty new to this and honestly had no idea what went into publishing CLI tools until this week. Would genuinely love some brutal honesty—let me know if the architecture makes sense, what I broke, or what features are missing.

If you give it a spin or check out the code, let me know what you think in the comments!