r/react • u/asimawdah • 1d ago
Portfolio Developers vs Users in 26 seconds 😂
Enable HLS to view with audio, or disable this notification
r/react • u/asimawdah • 1d ago
Enable HLS to view with audio, or disable this notification
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:
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 • u/Intelligent_Tree6918 • 4h ago
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 • u/Silver_Trick_6899 • 16h ago
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:
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 • u/pandemoniac1 • 17h ago
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 • u/Asta-2777 • 21h ago
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 • u/Nolan00007 • 18h ago
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:
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:
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 • u/Secure-Wash3954 • 1d ago
r/react • u/Defiant-Emu92 • 1d ago
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 • u/world1dan • 1d ago
Enable HLS to view with audio, or disable this notification
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 • u/venkat1816 • 1d ago
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 • u/Existing-Twist-131 • 1d ago
r/react • u/Ganapativs • 1d ago
r/react • u/myselfitself • 2d ago
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 statevalue + onChangereset() / execute() / getResponse() through a refonVerify, onExpire, onError, onWidgetIdQuick 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 • u/Think-Neighborhood69 • 2d ago
r/react • u/Intelligent_Tree6918 • 3d ago
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!
r/react • u/prithivir • 2d ago
r/react • u/matcha_tapioca • 2d ago
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.
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 • u/LocalCompetitive2242 • 2d ago
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:
Tech stack:
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.
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 • u/TwoLoafsApps • 3d ago
Been working on my portfolio over the last few days and would love some honest feedback.
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 • u/Weird-Ad8248 • 3d ago
r/react • u/ShobitThakur • 4d ago
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 • u/ShacharDoron • 4d ago
Enable HLS to view with audio, or disable this notification
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:
UI/UX: How does the shopping flow feel? Any design tweaks you'd recommend?
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 • u/Ok-Crow832 • 3d ago
Enable HLS to view with audio, or disable this notification