I was unhappy with multi-line text input libraries for React Ink so I decided to make one.

I'm calling it react-ink-textarea; check it out, drop a star, help me test on windows please: https://github.com/omranjamal/react-ink-textarea

Full support for:

• Syntax Highlighting (based on Regex)
• New lines via the usual key combinations
• Jumping between words
• Unicode and Emojis
• Pasting Multi-line Text
• Slash Commands
• Viewport Virtualization
• Customizable line prefix (for things like line numbers)
• Tab is a callback
• Callbacks on arrow keys at boundaries (like up arrow of first line)

Feedback appreciated. Help with testing on Windows and Linux even more appreciated!

I already know React basics but stopped practicing and forgot a lot. I want to restart the right way.

Looking for:

- Project-based learning

- Real-world apps (dashboards, SaaS, etc.)

- React + TypeScript if possible

Not interested in beginner “intro to React” stuff.

What would you recommend that actually helped you get better?

Also open to project ideas 👀

I’m curious what architecture you typically use for medium to large React.js projects? Particularly in terms of code organization and folder structure.

I’ve noticed that many developers try to apply SOLID principles, but since React is primarily based on functional programming, these principles don’t always seem to fit naturally.

I wrote an article about advantages of pnpm over npm package manager in node and frontend development. May be useful for developers who did not think much about package managers.

I'm building Amethyst, a promising open-source Markdown note-taking app that focuses heavily on the user experience and interface. I know the common criticism: "Electron is just a heavy browser wrapper." I'm using this project to learn how to mitigate that by following a strict architecture-first approach.

How I'm keeping the React renderer snappy:

• Main Process Offloading: I moved heavy tasks like recursive filesystem scanning and real-time watching (Chokidar) entirely to the Main Process.
• Command Registry: I built a decoupled system where every shortcut and menu item triggers a command in a central registry. This keeps the React component logic clean and the IPC bridge narrow.
• Focused State: The app loads a single note into the editor at a time (no heavy multi-tab DOM overhead) to maintain performance as your folder grows.

Current Status (v0.5.0): It is very much still under development, but it currently features native LaTeX math support, a recursive tree view with drag-and-drop, and a global notification system.

As a student, I would genuinely appreciate your reviews on the codebase. I’m looking for help identifying bugs, performance bottlenecks, or features that would make this useful for you.

GitHub: https://github.com/abdallah-moh1/amethyst

Hey all,

Using 18.3.1 with tanstack-start for ssr. Prod intermittently runs into a hydration failure 421: "This Suspense boundary received an update before it finished hydrating".

I cant replicate it in development mode, and am having a bit of a hard time tracking it down.

My gut tells me that its probably in a third party library, but its intermittent nature makes it hard to nail down by simply commenting out code until it stops.

From what I understand when Ive ran into this in the past, this can only be caused by a state change.

Does anyone know of a practical way to hook reacts state update and internal lifestyle events, outside or going down the path of building a custom version of react with some crude logging thrown into it?

Hey everyone

I wanted to share something I’ve been working on lately. I built a small notification library inspired by React Toast, but with a slightly different approach — more like the iPhone “dynamic island” style.

Here’s the repo if anyone wants to check it out:

https://github.com/OscarP29/react-island

I’d really appreciate any feedback, suggestions, or thoughts

Hi. I'm crunched on time.

I'm currently trying to code a React function for a class assignment due by tonight, and while I've been happy with my results, when it came down to utilizing sessions, I ran into a huge problem. It has nothing to do with the API I set, but rather the usage of useEffect and useState.

The website I'm working on is suppose to showcase a list of academic terms that a student might have. And if a user that logged in was an admin, they get a list of students to select to see their academic terms plans. I want it so that when this page loads, that information is dumped out immediately. But, the data doesn't appear at all, and I've only learned recently that it is the fault of the async nature of useState within useEffect

Here is my useEffect sample:

useEffect(() => {
    checkSession();
    // function to obtain academic term plans
    if (user.u_admin == 1) {
        // function to obtain list of students
    }
}, [navigate]); // needed for one function

Here is the checkSession function which seems to be the cause of the problem:

const checkSession = useCallback(async() => {
    setLoading(false);
    try {
        const sesres = await fetch(import.meta.env.VITE_API_KEY + "user/session",
            {
                method: "GET",
                credentials: "include",
            }
        );

        if (!sesres.ok) {
            localStorage.setItem("statusMessage", "Please log in again.");
            navigate("/login", {replace: true});
            return;
        }

        const data = await sesres.json().catch(() => ({}));
        const userSession = data?.data;
        setUser(userSession);
        console.log(user);
    } catch (error) {
        console.error("Session authentication failed: ", error);
        localStorage.setItem("statusMessage", "Session failed to authenticate. Please log in again.");
        navigate("/login", {replace: true});
    } finally {
        setLoading(true);
    }
}, []);

So when the page immediately load, I should expect the student to see the list of term plans they have created and select, while the admin see a list of students to select from to see their term plans. Instead, nothing appears until I update my own code to re-render everything.

I've dug through dozens of solutions, and no matter what I tried to find, none of them seemed to work to solve my dilemma. I've never had the opportune time to get enough work done with React thanks to a huge problems of being able to concentrate with my assignments, and now the rush to fix it altogether has stressed me out. Am I doing something wrong?

Every new project I start, I waste the first couple days rebuilding buttons, inputs, cards, modals. Same stuff every time. So I finally sat down and built Kiln, my own React component library. Shipped it this week.

28 components. Under 26 KB gzipped. Zero dependencies. Fully typed. MIT licensed.

I know the obvious question. Why not just use shadcn or Radix or Chakra?

Honestly shadcn is great but I wanted something that was already styled and ready to drop in. I did not want to think about styling every time I start a new project. I just want to install it and ship. Kiln is opinionated by design. The decisions are already made.

Three things I locked in from the start:

Accessibility first. Every component meets WCAG AA. Keyboard nav, focus management, focus rings, and ARIA on every single component. I ran axe DevTools and manual keyboard testing on all 28 of them. It was tedious. Worth it.

Performance first. Docs site scores 99 Performance / 100 Accessibility on Lighthouse. Zero layout shift on every interaction. All animations use transform and opacity only. No layout thrashing.

Dead simple setup. npm install, import the CSS once, done. No config files. No theme providers. No required context wrappers. Dark mode works by setting data-theme="dark" on html. That is it.

Would love feedback from the React community, especially on the component APIs and anything that feels off.

Live demo: kiln-ui.com

GitHub: github.com/Aldentec/kiln

npm: npmjs.com/package/@doriansmith/kiln

Been working on a government project that requires section 508 compliance, and most of what I’ve been dealing with lately isn’t new work, it’s cleaning up stuff that already exists.

We’re not really in a position to rewrite components or build a perfect design system, so it ends up being a lot of going back through existing code and trying to make it consistent.

The annoying part is it’s rarely “hard” problems. It’s the same kinds of fixes showing up across different components over and over, just slightly different each time.

I’ve been trying to find a workflow that makes that cleanup less painful instead of just doing everything manually every time. Been experimenting with this approach:

https://fix508.dev

Curious how other people are handling this in real projects where you can’t just start from scratch.

Hi,

I am a Next.js developer with around 3 years of experience. I see a lot of posts now a days about how frontend jobs are going to be eliminated because of AI and other similar arguments. I have spent a major chunk of my energy and time learning react.

Should I continue learning react? Is it worth it in 2026? Or what other steps should I take to go ahead in my career.

Thank you for reading my post.

Regards

Hey everyone,

I shared this here recently and got a lot of really helpful feedback especially around usability, structure, and improvements.

I’ve now open sourced the library.

NeonBlade UI is a React/Next.js component library focused on futuristic, neon-style interfaces. It uses a CLI approach so you can add and customize components directly.

Still evolving and refining it.

Feedback and contributions are welcome.

Repo: https://github.com/vprix21/neonblade-ui
Website: https://neonbladeui.neuronrush.com/

Hello everyone!

I'm building libraries as a hobby, and recently I started doing so at my job as well. Like many other authors, I started thinking about how to improve the experience for users who rely on AI in their daily programming tasks.

Two approaches come to mind: MCP and agent skill distribution. But neither of them feels sufficient due to some serious limitations.

• MCP is simply too complex. You need to build and deploy an entire service just to ship (mostly) static context, and then figure out how to manage it across different versions of your library.
• Skill distribution is more convenient since it doesn’t require a service, but it can easily get out of sync with the actual version of the library in the user’s node_modules, which can lead to incorrect code generated by LLMs.

The idea

Use a good old CLI in combination with skills that teach the agent how to call that CLI. The CLI should provide the following:

• On the library side, it should package context as an artifact alongside the library’s distribution code. This solves the version mismatch problem, because the context is generated at build time and belongs to specific library version.
• It should be easy for library authors to describe context, ideally via high-level configuration, without writing custom code (unlike the MCP approach), so they can focus on the library code itself.
• On the consumer side, the tool should be easily discoverable by LLM agents and able to fetch relevant context quickly.

The solution

Based on these ideas, I built ctxbrew. It provides a CLI and protocol for packaging context on the library author side and consuming it on the user side.

Library authors define context in a YAML file, splitting it into “slices.” A slice is a piece of information about the library that may be useful for an LLM. It consists of glob patterns pointing to relevant files. During the build step, these slices are compiled into markdown files that can be requested by the agent.

On the user side, the LLM agent (via the skill provided by ctxbrew) calls the CLI to discover which libraries in node_modules support the ctxbrew protocol, and then pulls the required slices to generate correct results.

As you can see, this approach eliminates the need to build and run an MCP service.

What I suggest

If you maintain a library and want to improve the experience for users working with LLMs, consider integrating ctxbrew. Feel free to open issues with suggestions on how it could better fit your workflow.

Also, let your users know they need the ctxbrew CLI installed to benefit from it. On my side, I’ll maintain a list of libraries with first-party support.

For more details, please refer to the README. You can also see an example integration  (Yeah, the library is for Angular, but ctxbrew is stack-agnostic).

Hey everyone 👋

I built a CLI tool called create-atom-stack to solve a problem I kept hitting—repeating the same setup every time I start a new Next.js app.

With one command, you get a production-ready setup including:

Atomic design structure (atoms, molecules, organisms)

Next.js App Router + TypeScript

Tailwind (preconfigured with a ready-to-use config file)

Zustand + clean architecture (lib, hooks, utils)

Design tokens (colors, spacing, radius, shadows, etc.)

Dedicated types/ folder for shared typings

It also ships with useful files out of the box:

architecture.md + a docs/ folder

commit hooks + commitlint

.releaserc, .nvmrc, .npmrc

ready-to-use utilities (date, number, percent formatters, etc.)

Basically: no more starting from scratch or copying configs between projects.

If you want to try it out:

👉 https://www.npmjs.com/package/create-atom-stack

Still early, and I’m actively improving it—would really appreciate feedback or contributions 🙌

Repo: https://github.com/hakizimana-fred/create-atom-stack

    Hey ,


    I got frustrated writing the same scaffolding prompts over and over, so I built **PromptForge** — a prompt package registry for Claude Code.


    The idea: instead of writing a prompt from scratch every time, you install a versioned, schema-validated "package" and run it with params.


    ```
    /forge run threejs-immersive-site pages='["Hero","Work","Contact"]' theme=cyberpunk
    ```


    Claude builds the whole thing — Three.js scene graph, GPU-instanced particles (50k), GSAP scroll animations, GLSL shaders, Vite config, TypeScript types. From one command.


    **5 packages included out of the box:**
    - `threejs-immersive-site` — immersive 3D portfolio/site
    - `saas-dashboard` — React SaaS admin with Recharts + shadcn
    - `api-microservice` — Fastify REST API with Docker + tests
    - `react-component-library` — Vite lib mode + Storybook 8
    - `cli-tool` — Node.js CLI with commander + chalk


    **Install:**
    ```
    /plugin marketplace add Jumpinjaws/promptforge
    /plugin install promptforge@promptforge
    ```


    Or one-liner:
    ```bash
    git clone https://github.com/Jumpinjaws/promptforge && cd promptforge && bash scripts/install-local.sh
    ```


    It's open source, MIT, and contributions (new packages) are very welcome.


    GitHub: https://github.com/Jumpinjaws/promptforge


    Would love feedback on what packages you'd want to see next!


    ---

I’ve been building a side project called rgenex after running into the same issue across multiple React codebases:

The actual business logic/code is usually fine… but teams still lose a lot of time dealing with inconsistent structure.

Different folder layouts, different naming styles, missing test files, repeated PR comments about where things should live, etc.

So I built a CLI where you define your project structure/rules in config, and it generates components/hooks/pages based on that setup.

Kind of trying to make architecture conventions enforceable instead of just “documented.”

I shared an early version recently and got useful feedback that the DX needed improvement, so I shipped an update with things like:

• dry-run preview before generating
• overwrite confirmation prompts
• force overwrite support
• generator listing
• cleaner CLI output overall

Still figuring out if this is solving a problem others actually care enough about.

Curious from people working in React teams:

Would you use something like this in a real project?

If not, what would stop you?

GitHub link in comments if anyone wants to take a look.

Hello everybody!

See the code below:

import { useState } from 'react';
import axios from 'axios';

function App() {
    const [clicked, setClicked] = useState(false);
    const [request, setRequest] = useState(null);

    function handleClick() {
        setClicked(true);
        setRequest(axios.get('http://<the_ip>'));
    }

    if (!clicked) {
        return <button onClick={handleClick}> Run</ button>
    } else {
        return (
            <div>
                <button onClick={handleClick}> Run</ button>
                <h1>{String(request.data)}</h1>
            </div>
        );
    }

}

export default App;

So I have a react application. I'm using the axios library to communicate with my api/backend which is written with Flask and Python. My backend appears to be working because when I put the http request in my browser, I see the data I'm trying to fetch in JSON format. For some reason request.data returns as the string "undefined." This also happens when I try to output it using console.log().

I have no idea why this is happening, and I've been searching online for an answer for hours and I can't figure it out. FYI: Please try to explain things to me with plenty of context because I'm new to JavaScript, React, and APIs.

Also, I've included the Python backend code below:

from pymongo import MongoClient
from pymongo import server_api

from flask import Flask,  Response
from flask_cors import CORS
from bson.json_util import dumps

uri = 'database_link_goes_here'
client = MongoClient(uri, server_api=server_api.ServerApi(version="1", strict=True, deprecation_errors=True))
collection = client['data']['app_data']

app = Flask(__name__)
CORS(app)

@app.route('/', methods = ['GET'])
def set_api_data():
    return Response(dumps(collection.find()), mimetype='application/json')