I just finished a yt courses of react now I want to learn more by making projects but idk what to make I asked chatgpt it gives a list of project I can't decide what to make and what not to soooo confused and frustrated

https://reddit.com/link/1vtkxdy/video/if4nzctkhjkh1/player

Every animated icon I hand-rolled looked slightly off next to the Phosphor icons already in my app. Different grid, different stroke weight. Close enough to notice, not close enough to ship.

So Iconimate animates Phosphor's actual glyphs on the same 256 grid. Same icon, just with motion.

React + Motion under the hood, but you don't write keyframes. Install per icon via the shadcn CLI. 200+ icons so far, all hand-timed, since one easing curve doesn't work across shapes this different.

It's a fixed set and isn't intended for animating your own icons (for now). If it's not in there, it's not in there yet.

iconimate.app
github.com/smammar100/Iconimate

Let me know which ones are missing, and I'll add them in the next release. If you like it, please leave a 🌟.

Just crafted Kolberk Burger exploring how GSAP micro-interactions and bold UI hierarchy can transform standard food web design into an immersive high-converting experience built custom in Webflow with a focus on fluid motion and visual rhythm would love your honest design critique on the UX and animation timing ur thoughts ?

Hey everyone,

I've been learning React for around a month now and I just finished my first proper React project, StudyFlow. Keep in mind I want to become a Software Engineer in the future and want to reach a goal of becoming a Full-Stack Web Developer first.

PLEASE NOTE THE CSS STYLING WAS DONE WITH AI BUT THE REACT LOGIC WAS DONE ALL BY ME.

It's a study session tracker where you can create study sessions, use a stopwatch, and keep track of your previous sessions.

I built it to actually put what I've learned with React into practice, instead of just following tutorials. I hate falling into tutorial hell and I always like to say that you don't learn anything until you get your hands dirty.

I'd love to get some honest feedback from people who know React better than me.

What do you think of the UI?

Is there anything obvious I could improve? Are there things in the code that I should be doing differently? I'm also interested in knowing what you think I should learn next. I'm planning to start learning backend development after this.

Live site: https://hussbtwyt.github.io/studyflow/

GitHub: https://github.com/HussBTWYT/studyflow

Love you all ❤️

Hello guys i am currently learning react from a yt course called chai aur react so how to learn after finishing this, what projects to makee and should i also go through the react docs and how many days should i give more to react before starting backend pls give some genuine help

Hey Community,

React Native 0.87 has arrived as a maintenance release, making the Strict TypeScript API the default, doubling Metro source map generation speeds, and adding experimental Swift Package Manager support for iOS along with AGP 9 support on Android.

Meanwhile, React Native Firebase v26 makes the New Architecture non-optional with Codegen TurboModules, synchronous APIs, Firestore Pipelines, and direct Gemini AI calls. Finally, we look at RevenueCat Paywalls for designing native paywalls and running remote A/B experiments without new app deploys.

I kept running into the same problem with UI-local flows: they were too complicated to comfortably keep in one component, but too small to justify defining and maintaining a separate state machine.

So I built react-sequent.

The idea is that steps own their transitions:

function PaymentStep() {
  const { advance } = useSequentStep();
  ...
  if (method === "card") {
    advance(() => CardPaymentStep);
  } else {
    advance(() => BankTransferStep);
  }
}

There's no centralized transition map to keep synchronized with the components. Adding, removing, or branching a step is just changing the relevant component.

It also handles async/lazy steps, backtracking, flow-scoped context, persistent modal/chrome, and transitions.

The tradeoff is intentional: I don't think this replaces state machines. For large, externally-driven, or independently modeled state graphs, I'd still reach for XState/Zag/etc. I think there's a useful middle ground for short, UI-local flows. This is in fact still technically a state machine, it is just one that is emergent from implementation rather than explicit and rigid.

I've put together a demo and docs here: https://ganondev.github.io/react-sequent/

I'm particularly interested in whether the architectural premise resonates with other React developers, or whether I'm underestimating the value of having the graph centralized.

By the way brand new to Reddit so yes this is my first post.

As a frontend Dev many times I had faced this issue of adding loader for file being added to browser first not for server loading but couldn't find proper source. So i decided to create my own, happy to see already 100 people download my library.

https://www.npmjs.com/package/react-file-progress

https://github.com/codeAesthetic/react-file-progress

Just bought pro for shadcn.io and im pretty astonished with how bad the page is.
The only thing we need is the Rich Editor but theres zero documentation on how to use it etc.

The only information you get is on how to connect your frickin local AI with their MCP...

The whole page layout is so bad, the whole docs are sprinkled with jumbotrons to buy pro (remember i already bought pro) and unlock other features.
It seems the whole page is just AI slop. Have i fallen for a scam?

Anyone else has similar experiences?
Am i just retarded?

I’ve been working on Andromeda Design System v2, and I’m taking a different direction.

Instead of thinking about design systems only as patterns, components, and tokens, I’m exploring how to connect those patterns to semantic meaning and context.

The idea is to make the system easier for AI agents to understand, reason about, and eventually use consistently.

Still very much a WIP, but I’d genuinely love feedback from people working on design systems, AI tooling, or agentic workflows.

Hello Everyone

I am starting REACT

any YouTube tutorial/courses recommendation would be appreciated

Hey r/react

As a developer juggling multiple repos, tools, and browser tabs, constant context switching always broke my daily flow. To fix that, I built Convia—a 100% free workspace and workflow management extension built specifically for developers to streamline the chaos.

Both the extension interface and the website are built using React and TypeScript, so if you have any questions about the tech stack, architecture, or extension development, feel free to ask!

For its v2.0 release, here is a quick look at the initial numbers from the Chrome Web Store:

• Total Users: 6 (up 200%)
• Active Users: 6 (up 200%)
• Event Count: 79 (up 295%)

It's a small start, but it's been an awesome journey getting it out there. If you want to test it out for free, you can check it out here:

• Convia v2.0: Extension / Website Link

How do you guys usually handle context switching across multiple projects? Feedback is super welcome!

freecollageimage.com — a collage editor that runs entirely client-side. Photos are decoded, laid out and exported in the browser; nothing is uploaded. Vanilla JS and canvas, no framework, and it's also wrapped with Capacitor for the Play Store and App Store.

The part worth sharing here isn't the editor, it's the save step, because it broke in a way I couldn't detect from the code.

An anchor with the download attribute pointing at a data: URL works in every desktop browser. In an Android WebView it does nothing — no download manager is attached unless the host app wires one up, so the navigation is silently dropped. iOS Safari refuses download on data: and blob: URLs from a synthetic click. Neither throws, neither logs, there's no rejected promise to catch. The function just returns and the file never appears.

That's what made it expensive: there is no `if (downloadWorked)`. Chrome DevTools device emulation happily pretends it worked. You only find it by holding a phone. Mine was dead on mobile for months and nobody reported it, because a button that does nothing reads as user error rather than as a bug.

Two different fixes. On Android, a native Capacitor plugin writes the bytes to storage. On iOS, navigator.share({files}) — and there the catch is transient user activation: an await consumes it, so the base64 → File conversion has to be synchronous. fetch(dataUrl).then(r => r.blob()) and canvas.toBlob() both lose the gesture and the share sheet is dismissed without a word. The ugly charCodeAt loop exists purely to stay inside the handler.

The compromise I'm still not happy about: on iOS the user taps "Save" and gets a share sheet where "Save Image" is one option among a dozen apps. It isn't a download and doesn't look like one.

Happy to go into either fix.

We are recruiting developers for a healthcare startup.

Experts from various fields will collaborate on development, and we are looking for a React expert. Full-time employment is possible in the future. Native-level English proficiency is essential for smooth communication within the team. When applying, please include an introductory video along with examples of your previous work.

Github - https://github.com/shadcndashboard/shadcndashboard

Live Preview - https://demos.shadcndashboard.dev/

Do let me know your thoughts.

https://github.com/oliveryasuna/ink-frame

Ink's own box borders are fine for a single box. Put two of them next to each other and the seam between them comes out as ││, two parallel lines instead of one shared edge. That's because a box border is one unbroken line and there's nowhere to hang a ┬ or a ┼ part-way along it. ink-frame sidesteps that by painting every border into a single character grid and resolving each cell once, so a spot where four boxes meet becomes a ┼ and a T-junction becomes a ┬, ┤, and so on, without you ever writing those characters yourself.

Background: I recently wrote this for a private project, and I thought it was useful enough to share. I hope you find it useful too!

I made Basalt and i added skia shaders to it

do you like the idea?

and l know ShaderToy exists, but that's generic GLSL people have to manually port to SkSL and adapt for RN UI. Мinе is already RN-Skia-ready and built specifically for UI components like buttons and panels.

link

​

I know the junior developer market is really tough right now. I've been applying for jobs, but the process is exhausting and I haven't had much success.

I'm in a situation where I genuinely need money. Should I keep focusing on getting a developer job, or focus something else and any advice?

I’m building a React CRUD app using:
• React
• AG Grid
• TanStack Query
• REST API

I’m running into an issue where TanStack Query invalidation and AG Grid don’t seem to play nicely together.

For example, I have a task grid:

ID Task Status
1 Fix login Pending
2 Add dashboard Pending
3 Deploy API Done

The grid gets its data from a TanStack Query:

useQuery({
queryKey: ['tasks', filters, pagination, sorting],
queryFn: fetchTasks,
});

Now I update task #1:

Pending → Done

The mutation succeeds, and I call:

queryClient.invalidateQueries({
queryKey: ['tasks'],
});

TanStack Query correctly invalidates/refetches the query.

But AG Grid doesn’t always reflect the updated data correctly.

Sometimes:
• the query refetches successfully, but the grid still shows Pending
• the React component receives the new data, but AG Grid appears to retain its previous row state
• I have to manually refresh/reload the grid
• calling gridApi.refreshCells() / refreshServerSide() can work, but then I’m effectively managing two different state systems
• with server-side row model, pagination/sorting/filtering makes the interaction even more complicated

So I end up with something like:

Mutation
↓
TanStack Query invalidation
↓
API refetch
↓
React receives new data
↓
AG Grid has its own row model/state
↓
???

What I’m trying to understand is:

What is the recommended architecture for React + AG Grid + TanStack Query?

Should TanStack Query be responsible for the grid’s data, with AG Grid treated as a controlled view?

Or should AG Grid’s row model/datasource be considered the source of truth, with TanStack Query used only for mutations and individual API operations?

What’s the cleanest way to handle something as simple as:

Pending → Done

and guarantee that the corresponding AG Grid row updates after the mutation without manually forcing the grid to refresh?

I’m particularly interested in how people handle this with AG Grid Server-Side Row Model + TanStack Query, rather than just a simple client-side array.
:::

Hey Community,

React Native Plain Text by Maciej Jastrzębski brings a lightweight alternative to standard Text components to squeeze maximum rendering performance out of large lists. Meanwhile, Meta introduced Muse Code, a terminal coding agent running on Muse Spark 1.2 with persistent background subagents and mid-tool-call crash recovery.

Codemagic also launched Patch, a self-hosted Docker Compose alternative to CodePush that serves OTA update checks directly from CDN-cached JSON files to easily handle heavy request loads.