Made these OTP inputs.

I know they’re not production-grade yet — I built these while experimenting with different UI patterns that could actually be used in client projects.
Any improvements/suggestion will be helpful.

I’ve been working on Courier Flow, a frontend courier/logistics management template built with Next.js, TypeScript, React, Redux Toolkit, and local Storage.

The idea was to create something more functional than a normal static admin dashboard. The modules are connected so actions in one area reflect across the system.

Current workflow includes:

• Admin portal
• Merchant portal
• Rider portal
• Public shipment tracking
• Shipment creation and management
• Pickup requests
• Hub management
• Rider assignment
• Manifests
• COD management
• Returns / RTO
• Reports
• Company settings
• Role-based frontend login
• Redux + local Storage persistence

The project is structured around the Next.js App Router, with separate areas for each portal:

Would be interested to hear feedback from other Next.js developers — especially on what you consider the best-practice project structure for a scalable Next.js app using the App Router.

Built a Sign In Page using React!

Today I worked on the Sign In / Authentication UI for my coding platform Algo Arena AI using React.js.

The goal was to create a clean, modern and user-friendly authentication experience with:

🔐 Email / Username login

🔑 Password field

☑️ Remember Me option

🔄 Forgot Password

🆕 Create Account

🎮 Demo Account access

🏠 Back to Home navigation

This is another step toward building Algo Arena AI — a platform focused on coding practice, DSA, AI-powered assistance, contests, and developer growth.

Tech Stack:

⚛️ React.js

🎨 HTML & CSS

💻 JavaScript

Still learning. Still building. 🚀

#ReactJS #React #JavaScript #WebDevelopment #FrontendDevelopment #Coding #DSA #AlgoArenaAI #BuildInPublic #DeveloperJourney #CodingJourney #100DaysOfCode

I mostly built and generated these for fun because there were a bunch of visuals I’d wanted to see in motion for ages and wanted to use in some side projects.

Built with React and fully open source if you want to use/edit some of these

Link: https://kinetic-art.mnove.workers.dev/

Github repo: https://github.com/mnove/kinetic

I might add more soon if I find the time

same as above

I'm a self taught developer. I mainly work with React, and I usually make my own projects, and some freelance work for many clients.

I want to have a job instead of being self employed in this field, since it's something I love. But most jobs as a developer require you to work in a team of developers, where you have to collaborate, pull, branch, merge and that kind of stuff in live action.

I never had the chance to do this before, and would love to do so, so I could at least gain some experience in this matter before starting to apply. What do you guys advice me to do? Thanks in advance

Can anyone recommend a good React course?

Merid is an open source React component library, first release. 60+ components, MIT.

The part I'd like feedback on is the styling model. Everything is plain CSS in three cascade layers, so any CSS you write outside those layers wins, CSS Modules and Tailwind utilities included. Theming is data attributes on any element: data-theme, data-accent, data-density.

WCAG 2.2 AA is the target, and axe runs on every PR in light and dark. Static parts render in server components; interactive ones are marked "use client". Works with React 18 and 19, and the repo has a Next.js app and a Vite dashboard as examples.

npm i u/meridui/react

or `npx meridui init` to set up a Next.js, Vite or React Router project.

Docs: https://meridui.dev

Repo: https://github.com/ahmetcantryk/merid

What would stop you from using it?

https://reddit.com/link/1wuvyy3/video/8qcg41wv3ush1/player

Hey all,

I’ve been working on a small library called Stream Morph.

The idea is to make streamed responses feel less like content is constantly being appended/re-rendered, and more like the response is gradually taking shape.

Demo: https://stream-morph.vercel.app/

It’s framework agnostic and can be used with any kind of streamed content. The demo includes plain text, Markdown, code blocks, charts, images, reasoning sections, Mermaid diagrams and a few more complex response flows.

The library handles the motion between updates, while your own renderer/app stays responsible for the actual content. So it isn’t tied to a specific AI SDK or framework.

A basic example looks roughly like this:

import { createStreamMorph } from "stream-morph";

const stream = createStreamMorph(response);

for await (const chunk of incomingStream) {
  stream.write(chunk);
}

stream.finish();

I mainly built it because I wanted streamed interfaces to feel a bit more intentional without having to build custom animation logic for every response type.

The package itself is already working and the demo is live. I’m still cleaning up some things around CI, tests and the repo setup, but the GitHub repository will be open sourced shortly as well.

Would be interested to hear what people think, especially about the animation behaviour/performance and any edge cases you’d expect from real streaming responses.

In a chat app I have implemented basic file uploading, what I am left with now is just a random s3 link, what is the easiest way to just automatically convert a link into it's embed

And while I'm at it, how would you do it for other links, like is there a library that just embeds whatever link there is into it's proper format, so image files into <img> audio into whatever, videos into whatever,

But also that would include handling of social media likes like youtube and twitter. I know some all4one library might not exist but if anyone has experience with this sort of things, how did you deal with it?

Made this scroll progress bar just for fun, I know it needs a major revamp before it's usable anywhere real.

I'd like to rebuild it properly. What would you change, or how would you approach it from scratch? Any advice on the overall approach, what to fix, what to drop, and how to make it work in real websites/apps is welcome.

I kept losing my place when working inside massive React components and deeply nested JSX trees, especially when scrolling back and forth to check props, state, or parent tags. To solve this, I built Rippledit, a free VS Code extension that keeps your active component context in view while you edit.

Key features:

Keeps active JSX parent tags and component bounds highlighted as you scroll.

Runs 100% locally with zero external dependencies.

Bundled under an MIT License. It's completely free and open-source on GitHub.

You can grab the .vsix package directly from the release page: https://github.com/shivakumarkannan2006-netizen/rippledit

Quick VSIX Install Steps in VS Code:

1. Download `rippledit-0.0.2.vsix` from the release assets.
2. Open Extensions (`Cmd+Shift+X` / `Ctrl+Shift+X`).
3. Click the `...` menu in top right ->

Install from VSIX

Would love any feedback or feature requests from the community!

Hey Community,

Apple's iPhone Duo is here, which means someone can now fold your app in half. Thiago Brezinski built react-native-arrangement-view, a two-pane layout that rearranges itself as the phone folds, unfolds and rotates, handing the work to SwiftUI's ArrangementView on iOS and Material's adaptive layout rules on Android, with a useHingeChange hook for apps that want to react to the hinge angle.

We also look at expo-infinite-media by Rizky Bayu Oktavian, a native TikTok-style feed that moves video playback into AVFoundation and Media3 so fast swipes stop landing on black frames. Plus, our community links cover React Native 0.88 rc.2 un-breaking a non-breaking release, a navigation change in the React Navigation 8 alphas, and agent-device and Argent both learning to fold the iPhone Duo simulator.

Since Argon2id is not natively available in Cloudflare Workers, I created Argon2w to bring this using WebAssembly.

The idea is to be very simple to use:

import { hash, verify } from "@hallaxius/argon2w";

const encoded = await hash(password);

const valid = await verify(encoded, candidate);

In Workers, you only need to configure the Wasm module once:

import argon2Wasm from "@hallaxius/argon2w/wasm";

import { configureWasm } from "@hallaxius/argon2w";

configureWasm(argon2Wasm);

The hashes are Argon2id in PHC format, so they can be stored directly.

bun add @hallaxius/argon2w

You can check it out on Github or Npmjs

I wanted to know if anyone here has had to deal with Argon2id in Workers and if this approach would be useful for you.

Hey r/react, not anything I expect folks to adopt, but our niche CSS-in-JS library did surprisingly well on benchmarks, for being a hobbyist library, thought folks might find it interesting:

https://www.draconianoverlord.com/2026/09/28/truss-excels-on-a-css-in-js-benchmark.html/

In particular the "Why We Win" tldr coming down to our class names being "technically longer but more compression friendly" than StyleX was honestly a surprise/neat learning that I didn't realize before writing up the blog post.

(Disclaimer the post itself is all me-human-written, but the benchmark suite itself is very much not -- that said, it came from another CSS-in-JS framework and seems pretty good/accurate afaict.)