As a frontend engineer, building a design system from scratch is mostly a thing of the past. UI libraries and AI tools get you 80% of the way there instantly.

But for that last 20% when you need to scale, inject your own taste, and hit product-specific requirements, understanding the underlying architecture is what saves you. It also makes your AI workflow way better, because you aren't constantly prompting it to fix token issues or regenerate styles for minor changes.

Here are 4 important rules for keeping design systems scalable and clean:

1. Decouple values: Components read semantic roles (“--color-accent”), not raw values, so rebrands don't require UI file edits.
   
2. Derive scales: Avoid hand-picking hover or dark states. Use “oklch” to derive your entire palette from a few seeds.
   
3. Boundaries: UI components (Buttons/Inputs) wrap tokens in typed variant APIs. Feature blocks (Cards/Navbars) compose them to prevent duplication.
   
4. CSS over React state: Theme switching becomes a simple root selector swap, avoiding React context re-renders.

I recently published a new technical blog post covering those important points. Alongside it, I built Design System Studio - a visual tool to tune tokens in ⁠oklch⁠ and export them directly to Tailwind or shadcn/ui.

Check it out with the attached link in this post.

[ Removed by Reddit on account of violating the content policy. ]

I know React moves fast and someone will tell me to learn by reviewing the docs and that's cool, but I've been having much better results reading books when I'm trying to learn something new.

That being said, I'm having trouble finding a good book to learn React and frontend in general. I would deeply appreciate recommendations.

VIDEO IN COMMENTS 👇🏻

TLDR I made something very cool for my self and I am making it free and also want your opinions because I like the idea of having made something that is useful to others

This is a theme editing app but ok what is the goal here? I know there are apps that do this but none of the good ones are 100 percent free. So the first goal was matching all the features for free. Also even in the paid ones using them doesn’t feel as good as it could in my opinion and major quality of life features are missing.

I also wanted this to be very fun to use. I have adhd and I turbo procrastinate micro adjustments so I needed a theme editor app that felt satisfying to use. There also needed to be the feeling of satisfaction after finishing editing a theme.

Final goal was to make other fun features other apps just don’t do but I really wished they did. As little friction as possible to get a normal theme that doesn’t look like slop then spending a little bit of time micro adjusting the details.

What I actually built up to this point:

I had a very smart idea of yanking the most popular vscode themes and turning them into app themes along with faithful recreations of popular website themes + my custom apple inspired themes. Important! Something the other apps don’t do and I had to do my self manually and wasting tons of time was generating complementary and contrasting colors. I mean I don’t want the app to either be black and white or everything is green and I also don’t want to spend 2 hours selecting random colors.

Other smart idea but work in progress is something that mounts it self inside your app like expo go dev menu and lets you edit the theme that way (didn’t implement yet I want feedback if this is a waste of time or actually sounds cool). I have made the components to pull this off for other things so I may do it anyways because I think this looks cool.

Made the tinder style swipe cards a beautiful theme overview typography themes a metric ton of beautifully crafted previews (everything the web apps do)

My main goal was to get this working on my phone for me because I love micro adjusting these things all the time. I managed to make an interface for making and editing themes as good as all the web apps but with a tiny screen instead. I added nice transitions to make adjusting css variables as fun as possible (hard task 😭)

Ok also there’s a bunch of features I was missing from the already existing ones. I wanted to be able to pick a primary color and have complementary colors etc auto generated and I wanted modes for this. Should the bg be completely white as well as cards? Gray bg white cards? Everything tinted? Page tinted blue primary colors yellow or something? I added auto generators to handle these things.

Another thing I was missing was being able to create one theme and have it auto convert to everything else. I mean I wanna be able to create a shadcn theme and have it able to be exported as a hero ui theme a material ui theme all of them. I made an adapter that handles this automatically.

I wanted this to feel cute and I want to be able to feel like I have created something and not just played with a gloried text file for 30 minutes. I added a collections tag with folders and a handsaw’s signature for each user and a poster generated from each theme.

This has helped me so much personally I want your feedback on this. Sadly there is nothing you can download yet but you can follow the updates on my twitter it’s on my Reddit bio.

Important if you want to “steal” this idea and put something similar in your app I actually encourage this. I am building a copy paste library with all of these components called PitsiUI. I will also experiment with allowing end users to use this to create custom themes for them selves.

Btw this is also coming to iPad mac and web. Android should work too since it’s cross platform but I don’t want to commit to that yet until I have actual users. It may sound silly but making sure no elements overlap the App Store screenshots etc take time.

i’ve been building Routeveil, an open-source transition layer for react router.

the main problem I wanted to solve was coordinating:

- the current route exit

- navigation

- the incoming route render

- the enter animation

- cleanup and interaction restoration

without putting animation state inside every page component.

the basic structure is:

<RouteveilProvider>

<Header />

<RouteveilView>

<Routes />

</RouteveilView>

<Footer />

</RouteveilProvider>

Navigation then selects an effect:

<RouteveilLink

to="/docs"

transition="slide"

transitionOptions={{ direction: 'left' }}

>

Documentation

</RouteveilLink>

page transitions animate RouteveilView, while overlay transitions render through a body portal and cover the complete viewport

the library currently has 20 built-ins, typed transition specific options, programmatic navigation, reduced motion handling, and a playback hook for previewing effects without navigation

demo:

https://routeveil.dev

source:

https://github.com/milkevich/routeveil

I’m interested in feedback on the lifecycle and public API, also is there anything here that would make you hesitate to use it in an actual react router project?

I built Routeveil because route transitions in React Router usually end up scattered across page components or tied to one specific animation setup.

Routeveil keeps the animation logic around the router instead. Each navigation can choose its own effect, while persistent UI like headers and footers stays mounted.

rn it includes:

- 8 page transitions

- 12 full-screen overlay transitions

- typed transition-specific options

- declarative and programmatic navigation

- same-page transition previews

- cursor-aware origins

- reduced-motion support

- custom transition definitions

Example:

import { RouteveilLink } from 'routeveil/react-router'

<RouteveilLink

to="/projects"

transition="tunnel"

transitionOptions={{

origin: 'cursor',

color: '#000000',

}}

>

Projects

</RouteveilLink>

Live demo:

https://routeveil.dev

Source code:

https://github.com/milkevich/routeveil

I’d especially appreciate feedback on the API and whether the transition options feel intuitive.

I'm learning web development, and compared to a beginner, I already have solid knowledge of HTML, CSS, and JavaScript (DOM manipulation, api, crud, fetch I've got those down). Now I'm trying to learn React, but somehow it's just not sticking. What practices have worked well for others? I've got the basics of useState, useEffect more or less, but props somehow don't stick with me or even if I read some documentation or example, I can then do the same thing afterward, but as soon as it gets even a little more complex, I start to feel unsure. Thanks for the answers.

Hey r/reactjs,

I built LLMRender: a Markdown renderer for React, under 10KB with zero dependencies, vs 300KB+ for the usual react-markdown + katex + highlighting stack.

Handles GFM (tables, task lists, callouts), LaTeX math as native MathML, syntax highlighting for 30+ languages, and is streaming-safe. Safe by default too: no dangerouslySetInnerHTML, raw HTML off unless you opt in:

import Markdown from "llmrender";
const App = ({ text }) => <Markdown>{text}</Markdown>;

Feedback welcome, especially from anyone building chat/LLM UIs! I built it after using very heavy alternatives in multiple projects and getting tired of it.

Besides hooks, what types of questions have you been asked when it comes to front end interview questions?

I feel like mid level can be a weird position to be and I imagine a mix of entry level questions and maybe one or two senior level questions?

Any resources to read up on would be great too !

https://www.sharyap.com/

In that website portfolio, they have buttons that when you click them, a new "window" appears, anyone know how they were able to do it?

I wrote react-country-state-fields, a React package for cascading country, state, and city fields, and I just updated it. Most packages in this space (react-country-state-city and similar) give you the dropdowns and the data, but the user still has to select everything by hand. This component also auto-detects the visitor's location from their IP address and pre-fills the fields, so most users confirm rather than type.

I made auto-fill opt-in and kept the fields fully editable.

• Auto-detect + auto-fill from IP location (opt-in, via a free VisitorAPI project, no API key needed)
• Full data coverage: 250 countries, 5,299 states, 153,765 cities
• A CityField alongside Country and State
• Style props to match your own design system: sx, className, variant, fullWidth, size, showFlag/renderFlag
• A proper loading/error state exposed via context, so an in-flight autofill can't clobber what a user is actively typing
• Also ships a /headless entry point with hooks if you're not using Material UI

Repo: https://github.com/visitorapi/react-country-state-fields

Happy to answer questions or take feedback on the design.

Hey Community,

We explore Grok Build, the new terminal-based TUI coding agent from x.ai. We also look at Appless, an experiment from the creators of OpenUI that bypasses chat bubbles to stream live native UI components using openui-lang.

Finally, we dive into Maestro MCP, a new tool context protocol server that lets AI agents automatically build and run YAML test flows from plain English instructions.

If the Rewind made you nod, smile, or think "oh… that's actually cool" — a share or reply genuinely helps ❤️

I created react-video-cutter: This is a handy react component for marking segments of mp4 videos to be cut. The resulting json file can be used by a backend for actual cutting. It is open source and completely free. Enjoy.

Every time a client app needed PDFs (invoices, receipts, reports) I ended up either fighting Puppeteer/HTML-to-PDF (pagination breaks, tables split across pages, ~100MB Chromium that is rough on Vercel) or hand-writing u/react-pdf and fiddling with spacing for hours.

I built a tool to scratch this: a drag-and-drop canvas of react-pdf components with a live PDF preview, and crucially it exports clean typed TSX you own and drop into your repo (no vendor runtime, data stays in your app). There is an optional hosted render API too but the export is the point.

Sharing it because this community is exactly who hits this problem. Free to build and export. I would love feedback on whether the exported code is actually code you would ship, and on any layout that is awkward to build. Made by me.

I'm designing a web application where the frontend framework choice has sparked a debate, and I want to get your thoughts on this specific security angle.

To give some context:

• Backend: Spring Boot (all critical validation and business logic will obviously happen here).
• SEO: Completely unnecessary (it's a private/internal or dashboard-style app).

My team is considering using Next.js (SSR) primarily to hide certain sensitive business logic and domain rules.

Here is my core concern and the dilemma: Even if all critical security checks happen on the Spring server, we have complex UI-side business logic and state orchestration that we do not want users (or competitors) to inspect. With modern AI tools, reverse-engineering, de-obfuscating, and analyzing front-end JavaScript bundles has become frighteningly easy. If we use a pure CSR approach (like React SPA), anyone can easily crack open the bundle and understand our proprietary workflows or validation rules.

By moving this rendering and logic to Next.js server-side, we prevent that code from ever reaching the client bundle.

My questions are:

1. Is protecting proprietary front-end logic/workflows from AI reverse-engineering a valid or sufficient reason to adopt Next.js (SSR) when SEO doesn't matter and the backend is Spring?
2. Or is this "security through obscurity," and if the logic is truly sensitive, does it strictly belong in the Spring backend regardless of where the UI is rendered?

Would love to hear how you weigh the overhead of Next.js against the risk of exposed client-side code. Thanks!

React 19 pushing us back to native HTML forms is great for performance, but it completely breaks the developer experience for typed RPCs.

If your backend (like tRPC) is protected by a Zod schema expecting User { email: string, age: number, tags: string[] }, throwing raw FormData at it is an instant 500 error.

I built a zero-dependency (peer-deps only) utility that intercepts the FormData from useActionState, deeply parses it into a standard JSON object, and maps any Zod validation errors back to the UI state seamlessly.

Instead of writing custom FormData parsers for every component, you just wrap the procedure: withActionState(trpcServer.myProcedure)

I specifically spent time making sure it handles bracket notation for arrays (tags[]) and dot notation for nested objects (user.address.street) so you can just use standard HTML input names.

I'm a solo maintainer and I just published the first stable version. Would really appreciate it if some of the React veterans here could take a look at the TypeScript generics I used for inferring the Zod errors and let me know if there's a cleaner way to do it!

Repo:https://github.com/maxx-abrt/trpc-action-state-adapter

NPM:https://www.npmjs.com/package/trpc-action-state-adapter

I built OrbitX as a practice project to learn React + APIs.

What it does:

- Fetches live BTC/ETH/SOL data from CoinGecko

- Portfolio tracker with profit/loss calc

- TradingView-style charts with Recharts

- Dark/Light toggle + fully responsive

- Deployed on Vercel

Stack: React, Next.js, Tailwind, Recharts, CoinGecko API

Live Demo: OrbitX | AI-Powered Crypto Intelligence Dashboard

Would love feedback specifically on:

1. How to handle CoinGecko rate limits better

2. Is my useEffect cleanup correct for the polling?

3. Performance tips for rendering 100+ coins

The code is free to use. What features should I add next?

Hey everyone,

I built Modern Tour to solve the pain points I've had with existing React product tour libraries—specifically around overriding CSS, handling async elements, and overall Developer Experience.

You can check out how it looks and feels here:

👉 Live Demo: https://tour.modern-ui.org/

• Buttery-Smooth Animations: Powered by framer-motion spring physics under the hood.
• Smart Auto-Positioning: The tooltip dynamically recalculates bounds and automatically flips to avoid viewport edges.
• Lazy Loading Support: Uses MutationObserver to seamlessly catch asynchronously rendered elements (no manual re-triggers needed).
• Headless Override: Render your own 100% custom React component inside the tooltip while keeping all the smart positioning logic intact.
• Zero-CSS Theming: Powered entirely by CSS variables. Creating a custom theme or Dark Mode takes seconds without fighting !important tags.
• Cross-Page Tours: Seamlessly continues the onboarding tour across route changes.

I'd love for you to play around with the demo! If you find it useful or like the concept, I would really appreciate a ⭐️ on GitHub (you can find the repo link on the demo site).

Let me know what you think or if you have any feedback!

Hello, I have the opportunity to enroll in either of these two premium courses, so I would really like to learn everyone's opinions on them. Joy of React offers a 30-day refund policy, so I'm inclined towards it, but I would love to hear if anyone has taken these courses recently.

TLDR: If you correctly break your state into UI state (useState, useReducer), Server State (Tanstack Query, RTK Query), URL state (nuqs), and Global State that does not change (Context), you are left with a small slice of state that might be needed in multiple places and changes often.

Should we use a State Management library for that part? We explore how each library works, then build our own Zustand implementation to see if we do.

Obviously, it depends. If the app is mostly always changing state, like Figma, Spreadsheets, etc., we might take advantage of a State Library because they handle all sorts of use cases and edge cases.

But for everyday use and 90% of our apps, we can probably build it ourselves, either using pub/sub like Redux or Zustand, atom-based like Jotai, or Proxy-based like MobX or Valtio

Can we normalize just building a standard React SPA with Vite again without feeling guilty that we aren't using Next.js?

The App Router and React Server Components are incredibly powerful, but the amount of gaslighting in the frontend ecosystem right now is insane. Not every internal dashboard, simple CRUD app, or personal portfolio needs server side rendering, edge functions, and a complex caching layer that requires a PhD to invalidate.

Sometimes you just want to spin up Vite, fetch some data on the client, and deploy a static bundle to a CDN for practically zero dollars. It feels like we are completely over engineering 90% of our web apps just to chase the newest Vercel paradigm.

I built a tool for managing spec document sites and want to use the React RFC process as an example: https://react.dossie.rs/ (another, wildly more active, example is Rust's RFC process)

Alas, you need to scroll quite a bit to find the latest published React RFCs. It looks like the last real discussions and merges on RFC documents happened in 2022—everything after that is mainly suggestions for new hooks by external contributors.

Is the process officially deprecated?

Hi everyone,

I'm building a Water Sort Puzzle game using React and TypeScript.

I have a critical rendering bug during the pouring animation.

Problem:

When water is poured into the destination bottle, the entire bottle temporarily becomes one solid color. The existing lower color layers disappear visually until the animation ends.

Expected behavior:

Only the top receiving layer should increase smoothly while all lower layers remain visible throughout the animation, just like the original Water Sort Puzzle game.

The puzzle logic is correct. The issue appears to be related to the animation/rendering state (Bottle.tsx/App.tsx).

I can share:

• Full GitHub repository

• ZIP project

• Relevant source files

Any help would be greatly appreciated.

Thank you!