r/react 2h ago

Project / Code Review A frontend tool to ease UI pain

Thumbnail shadcncanvas.vercel.app
1 Upvotes

r/react 1d ago

Help Wanted Are people are getting hired as frontend developer if yes then how

25 Upvotes

I’ve been trying to land a frontend developer job for a while, but the market feels absolutely brutal right now.

For those of you who recently got hired as a frontend developer — how did you actually do it?

- What skills/tech stack did you have?

- Did you focus heavily on DSA?

- How important were your projects?

- Did you get the job through referrals, LinkedIn, applications, networking, etc.?

- How many applications did it take?

- And roughly how long did your job search take?

I’m mainly targeting React/JavaScript/TypeScript roles.

Would really appreciate hearing from people who actually got hired recently, rather than generic advice. What worked for you?


r/react 1d ago

General Discussion Feeling lost as a Front-end developer of 5+ years of experience.

62 Upvotes

Lately I have been rethinking my career and the years of experience (in React, Next.js). I have(5+), but I feel like I have so much gap in my knowledge and when I go down the front-end rabbit hole, I see "Monorepos", "Micro-frontends", and all these terms, which I haven't used yet, and I genuinely haven't worked on that diverse projects, but I really have this hunger to do more, but am sometimes paralyzed by the thoughts I may not be doing enough, and I may not be able to get a job. Could I get some suggestions and directions on this matter?


r/react 1d ago

Project / Code Review Driving 25 Auth.js v5 providers from database config instead of static config

Enable HLS to view with audio, or disable this notification

1 Upvotes

I built Postbase, a self-hosted auth + Postgres platform for Next.js apps. It's MIT licensed and free to run yourself: clone the repo, set one secret, docker compose up. There's no paid tier.

What it does: you get a dashboard where you create projects, toggle auth providers (Google, GitHub, Apple, Discord, passkeys, magic link, SMS OTP, SAML — 25+ via Auth.js), run SQL against Postgres, edit tables and RLS policies, set up S3-compatible storage, schedule cron jobs, and send transactional email. Your app connects with a JS SDK that works like the Supabase client. It's a single Next.js app, not a dozen services.

How Claude Code was involved: I used it throughout development, mainly for the Drizzle schema, the Auth.js v5 provider loading (providers are read from the database at request time instead of static config, which took some iteration), the SQL editor, and the Docker setup. The repo has a .claude directory from that work.

The part I think is most relevant here: the repo ships its own Claude Code skill at skills/postbase/SKILL.md. It contains the full API reference, SDK patterns, RLS rules, the auth table schema, cron and storage usage, and the Swift/iOS integration flow. Copy it into your project's .claude/skills/ and /postbase loads it, or Claude picks it up when it sees you're building against a Postbase backend. Writing it forced me to document the project properly, which I'd been avoiding.

What it doesn't have: real-time subscriptions, edge functions, or SDKs outside JS. One maintainer.

Repo (free, MIT): https://github.com/harshalone/postbase
Skill file: https://github.com/harshalone/postbase/blob/main/skills/postbase/SKILL.md

Interested whether other maintainers are bundling skills with their projects, and what you'd want in one.


r/react 1d ago

General Discussion React in Production Mega Bundle 2026

0 Upvotes

r/react 1d ago

Help Wanted Best Fully Open-Source Spreadsheet Component for React with Excel Import/Export?

Thumbnail
1 Upvotes

r/react 1d ago

Project / Code Review Electron React App v13: the IPC boilerplate is gone

Thumbnail
0 Upvotes

r/react 1d ago

Help Wanted What is the hardest part of converting a React app to framework-free HTML/CSS/JS?

Thumbnail
3 Upvotes

r/react 1d ago

Project / Code Review Agentic React devlopment IDE for android

Enable HLS to view with audio, or disable this notification

0 Upvotes

This is the demo of my free agentic full stack IDE.

You can create 50+ project from react , nextjs all the way to fortran, c++ , rust , lisp etc...

The voiceover in this application is generated using my "Free Ai Caption & Voiceover" app.

Feel free to try if you liked the demo.


r/react 2d ago

Help Wanted I'm a js developer and want to take a different path

15 Upvotes

Hello, I'm a nextjs(react) fullstack developer, currently working in a company as a single developer on this position.

---

In the near future I want to transfer to a big company / team to work on big projects and as we all know most of the worlds big softwares aren't made with js, so i want to learn a mew programming language and follow a new path.

---

I'm trying to make a choice between: Java, Python or going into mobile development with React Native.

-

I was also thinking about RUST, but the market doesn't seem that big for it.

-

I'm not that good with math and I also know that python is often used in companies for data analysis.

---

I would appreciate any advice from you guys on helping me choose my next path.

Thank you!


r/react 1d ago

Help Wanted We built an open-source, real-time beat battle app (React / ASP.NET). We desperately need feedback and contributors

1 Upvotes

We’ve been working on an open-source platform for hosting live beat battles. If you've ever looked at existing tools (like beat-battle.net), you know they can be a bit heavy. We wanted to build something radically more accessible with a near-zero barrier to entry.

To keep friction low, we support completely anonymous authentication - users can literally jump in, drop a track, and start battling without handing over an email address.

Here is where we need your help:

We want to make this a community-driven project and are actively looking for contributors. Whether you want to help us optimize the frontend, refactor our logic, or just poke holes in our UI/UX, we are entirely open to PRs.

If you have a few minutes, please tear our architecture apart and let us know what we can do better

🔗 GitHub: https://github.com/upyrov/beatok

🎮 Live Demo: https://beatok.net


r/react 1d ago

Project / Code Review react-props-parser | Alternative react docgen parser (ts supported) for Storybook

Thumbnail
0 Upvotes

r/react 1d ago

General Discussion I used to prefer default exports

0 Upvotes

I used to prefer default exports.

When I started learning React, default exports were what I used most. So naturally, I became comfortable with them.

For a long time, I thought:

"If a file has one main thing to export, why not make it the default?"

Then I started using barrel imports.

Not because I fully understood their trade-offs, but because they made imports cleaner and gave me a single entry point for related components.

Instead of:

import Button from "./components/button";

import Input from "./components/input";

I could write:

import { Button, Input } from "./components";

I initially created the barrel file like this:

export * from "./button";

export * from "./input";

But because my components were using default exports, I later changed it to:

export { default as Button } from "./button";

export { default as Input } from "./input";

At first, this felt like a clean solution.

But as the codebase grew, I started running into problems.

The same component could be imported with different names.

import Button from "./button";

or:

import MyButton from "./button";

Both are valid because default exports don't enforce a name.

That flexibility gradually led to naming inconsistencies across the codebase.

I also started noticing unexpected behavior around barrel imports, development performance, and bundling.

So I started investigating.

I looked into default exports, barrel imports, tree-shaking, and how bundlers determine what to include.

That's when I realized I wanted a more explicit approach for my modules.

I switched to named exports:

export { Button };

Now the export itself has an explicit name:

import { Button } from "./button";

The name is part of the contract.

For my barrel files, I also started preferring explicit re-exports:

export { Button } from "./button";

export { Input } from "./input";

I used to prefer default exports.

When I started learning React, default exports were what I used most. So naturally, I became comfortable with them.

For a long time, I thought:

"If a file has one main thing to export, why not make it the default?"

Then I started using barrel imports.

Not because I fully understood their trade-offs, but because they made imports cleaner and gave me a single entry point for related components.

Instead of:

import Button from "./components/button";

import Input from "./components/input";

I could write:

import { Button, Input } from "./components";

I initially created the barrel file like this:

export * from "./button";

export * from "./input";

But because my components were using default exports, I later changed it to:

export { default as Button } from "./button";

export { default as Input } from "./input";

At first, this felt like a clean solution.

But as the codebase grew, I started running into problems.

The same component could be imported with different names.

import Button from "./button";

or:

import MyButton from "./button";

Both are valid because default exports don't enforce a name.

That flexibility gradually led to naming inconsistencies across the codebase.

I also started noticing unexpected behavior around barrel imports, development performance, and bundling.

So I started investigating.

I looked into default exports, barrel imports, tree-shaking, and how bundlers determine what to include.

That's when I realized I wanted a more explicit approach for my modules.

I switched to named exports:

export { Button };

Now the export itself has an explicit name:

import { Button } from "./button";

The name is part of the contract.

For my barrel files, I also started preferring explicit re-exports:

export { Button } from "./button";

export { Input } from "./input";

For my particular codebase, I prefer this approach now because the exported name is explicit and the public API is easier for me to reason about.

I'm not claiming that named exports automatically fix bundling or performance issues. That part seems much more dependent on the bundler, module graph, side effects, etc.

I'm curious how other developers approach this: Do you generally prefer named exports, default exports, or does it depend on the project? And have barrel files caused similar issues for you?


r/react 3d ago

Portfolio Headless when you want control, batteries-included when you don't — an MIT React data table

Thumbnail github.com
3 Upvotes

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.


r/react 3d ago

General Discussion I built a streaming Markdown renderer for React that caches code lines, table rows and list items — benchmarks are surprisingly good

Thumbnail
0 Upvotes

r/react 2d ago

General Discussion Equity Based Co-Founder

0 Upvotes

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.


r/react 2d ago

OC Need For Web development Cilent

0 Upvotes

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!


r/react 3d ago

OC Accessibility is and should be an absolute requirement everywhere

Thumbnail toolboxjs.com
2 Upvotes

r/react 3d ago

Help Wanted How do I type my tab elements in a better way? As in treating each tab as its own type.

1 Upvotes

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

r/react 4d ago

Project / Code Review I built a streaming Markdown renderer for React that caches code lines, table rows and list items — benchmarks are surprisingly good

Thumbnail
1 Upvotes

r/react 4d ago

Portfolio https://paint.rip/ - advanced online image editor

1 Upvotes

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.

UI with all the tools

r/react 4d ago

Help Wanted Whats the bug. Uncaught SyntaxError: Identifier 'location' has already been declared (at script.js:1:1)

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

r/react 4d ago

Portfolio MERN stack project ideas

5 Upvotes

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


r/react 4d ago

Help Wanted What do you think of specializing in one industry to stand out when applying for developer jobs?

4 Upvotes

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.


r/react 4d ago

Help Wanted CHALLENGE: How would you handle uploading to a presigned upload URL, on paste, getting a download URL back and immediately displaying it in an input? (In S3)

1 Upvotes

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 :)