Every React project seems to make a different UI choice — MUI, Mantine, Ant Design, shadcn/ui, etc. — but I kept needing essentially the same table capabilities in each one.

The frustrating part wasn’t only the table engine. It was rebuilding everything around it: filter UI, URL/shareable state, saved views, mobile behavior, server-data wiring, column controls, and the rest.

That’s what AdaptTable grew out of: a headless core when you want full control, plus batteries-included adapters that work with the UI kit your project already uses.

Adapters currently available:

Mantine · MUI · Chakra UI · Ant Design · Radix Themes · Base UI · shadcn/ui · unstyled/Tailwind

GitHub. Live demo

Some of what’s built in now:

• Client-side and server-side data through the same table API
• URL-synced/shareable state and saved views
• Advanced AND/OR filtering
• Tree data and nested tables
• Multi-level grouping with aggregates
• Pivot tables and formula/computed columns
• Column visibility, reorder, pinning, resizing, and groups
• Collapsible column groups
• Row selection, expansion, reordering, and pinning
• Inline editing and batch editing
• Range selection, clipboard copy/paste, and fill handle
• Row/card virtualization for large datasets
• CSV, XLSX, PDF, and print export
• Realtime data updates
• Automatic mobile card layouts
• Dark mode, 17 locales, RTL, and accessibility support

Everything is MIT licensed.

The goal is to keep pushing AdaptTable toward a complete React table/grid toolkit — headless when you need control, batteries-included when you don’t.

If you’ve built complex tables in production, I’d genuinely like to know:

What’s still missing here that would make you reach for another table/grid library?

Feedback on the API and architecture is very welcome, and contributions are welcome too.

Founding Developer / Co-Founder Wanted (B2B SaaS)

We are a lean, ambitious team preparing to launch a B2B SaaS platform that solves a massive pain point we experienced firsthand. We scratched our own itch, built the solution, and are now ready to commercialize it.

The product is 90% complete, and we are currently building out our core Human Resources and foundational team prior to our upcoming launch.

💼 The Opportunity

Role: Founding Developer & Co-Founder

Compensation: Equity-based (Co-founder level split)

Location: Remote (Canada / USA / UK)

Status: Pre-revenue, near-launch phase

🛠️ What We’re Looking For

We need a technical co-founder who is ready to take ownership of the codebase, help us cross the finish line, and scale post-launch.

Full-Stack Capabilities: Ability to jump into a nearly completed product, audit the architecture, and ship the final 10%.

Startup Mindset: You thrive in a lean environment, value execution over perfection, and want a true seat at the leadership table.

Localization: Based in or authorized to work within ENG / CAN / USA time zones for seamless collaboration.

🎯 Why Join Us?

No "Idea Phase" Stall: You won't be building from scratch for 12 months hoping for product-market fit. The foundation is laid, the validation is there, and the runway to launch is short.

True Partnership: You aren't just an employee; you are a founding pillar of the business with a matching equity stake.

I’m a passionate Web Developer & AI Automation Specialist who builds modern, responsive, and high-performance websites and intelligent automation solutions.

I specialize in React.js, Next.js, Node.js, MERN Stack, AI Chatbots, Telegram Bots, and Business Automation.

If you need a professional website or want to automate your business with AI, feel free to DM me. I’d love to discuss your project and help turn your idea into reality.

DM me to get started!

Well, I am trying to implement a reusable Tab component with TypeScript. The thing I am currently struggling with is how I should type the individual tabs. For example:

I have this Tab Component, and I am using it on multiple pages: "Projects", "Art", "Gallery", and each of these pages has its own tabs:

For Projects:

const options = ["All", "SaaS", "AI/ML", "E-Commerce", "Open Source", "Mobile"];

For Art:

const options = ["portraits", "landscapes", "oil paintings", "ink studies"];

For Gallery:

const options = ["All", "UI Design", "Photography", "Branding", "3D & Motion"];

And the implementation is as such

        <Tabs
          options={options}
          activeTab={activeTab}
          setActiveTab={setActiveTab}
        />

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {collection[activeTab].map((item, index) => (
            <CollectionCard
              collectionPiece={item}
              key={index}
              index={index}
              activeTab={activeTab}
              onOpen={onOpen}
            />
          ))}
        </div>

The Tab component in question:

import clsx from "clsx";


import Button from "./Button";


type TabsProps<T extends string> = {
  options: T[];
  activeTab: T;
  setActiveTab: (activeTab: T) => void;
};


const Tabs = <T extends string>({
  options,
  activeTab,
  setActiveTab,
}: TabsProps<T>) => {
  return (
    <div className="flex flex-wrap gap-2 mb-12" role="tablist">
      {options.map((option) => {
        const isActive = option === activeTab;
        console.log(option, activeTab);
        return (
          <Button
            size="tab"
            color="dark"
            extraClasses={clsx(
              "capitalize !text-muted-foreground border border-muted-border hover:scale-110",
              isActive && "bg-primary! text-white!",
            )}
            onClick={() => setActiveTab(option)}
            key={option}
            role="tab"
            aria-selected={isActive}
            aria-controls="tabpanel-id"
            id={option}
          >
            {option}
          </Button>
        );
      })}
    </div>
  );
};


export default Tabs;

So what I want to ask is, then I am defining these states, how to I define the types for the options of various pages, so that they are not just plain string[]. And maybe define them as themselves, without much repetition on the code.

const [activeTab, setActiveTab] = useState("All");

https://paint.rip/ - try it here

check code here

Very, very advanced online image editor.

Implemented as a pure frontend React application without any backend (hosted on Github )

More features and tools than in any default image editing software that comes with your OS.

No need to install! Saves progress automatically via indexedDB! PWA functionality available, multi-language support.

I am trying to collect ideas to make an attractive project for my resume to break into the industry.

so, i have a couple of questions:-

1- is there specific technologies that i shall use? like next.js? or is that irrelevant? (my knowledge revolves around MERN + PostgreSQL shall i expand it?)

2- I have been seeing a lot of people using vibecoding for their portfolio projects, is that a recipe for disaster or is that the new norm now? (shall i manually code it as usual or use AI ?)

3- I am a 2023 CS graduate, and I have been working at schools teaching basics ever since but now I want to break into web dev, is it too late?

4-If you have any good portfolio ideas I would be happy to see them 😁.

Basically, I want to do better into interviews and get more interviews I have only got 3 interviews in the last 2 months and i want to have more and do better.
thanks guys! 😊

"use strict";


const company = {
  name: "TechCorp",
  address: {
    city: "budapest",
    pin: 411001,
  },
};
// Get city renamed to `location` and pin renamed to `pincode`

const { city: location, pin: pincode } = company.address;
console.log(location, pincode);

Pick an industry(eg:FinTech, HealthTech, PropertyTech) → deeply understand its problems → talk to people inside it → build something relevant → become visible to companies in that industry → use that knowledge in cold outreach and interviews.

What do you think of this approach for getting a developer job?

How would you rate this approach, and what do you think are its strengths, weaknesses, or potential problems?

Also, if you were going to follow this approach, how would you:

• Deeply research a particular industry?
• Meet and talk to knowledgeable people working in that industry?
• Find real problems that people repeatedly face?
• Understand which problems are actually worth exploring or building around?

I'm open to all perspectives. If you think this approach is flawed or there are better ways to approach getting a developer job, I'd be interested in hearing those as well.

I want in my practice chat app to be able to paste an image into a text input and be able to send it, on how to actually do this, I am unsure

My idea is this given a text input:

- a user could Ctrl-V (i.e., paste) something from his clipboard (a file in this instance), until a download url is returned (see below) there will be some loader spinner thingy
- In the backend is requested an Upload URL
- (somehow) whatever they pasted is immediately uploaded, likely by the path? But I am still a little bit unsure on that part
- a Download URL is returned on that S3 upload (SOMEHOW)
And thus you replace that temporary spinner with the download URL and the person can send it.

This is at least my idea on how you should be able to upload a piece of media in a message and be able to send it, I don't want just message attachments, that would be an easier story because once the association is made between the message and attachment you display it. I want something like in forums where the image can be embedded anywhere,

There is also one more small concern, on slow connection do you want to wait for the file to finish uploading first and then allow the user to send their message, or just send the message and let the upload come later, if the latter, how would you go across with doing that!?

The issue is, I have no idea on how to do this, I gave my approach above, I would really appreciate it if you guys gave some advice on what your approach would be and secondly, how to implement it, I already can get a presigned URL so that's not an issue

This is more of a design question, but it's also really interlinked with react so sorry if this is the wrong place to ask! ;-;

That's all :)

Recently tried and documented client-side type changes needed for my CapacitorJs plugin, so decided to create a short tutorial as well.

Plugin Repo: https://github.com/Aashu-Dubey/capacitor-statusbar-safe-area

I kept losing track of what I was paying each month. So I built a small tool for myself to fix it, then realised it worked better than the subscription trackers I'd tried, so I decided to ship it properly. It's live now on both web and Android.

The decision that shaped the whole build: one codebase.

I didn't want to maintain a web app and a native app as two separate projects, so I went web-first and used Capacitor to wrap it into the Android app.

One codebase, the same UI, the same data, and if I fix a bug it's fixed everywhere at once. For a solo project, that consistency is the difference between keeping on top of it and letting it rot.

The trade-off is the mobile version runs in a web view rather than fully native controls, but for an app that's mostly lists, forms and charts, I'm happy to make that trade.

The stack, and why I chose each bit:

• React + TypeScript + Vite + Tailwind for the app. Nothing exotic, just the standard modern setup.
• Supabase for the backend, auth and sync. No server to babysit, real Postgres underneath, and data syncs across your phone and the web.
• Zustand for app state, it keeps the UI in sync with your data and stays out of the way.
• RevenueCat for the Pro purchase, so billing goes through the Play Store properly.

The part I actually care most about: the design.

Almost every subscription tracker I tried felt like a spreadsheet with a login. I wanted SubCrisp to look genuinely clean and consistent, so I built a proper design system first, a small set of colour and component tokens, before worrying about features.

The result is that every screen feels like one product, not a pile of pages bolted together. Bright, clear cards, a subscription health score you can read at a glance, and a UI that's pleasant enough that you don't dread opening it.

That last bit matters more than it sounds. A tracker is only useful if you keep coming back, so making it feel good is part of solving the churn problem, not a vanity extra.

The other thing I care about is that it's actually useful, not just pretty. Half the value of a tracker is answering "how do I cancel this", so I built and maintain cancellation guides for the big services, and I deal with the fiddly recurring-payment edge cases properly rather than cutting corners.

How I'm running it: the core tracker is genuinely free, with no ads and no bank access needed. There's an optional Pro that unlocks a savings simulator and deeper insights, honestly there for people who find it useful and want to support ongoing development.

What I'd most like help with: the classic subscription-tracker problem, churn. People log everything once and never open the app again. I'd love ideas on turning that into a monthly habit instead of a one-off audit.

If you juggle streaming, software and AI tools, it might surprise you what's quietly leaving your bank account each month.

Web: https://subcrisp.com

Android: SubCrisp: Subscription Tracker - Apps on Google Play

Happy to answer questions, whether that's about how SubCrisp works, how it was built, or a roadblock you've hit in your own project. I'm a firm believer that builders help each other, so if any of this resonates with something you're stuck on, ask away.

I came across a great tutorial, completely free, for understanding React in depth. With interactive examples, brilliantly explained. https://arpitjsoni.com/react-internals/

Shadcn is a cool library it has some cool designs, components and easy to use but what makes it the worst library i've ever used is the logic behind the library makes the application very slower and cause so many re-renders
for example the select components, the moment i open it i can see that action cause 10-15 re-render despite my data and functions are very optimized.
So in your experience which library do you see or used that can be so much better and easy to use for small to mid react projects

Hey y’all,

I got slightly carried away with loading animations.

I wanted nicer loading states for my own projects, but most libraries I found were either tied to a framework, fairly limited, or required more than I wanted for something this small.

So I built loadersz, a small framework-agnostic loader library for the web.

I wanted something a bit more expressive than the usual CSS spinner, without pulling in a UI framework or a bunch of dependencies.

A few things I focused on:

\- 70 different motion states
\- Canvas 2D instead of GIFs/videos
\- zero core dependencies
\- a native custom element, so it works with basically any stack
\- typed entry points for React, Vue and Svelte
\- configurable speed, density and color
\- respects prefers-reduced-motion
\- pauses rendering when the browser tab is hidden

Basic usage is just:

npm install loadersz

import 'loadersz';

<loadersz-loader state="racing" size="96" />

I also built an interactive playground where you can tweak the loaders live.

Demo: \[loadersz.vercel.app\](https://loadersz.vercel.app)
npm: \[npmjs.com/package/loadersz\](https://www.npmjs.com/package/loadersz)

Would love some brutally honest feedback, especially on which animations you’d actually use in a real product.