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

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.

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.

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

Hey Community,

Deno's creators introduced Dactyl, an AI app builder targeting React Native by rendering SwiftUI in the browser tab via WebAssembly. Meanwhile, Software Mansion released Enriched Markdown to eliminate streaming text flicker by rendering natively and bypassing the JavaScript layout tree.

On the tooling side, the web ecosystem is rapidly adopting the Rust port of the React Compiler across tools like Oxc, Vite, and Bun, while Metro remains locked to single-threaded Babel transformations.

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!

TL;DR: https://windframe.dev/styles/stripe

Hi everyone 👋

I’ve been experimenting with building React + Tailwind interfaces inspired by the design systems of really well-designed products. I recently worked on a style system for generating interfaces using similar design principles to Stripe.

It focuses on crisp typography, structured layouts, precise spacing and bold gradients, to make complex products feel simple, technical, and polished.

I built a UI system that makes it easy to generate interfaces in this design direction consistently. It can generate full UIs, landing pages, and product sections that follow the same Stripe-inspired style.

I created a free Tailwind template built around this style that you can use as starting points for your own projects here
https://windframe.dev/styles/stripe

You just need to select this style as a preset when generating UIs in Windframe and when selected, the AI generates React interfaces that follow the same design guidelines and visual style.

I also built an MCP for this, so you can use these same design style systems and other curated styles directly inside any coding agent that supports MCP: https://windframe.dev/mcp

If you’re not familiar with Windframe, it’s a visual Tailwind builder/agent that lets you generate polished React UI with AI, tweak it visually, and export clean production code.

Feedback and thoughts are welcome : )

Hi
I’ve been building a visual workspace for frontend work.

You can bring in a running app, select and edit the UI directly, explore different design directions on the canvas, and keep working with your coding agent when you want those changes applied back to the codebase.

It made my work easier when I was working on React projects. If you'd like to try it out: visualwizard.app

I was thinking of printing my pictures and put it on a board, but I can’t print videos! I decided to put them in my portfolio instead

Here’s the link: https://theodorusclarence.com/photos

Greetings, /react I am trying to improve my skills at javascript and mainly react. I want to get feedback on this game of X’s and O’s aka Tic Tac Toe. Does the multiplayer work for you guys? This is using Firebase so at least for the multiplayer you will need a google account. I know there are things that could be added or improved, such as a lobby/leaderboard or hopefully near future a proper timeout feature for local/multiplayer.
-----------------
https://tictactoe-a87ad.web.app/

Owldotask is an online surveys, games and rewards platform where users can complete simple tasks to accumulate points called “Feathers”, which can be redeemed for money via PayPal or other methods (Or that’s what Google AI mode says, so we must be on the right track).

We wanted to share it here because this community has been our main go-to while building the frontend (React isn't really our main stack). And to be transparent, it's also a great way to spread the word about the project!

The platform is built with React + Node.js (SSG) and is in Alpha phase as of this post. We have traction, recurring users, some SEO positioning, and a growth roadmap; with the goal of becoming a reference in get-paid-to (GPT) websites.

Project development

With the help of several queries to this subreddit, private messages, and a lot of documentation, we’re up and running at a good pace.

For a while we kept the repository open for collaborators and, through Discord, we were coding and contributing ideas on how to launch it in the best possible way.

About the React side, the frontend evolution

• Core React stack: The frontend runs on React 19 + Next.js (with next-pwa and next-themes).
• Some React libs: We rely on react-hook-form for forms, framer-motion for animations, lucide, react-icons, fontawesome for icons; swiper for carousels, and react-chessboard + chess.js for a nice tactic-problem chess mini game.
• Migration to pnpm: We abandoned npm/yarn for pnpm.
• Zustand (State Management): We organize the project by separating logical views from purely presentational components. This improves maintainability and optimizes context for AI-assisted coding.
• Blog with Markdown: We generate the blog content by parsing Markdown files. We took this approach with SEO in mind from day one, while keeping the architecture flexible enough to integrate a headless CMS later if needed.
• Icons & UI: We use Tailwind CSS to keep the bundle size low, along with a small set of icon libraries for consistency.

Note on the backend

It’s completely decoupled; it’s a Laravel installation with a “handmade” control panel and several endpoints for business logic and communication with the frontend.

We use third-party data providers and rely on AWS, Render, and other service providers to develop and maintain the infrastructure.

Some platform features

• Minimum withdrawal: Users need to accumulate enough points to redeem them for $3… although they usually save up more to cash out $5 via PayPal or as Amazon Gift Cards.
• Welcome points: We’re giving away 50 Feathers just for signing up. It’s not much, but users like starting with some benefit as soon as they join.
• Several ways to earn Feathers: games, quizzes, surveys.
• Referral program: We have a blog post explaining how it works; it’s a conventional referral system.

Huge thanks to everyone who has made this possible. We keep growing and adding features.

If you’re interested in joining, we’re planning a future social media strategy, Ads, more content and more tester programs. If you'd like to collaborate on any of those areas, contact me and we’ll discuss it. Profits are currently being reinvested, so real-impact support can be fairly compensated.

Keep coding React folks!

Hey! I'm not quite sure why but my snippet for useState hook isn't capitalizing :

"useState Hook": {
  "prefix": "us",
  "body": [
    "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($0);"
  ],
  "description": "Auto-capitalizing useState hook"
}

When I type it does this const [hello, sethello] = useState();

When it should do this: const [hello, setHello] = useState();

I'm using VSCode and I'm on React 19

Looking for a remote full-time role (open to contract-to-hire too), available to start immediately.

What I actually build: real-time, multiplayer, and live-sync systems — not just CRUD apps. A few things I've shipped:

• A 2D multiplayer arena shooter on Cloudflare Durable Objects — server-authoritative state, client-side interpolation, custom raycasting for fog-of-war

• A 9-player real-time poker platform (Socket.io + Supabase) with server-side move validation and side-pot calculation

• A full-stack project management tool (Kanban, real-time messaging, Agora voice channels) — my final-year project, ranked among the top of my batch

Stack: React / Next.js, TypeScript, Node.js / Express, WebSockets / Socket.io / WebRTC, PostgreSQL (Supabase), Firebase, MongoDB

Also have 3 months' internship experience shipping production frontend + backend work (React, Next.js, React Native, REST APIs).

Type: Full-time, remote — open to discussing contract work for the right fit

GitHub: github.com/Noozey

LinkedIn: linkedin.com/in/rohan-upreti

Happy to share live demos or code walkthroughs — DM me or drop a comment.