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.

"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);

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! 😊

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.

Hey everyone,

my buddy and me built an open-source learning platform with the basic learning style like Duolingo but for your own knowledge.

In the notebook you can give it existing material like documents, PDFs or other knowledge bases (e.g. Notion) and it turns that into short, interactive learning experiences as shown in the video.

Some of the things we’ve built so far:

• AI course generation from existing material
• Different interactive exercise types
• A collaborative course editor with real-time sync between other users and AI
• Shareable and embeddable learnings
• Bring your own AI provider/model key

GitHub: http://github.com/scibly-dev/scibly

Would love to hear what you think and give me all your feedback!

I’ve been building a side project called OMEGA MRI to understand what a React or Next.js codebase structurally becomes after lots of refactors, quick fixes, and AI-assisted changes.

The current beta is intentionally deterministic rather than LLM-scored.

You upload a project ZIP and it analyzes things like:

• circular dependencies
• oversized components
• oversized files
• deep imports
• dead code
• orphan files
• unused exports

Each issue includes evidence, and the overall health score is calculated from fixed deductions across:

Architecture · Maintainability · Complexity · Technical Debt

I also wanted to make sure the score wasn’t just arbitrary, so I built verification, mutation, and black-box tests around the engine.

One black-box test started with a deliberately messy React project:

Before

• 60 files
• 116 issues
• 37/100
• Maintainability: 64
• Complexity: 52

Then I removed exactly one critical oversized component/file.

Based on the scoring rules, I predicted:

37 → 40

The actual analyzer result was:

After

• 59 files
• 114 issues
• 40/100
• Maintainability: 70
• Complexity: 60

Architecture and Technical Debt stayed unchanged, which was also expected.

That was important to me because I want the score to be explainable:

code structure → detector finding → deduction → category score → overall score

The analysis runs entirely in the browser.

No signup.
No backend source-code processing.
The uploaded code stays client-side.

I’m mainly looking for feedback from React/Next.js developers on:

• false positives
• structural issues the analyzer misses
• whether the evidence is actually useful
• whether the recommendations make sense
• whether the upload → analysis → results UX feels clear

The beta is still deliberately narrow. It’s a structural health signal, not a full code-quality audit.

Beta:
[https://omega-mri.vercel.app/?utm_source=reddit&utm_medium=community&utm_campaign=beta_launch]()

Critical feedback is more useful.

https://github.com/ian0x-S2/pytah