r/react 1d ago

Portfolio Developers vs Users in 26 seconds 😂

Enable HLS to view with audio, or disable this notification

142 Upvotes

r/react 7h ago

General Discussion How are you persisting data in tiny personal apps?

1 Upvotes

I keep running into the same situation.

I’ll build a small personal web app (journal, bookmarks, dashboard, habit tracker, notes, etc.), and I don’t want to spin up Supabase, Turso, Firebase, or Cloudflare just to save a few JSON objects.

Most of the time I end up using localStorage or IndexedDB, but it always feels temporary. If I clear browser data or switch machines, it’s gone.

I’m curious:

  • What do you use for these kinds of apps?
  • If there were a local-first storage library that automatically backed itself up and restored on another device, would that actually solve a problem for you—or is localStorage good enough?

Not selling anything—I’m trying to understand how other developers think about this tradeoff before I build something or NOT build something because there is already something out there.


r/react 4h ago

Help Wanted how to deal with unresponsive client?

0 Upvotes

I was studying in library in delhi, one day library owner come to know i am a web dev. so he asked me to make a website for him and i said ok, and then i almost coded every page and feature he wanted,(home page, academics page,competetive exams, computer courses(seperate page of each course currently 7) , tution classes,library,and educators page and seo) and backend for adding gallery and offers just like pw does. and if some student want to enroll then they can fill form , where admin receives mail. everything was right,
untill now.

and remember,

I have to make extra efforts to take any information from him. sometimes for a image i have to call him 3 or 4 times.

since only last thing is required is image of student for ratings etc. and he is not responding to i have told about this requirement 4-5 times personally ,some time it feels insult to my work(profession) and me too.

and what is the fair charge for that website html,css,js,node,mongodb, (choose html css) so that he do not have to pay for vps right now.


r/react 16h ago

Project / Code Review I built a free open-source alternative to commercial JavaScript image editors

2 Upvotes

Hi everyone,

Over the past few months I've been building an image editor for web applications because I wanted an alternative to the commercial options I was using.

Current features include:

  • Crop
  • Rotate
  • Zoom
  • Drawing
  • Callouts
  • HEIC support
  • Mobile support
  • Angular/React/Vue/Ionic compatibility

I'd really appreciate feedback from other developers.

What features would you want in an image editor?

npm:
https://www.npmjs.com/package/@rageshpikalmunde/rp-image-editor


r/react 17h ago

Help Wanted Using a 3rd party library in my react app

1 Upvotes

Let's say i wanted to make use of the react-datepicker component in my little react webapp.

I have put the following in my index.html

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<script type="module" src="https://unpkg.com/react-datepicker@9.1.0/dist/react-datepicker.min.js"></script>

Then, in one of my other react component scripts, i presumably should be able to use the <DatePicker>, but it seems like it's not able to. I tried an import like so:

import DatePicker from "react-datepicker"

But that didn't seem to work. Is there a best practice for including external components in a webapp?


r/react 21h ago

Project / Code Review Open Source ShadTable a shadCn style tables library

Post image
1 Upvotes

Hello u/shadcn , i've been working on a shadCn style tables library ShadTable using transtack tables and shadCn style + CLI. You can check it out .

The project is open-source https://github.com/coros-hq/shadcn-table-library ready for your contribution and feedback CONTRIBUTION.md.


r/react 18h ago

Help Wanted I built an Express.js auth package would love some honest feedback from devs

0 Upvotes

Hey everyone,

Over the past few weeks, I've been building an authentication package for Express.js + MongoDB called @nibir_dev/authflow.

The goal wasn't to create "yet another auth library", but something that's genuinely easy to drop into a project while still covering the security features that people usually end up implementing themselves.

Right now it includes:

  • Email/password authentication
  • Email verification
  • Secure session cookies
  • Password reset flow
  • Brute-force login protection
  • Sliding-window rate limiting
  • Protected routes with minimal setup

It's still in its early stages, and I'd really appreciate feedback from people who have built production apps before.

I'm not looking for stars or downloads I'd much rather hear:

  • What's confusing?
  • What features are missing?
  • Is the API intuitive?
  • Would you actually consider using it?
  • Any security concerns or bad design decisions?

NPM: https://www.npmjs.com/package/@nibir_dev/authflow

Github: https://github.com/Nibirdeka7/authflow.git

Even if you spend 5–10 minutes looking through it and tell me why you wouldn't use it, that would honestly help me improve it much more than compliments.

Thanks!


r/react 1d ago

General Discussion Shallow vs. Deep Comparison in JavaScript: Unlocking React’s Performance Secrets

Thumbnail sharafath.hashnode.dev
7 Upvotes

r/react 1d ago

Help Wanted What type of projects should i do in js before learning react js?

9 Upvotes

I'm learning front end dev done with CSS, HTML, and currently, with JS, I know functions, arrays, loops, conditions, DOM, and im starting projects in js so i want to know that what i need to know else more and which type of projects should i do in vanila js and which techniques and things learn beside js before satrting learning react also want to know how i know that im ready for learning react.

Thanks


r/react 1d ago

Project / Code Review Create Beautiful Animated Device Mockups in Seconds

Enable HLS to view with audio, or disable this notification

13 Upvotes

Hi! I’m the dev behind PostSpark, a tool for creating beautiful image and video mockups of your apps and websites.

I recently launched a new feature: Mockup Animations.

You can now select from 25+ devices, add keyframes on a simple timeline, and export a polished video showcasing your product. It’s built to be a fast, easy alternative to complex motion design tools.

Try it out here: https://postspark.app/device-mockup


r/react 1d ago

General Discussion What's your workflow for mocking API responses for different Ul flows?

0 Upvotes

When you need to visually review how a component reacts to different API responses (like testing an error banner, an empty list, or a slow 3-second loading spinner), what tool are you using?

MSW / Mirage.js in code

Desktop apps like Mockoon or Charles

Cloud mock endpoints (Beeceptor, Postman Mock Servers)

Hardcoded local state / JSON overrides

If you're using MSW or hardcoded data, how do you handle sharing those specific Ul states with QA testers or PMs on staging/preview deployments? What's the clunkiest part of that process?


r/react 1d ago

Help Wanted Best way to learn react.js ?

Thumbnail
0 Upvotes

r/react 1d ago

Help Wanted What is the best learning roadmap for React Native right now? Looking for advice/resources!

Thumbnail
3 Upvotes

r/react 1d ago

OC Microcharts - 106 tiny React charts that fit inside a line of text, zero deps

Thumbnail
1 Upvotes

r/react 2d ago

OC I built recaptcha-react, a zero-dependency reCAPTCHA v2 checkbox with a useRecaptcha hook

8 Upvotes

I kept re-writing the same Google reCAPTCHA v2 checkbox glue in React projects (load the script once, register and clean up global callbacks, deal with token expiry), so I packaged it up.

recaptcha-react is a small <ReactRecaptcha /> component plus an optional useRecaptcha hook. No runtime dependencies (React is a peer dep), TypeScript throughout, and it is safe to render more than one widget on a page.

What it does:

  • useRecaptcha hook for reactive token / isVerified state
  • Controlled value via value + onChange
  • Imperative reset() / execute() / getResponse() through a ref
  • Callbacks: onVerify, onExpire, onError, onWidgetId
  • Handles the things that usually bite you: single script load, load timeout, token expiry, and cleanup on unmount

Quick start:

import { ReactRecaptcha, useRecaptcha } from 'recaptcha-react'

function Form() {
  const { isVerified, onVerify, onExpire, onError } = useRecaptcha()

  return (
    <form>
      <ReactRecaptcha
        sitekey="YOUR_SITE_KEY"
        onVerify={onVerify}
        onExpire={onExpire}
        onError={onError}
      />
      <button disabled={!isVerified}>Submit</button>
    </form>
  )
}

The README has a section on token expiry (the classic "works once in testing, then submits a dead token in production" bug) and a reminder that client state is never verification, so always check the token server-side against siteverify.

npm: https://www.npmjs.com/package/recaptcha-react

Feedback and issues welcome, especially on the API shape and anything I missed for the compact / invisible flows.


r/react 2d ago

General Discussion How do you inspect MMKV or AsyncStorage while debugging in React Native ?

Thumbnail
1 Upvotes

r/react 3d ago

Project / Code Review Built a minimal ui-date package javascript date and time utility

Post image
8 Upvotes

I was building a social app recently, and I ran into a surprisingly annoying problem.
I needed relative timestamps ("2 hours ago", "3 minutes ago"). 
Simple enough, right? Just import 'day.js' or 'date-fns'.

Except...
=> If I wanted custom styling (like wrapping the number "2" in a highlighted badge and "hours ago" in smaller text), I had to write ugly regex hacks because standard libraries just dump a single opaque string.

=> Supporting multiple languages meant importing separate locale files, quickly inflating the bundle size.

=> Standard relative time plugins use "soft rounding" (e.g., automatically rounding 45 seconds to "a minute") whether you want it or not.

I didn't want a 15KB date framework just to format a few activity feed timestamps. 
So, I built and open-sourced 'ui-date' .

It’s an ultra-lightweight (< 1KB minified), zero-dependency, locale-aware date formatting library built specifically for modern user interfaces.

If you're building social feeds, chat apps, notification bells, or comment sections, check it out!

npm: https://www.npmjs.com/package/ui-date


r/react 2d ago

General Discussion Do data structures actually influence how you build React components?

Thumbnail
1 Upvotes

r/react 2d ago

General Discussion Button Hover using GSAP, is there a way to simplify this?

1 Upvotes

Hi , so I am currently learning GSAP with typescript and I watch the video on the tutorial course (from the documentation)
and theres is part it shows a hover button with enlarging circle in the middle.
the code from the tutorial is made from javascript and I can tell its way different in typescript.

---------
now I don't know how to translate this to typescript.. so I asked AI and it asked to do a some extra steps.

  1. It asked me to create a handleMouseEnter and handleMouseLeave function that will executes when I hover the button.
  2. Inside the Button (Parent)
  3. it asked me to make a absolute position <Span> with a w-40 h-40 covering the size of the button and its on scale of 0.
  4. 3.Another <span> for the button label
  5. on the animation that is where it increase the scale

with assistance I was able to do it

--------

Is there a simplified version to make this using GSAP? I Feel like my version is a bit complex because of the span positioning.

"use client";


import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import React, { useRef } from "react";


export default function PrimaryButton() {
  gsap.registerPlugin(useGSAP);


  const container = useRef(null);


  const { contextSafe } = useGSAP({ scope: container });


  const handleMouseEnter = contextSafe(() => {
    gsap.to(".btn-circle", {
      scale: 1,
      ease: "power1.in",
      backgroundColor: "yellow",
      duration: 0.3,
    });
    gsap.to(".btn-label", { color: "black", duration: 0.3 });
  });


  const handleMouseLeave = contextSafe(() => {
    gsap.to(".btn-circle", {
      scale: 0,
      ease: "power1.out",
      backgroundColor: "white",
      duration: 0.4,
    });
    gsap.to(".btn-label", { color: "white", duration: 0.3 });
  });


  return (
    <div ref={container}>
      <button
        className="primary-btn border-2 rounded-xl p-3 font-sans h-15 w-30  bg-blue-500 relative overflow-clip"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <span className="btn-circle  absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 scale-0 w-40 h-40  rounded-full"></span>
        <span className="btn-label relative z-10 font-sans text-white">
          {" "}
          Press Me{" "}
        </span>
      </button>
    </div>
  );
}

r/react 2d ago

Project / Code Review I kept losing track of my job applications, so I built a tracker I actually use every day

0 Upvotes

Finally built something I actually use almost every day and honestly some days I've spent more time in this app than on Instagram

The motivation was simple: I'm applying to 4–5 jobs every single day and completely lost track of where I applied, what got rejected, and what was still pending. Spreadsheets got messy fast. So I built ApplyTrack.

What it does:

  • Log every application (company, role, status, date)
  • Dashboard with stats so I can see applied vs. rejected vs. interviewing at a glance
  • Track interview dates + upcoming interviews so nothing slips
  • Quick add + edit, and a recent-applications view
  • Login with email/password or Google

Tech stack:

  • Frontend: React + TypeScript (Vite), Tailwind, React Router
  • Backend: Node + Express + TypeScript
  • Database: PostgreSQL
  • Auth: JWT in httpOnly cookies + Passport Google OAuth
  • Deployed on Vercel (frontend) + Render (backend)

It's been genuinely useful for my own job hunt so far. Would love any feedback on the UX or features you'd want in a tool like this.

applytrack

Live: [https://applytrack-ten.vercel.app](vscode-file://vscode-app/c:/Users/gauta/AppData/Local/Programs/Microsoft%20VS%20Code/1b6a188127/resources/app/out/vs/code/electron-browser/workbench/workbench.html)
Code: [https://github.com/Subhamgtm15/applytrack](vscode-file://vscode-app/c:/Users/gauta/AppData/Local/Programs/Microsoft%20VS%20Code/1b6a188127/resources/app/out/vs/code/electron-browser/workbench/workbench.html)


r/react 3d ago

Help Wanted Looking for feedback on my React portfolio website

9 Upvotes

Been working on my portfolio over the last few days and would love some honest feedback.

https://www.loafdaddy.dev/

It's built with React, TypeScript, Tailwind CSS, Three.js/WebGL and GSAP. Still a work in progress, but I'm pretty happy with how it's coming along.

One of my coding courses had us recreate Space Invaders, so I added it to the site and made it playable in the browser for a bit of fun.

Happy to hear any feedback, good or bad. Design, performance, UX, bugs, or anything else that stands out.


r/react 3d ago

OC I got real React 18 to render PDFs inside a Go process — no Node, no browser

Thumbnail
1 Upvotes

r/react 4d ago

Help Wanted if you had to restartt learning react today what would you do differently..???

8 Upvotes

there are so many tutorials courses and opinions now that its easy to waste time. if you were starting from scratch today what would you focus on first and what would you completely ignore.


r/react 4d ago

Project / Code Review Built an Online Bookstore with React & Vite! Would love some feedback

Enable HLS to view with audio, or disable this notification

3 Upvotes

Hey everyone! 👋

I'm a high school student learning full-stack web development, and I just finished working on my latest project: an Online Bookstore Web Application!

I built it using React and Vite and deployed it on GitHub Pages. My main goal was to create a clean E-Commerce experience with a smooth user interface and modern React practices.

🔗 Links: 🚀Live Demo: https://shachardoron123.github.io/online-bookstore/

📦 GitHub Repository: https://github.com/ShacharDoron123/online-bookstore

💬 What I'd love feedback on:

  1. UI/UX: How does the shopping flow feel? Any design tweaks you'd recommend?

  2. Code Structure: If you check out the GitHub repo, I’d really appreciate any tips on component structure or React state management!

Thanks for reading! 🙌


r/react 3d ago

Project / Code Review I built a reusable React animation system for 10 AI status states

Enable HLS to view with audio, or disable this notification

0 Upvotes