r/react

▲ 27 r/react+2 crossposts

Tailwind MCP that gives coding agents actual design taste

TL;DR: https://windframe.dev/mcp

Hi everyone 👋

I’ve been working on a Tailwind-native MCP that gives coding agents better design context when generating  interfaces.

A lot of AI-generated UI still feels inconsistent because the agent has no real sense of design systems, spacing, typography, or visual structure. It can write Tailwind, but it often lacks the taste and context needed to make the result feel properly designed.

So I built the Windframe MCP around that idea.

It gives coding agents access to curated Tailwind-native styles, design tokens, and styleguides inspired by products like Linear, Notion, and other companies that invest heavily in their design systems.

The difference in output quality has been really impressive. The generated interfaces feel polished and visually cohesive, not like a random collection of Tailwind components.

I’ll keep adding new design styles to the MCP as well, so the library will continue to grow over time.

Give it a try here https://windframe.dev/mcp

Would love any thoughts or feedback :)

u/Speedware01 — 17 hours ago
▲ 2 r/react

Built a React hook that syncs phone vibration to audio/video

useHaptics - hook it up to any <audio> or <video> on Android Chrome. Bass drop hits, phone hits with it - louder moments buzz harder, quiet ones buzz softer

u/Aditya00128 — 16 hours ago
▲ 47 r/react+2 crossposts

Hey!

I made an app that makes it incredibly easy to create stunning mockups and screenshots—perfect for showing off your app, website, product designs, or social media posts.

✨ Features

  • URL -> Website Screenshot
  • Video Support & Animations
  • 30+ Mockup Devices & Browser Frames
  • Auto Backgrounds
  • Annotation Tool:
  • Chrome Extension

Try it out: https://postspark.app/templates

Would love to hear what you think!

u/world1dan — 1 day ago
▲ 48 r/react

What Makes ReactJS So Popular in Frontend Development?

I’ve been exploring React recently, and I keep noticing how widely it’s used in frontend development. From startups to large companies, ReactJS seems to be everywhere.

I understand that features like reusable components, faster UI updates, and a strong community make it useful, but I’d like to know from real developers what actually makes React stand out in daily development work. Is it mainly because of performance, flexibility, job opportunities, or the overall developer experience?

Also, for those who have worked with other frontend technologies, what made you stick with ReactJS? I’d love to hear practical experiences, learning tips, and honest opinions from developers who use it regularly.

reddit.com
u/ModernWebMentor — 1 day ago
▲ 3 r/react

Looking for full stack devs who can build this for me - influencer portal

Wondering if anyone here also happens to have influencer marketing experience to build a ‘self serve” style influencer marketing platform.

Basically we currently do influencer marketing by outreaching influences after we find them on TikTok is the tedious process which involves multiple staff members at multiple stages.

Though there are solutions online that offered this little service where we can upload what videos we want and influences can submit their videos before getting paid by us, but we actually need a more custom solution.

I’ve Set a budget of AU$15,000 for this project. It’s not a complicated project, as a matter of fact you can vibe code something like. It’s a simple one-sided platform where influences come and select the videos that we want them to make, then make those videos and then we pay them automatically once every week.

Dm me if you can do this for me. Past experience with tiktok influencer marketing is essential.

reddit.com
u/helpmepls626 — 1 day ago
▲ 26 r/react+4 crossposts

Create Beautiful Animated Device Mockups in Seconds

Hi! I’m the dev behind PostSpark, a tool for creating beautiful image and video mockups of your apps and websites.

I recently launched a new feature: Mockup Animations.

You can now select from 25+ devices, add keyframes on a simple timeline, and export a polished video showcasing your product. It’s built to be a fast, easy alternative to complex motion design tools.

Try it out here: https://postspark.app

I’d love to hear your feedback!

u/world1dan — 1 day ago
▲ 14 r/react+1 crossposts

Frontend Developer Interview Preparation — Need Advice

Hey there, I hope the react family is doing good, after struggling for 2 years, finally HR arranged intrdocutory call tomorrow, please experienced developers do help me out, how can I pass that introductory session at least.

Thank You.

reddit.com
u/Careless-Formal-4026 — 2 days ago
▲ 7 r/react+2 crossposts

Design systems feel more important than ever in the AI coding era

AI-generated UI is becoming very easy to spot. Not because it’s “bad”, but because most outputs tend to converge toward the same patterns - similar layouts, repeated component structures, generic styling, weak accessibility handling, and very little connection to actual brand personality.

It made me realize that design systems are becoming even more important in the AI era, not less.

AI can generate components quickly, but scalable token architecture, interaction consistency, accessibility, responsive behavior, and cohesive UX still require strong foundations and systems thinking.

That idea pushed me to build Versa UI - a true multi-theme UI system focused on flexibility, scalability, and production-grade component architecture rather than just static component collections.

Some things I focused on: • theme-flexible token architecture • accessibility and responsiveness • scalable component patterns • multiple visual personalities without rebuilding components • clean React + Figma workflows

Would genuinely love feedback from people building design systems or React component libraries.

Website: https://versaui.com Preview video: https://youtu.be/nuKAhqtXmnk

github.com
u/kushjain94 — 4 days ago
▲ 17 r/react+4 crossposts

IP Linux: I built a browser-based desktop environment with React, Vite and local-first apps

I built a browser-based desktop environment with React, Vite and local-first apps

I have been working on a project called IP Linux: a browser-based desktop environment that runs as a static web app.

Live site: https://ip-os-linux.vercel.app/
GitHub: https://github.com/ikerperez12/IP-OS-LINUX

It is not a real Linux distribution, and it does not run native binaries. The idea is different: I wanted to explore how far a polished desktop-like experience can go inside a normal browser tab.

The result is a small web OS-style environment with:

  • A splash / entry screen
  • A desktop with icons, folders and widgets
  • A top panel with system controls
  • A dock and app launcher
  • Resizable and draggable windows
  • Virtual workspaces
  • Snap assist
  • A global search / Spotlight-style command palette
  • Local-first apps
  • Reactive wallpapers
  • Glass UI and visual effects
  • A public GitHub repo and Vercel deployment

Why I built it

Most web demos are landing pages, dashboards or small single-purpose apps. I wanted to build something that feels more like an environment.

I was interested in questions like:

  • Can a web app feel physical and desktop-like?
  • How should windows behave inside a browser viewport?
  • How do you organize many small apps without making the UI messy?
  • How far can local-first storage go before a backend is actually needed?
  • How do you publish a visual project publicly without exposing secrets or overcomplicating the stack?

IP Linux became a way to test all of that in one project.

What is inside

The app includes a catalog of built-in apps and tools: Files, Terminal, Browser, Settings, App Store, Music Player, Matrix Rain, games, developer tools, productivity apps and visual utilities.

The apps are loaded lazily, so the initial shell does not need to download every app upfront. The virtual file system and user preferences are stored locally in the visitor's browser with IndexedDB/localStorage. There is no backend, no account system and no required environment variables for the public release.

What I focused on

The main focus was the shell experience:

  • Window resizing and dragging
  • Dock behavior
  • Desktop icon grid
  • App launcher workflow
  • Keyboard shortcuts that do not interfere with inputs or the terminal
  • Responsive behavior for compact viewports
  • Wallpaper rendering that respects reduced motion and tab visibility
  • Public-safe security posture
  • A README that presents the project like a real product

There were also a few important constraints. For example, a full YouTube page cannot be embedded in an iframe because YouTube blocks that for security reasons. So IP Linux includes a YouTube Lite / embed-aware fallback instead of pretending that every website can load inside the internal browser.

Stack

The project is built with:

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Radix UI primitives
  • Lucide / React Icons
  • DOMPurify
  • IndexedDB via idb-keyval
  • Vercel static hosting
  • Vercel Web Analytics

The repo also includes a public release setup:

  • README with screenshots and GIF
  • MIT license
  • SECURITY.md
  • Vercel config
  • Security headers
  • Robots and sitemap
  • Manifest
  • GitHub Actions CI for audit, lint and build

What I learned

The biggest lesson was that a desktop UI is mostly about small interaction details.

A window that opens slightly too small feels broken.
A dock icon that scales inside a clipped container feels wrong.
Desktop icons that can overlap make the whole shell feel unfinished.
Keyboard shortcuts that steal Tab from the terminal are frustrating immediately.

Fixing those details made the project feel much more real than adding another decorative effect.

I also learned that public release work matters. A project can look good locally but still feel unfinished if the repo has a generic README, no security notes, no screenshots, no CI and no clear deploy story.

Feedback welcome

I am sharing it because I think browser-based desktop interfaces are a fun area for frontend experimentation.

I would especially appreciate feedback on:

  • Window management
  • Desktop organization
  • Accessibility
  • Performance
  • App ideas
  • Whether the repo presentation is useful for other developers

Live: https://ip-os-linux.vercel.app/
Code: https://github.com/ikerperez12/IP-OS-LINUX

u/Time-Willingness-360 — 4 days ago
▲ 13 r/react+10 crossposts

A real-world Turborepo + oRPC + Astro project I’d love architecture feedback on

Built an open-source Arabic poetry platform containing ~945k verses from 932 poets across 10 historical eras.

The project includes: static Astro frontend, API on Cloudflare Workers, shared oRPC contracts, OpenAPI generation, Turborepo monorepo, PostgreSQL dumps + HuggingFace dataset.

One of my goals was making this a clean real-world example of: Turbo monorepos, contract-driven APIs, static-first architecture, shared typed contracts across apps/packages.

I’d genuinely appreciate feedback on: architecture decisions, package boundaries, API design, over-engineering, scalability concerns, anything that looks fragile or awkward long-term.

Repo:  https://github.com/alwalxed/qafiyah

u/w333l — 4 days ago
▲ 10 r/react

Thinking about moving to Angular

Hey everyone. I’ve been learning React for about half a year (State management, Next.js, etc.) and I’m now adding .NET for the backend. I’m being pressured to switch to Angular because apparently, that’s the "standard" pairing for C# devs

Is there any truth to this anymore? and if so how much time do you think it would talk me to make the switch (I am pretty comfortable with state management, react query, caching srr, ssg, tailwind css, design patterns)

reddit.com
u/Enough-Swordfish-260 — 5 days ago
▲ 33 r/react+1 crossposts

No more spotify, I only listen to my own player

Hello everyone, we've just released the 1.5 version of our small music player.

What's the motivation behind this? We are tired of the streaming paradigm, always renting, never owning, and we're tired of the lack of innovative design or unusual designs to say the least.

Everything is either too cold, black and white, two-toned squared designs (it works, but this is all there is now!) or the classic vibe-coded UI with neon colors.

So we chose to do exactly what every sane person would do: take months to build our own music player :).

We want to bring back the cool effects of the early 2000s, the "we did it because we could" mentality. Our goal is not to be a better Apple Music, Spotify, Deezer, or even a foobar2000, but to be a simplified local music player that simply works, offers a new design in the form of a widget, and doesn't phone home, doesn't ping the internet, doesn't lock you out with a subscription, account, or email.

You take the app and you can keep it forever, inciting the "own your medias point of view" (starting by owning the software that plays your medias).

I said that it was a "just work" type of app, but it has more than simply play/pause features:

Core Music Player Features

  • Load music from an entire folder or specific directory
  • Enable on-click and drag-and-drop loading capabilities
  • Display metadata automatically (artist name, album name, artwork, track ID, bitrate, etc.)
  • Display full metadata on a dedicated screen
  • Include an equalizer with customizable presets
  • Adjust left / right balance.
  • Offer a mini player mode (hidden or locked)
  • Display a small bar visualizer

Playback Controls

  • Play and pause music playback
  • Manage volume levels
  • Seek through tracks using a timeline
  • Enable shuffle and repeat settings
  • Handle media session control via keyboard/media keys or AirPods

File Support

  • Support various audio file formats: MP3, AAC, M4A, ALAC, AIFF, FLAC, WAV, OGG, Opus

User Interface

  • Utilize a skeuomorphism UI design
  • Detect the user's theme and adjust the screen theme accordingly
  • Allow manual selection of a custom screen theme

Additional Features

  • Enable filtering by artist name, album name, or song title
  • Handle drag functionality for the app itself
  • Include click sound effects (that you can disable)

If you want to see more here is our github page to download the app (MacOS, Windows10/11, Linux (debian/fedora))

And if you want to be updated on it here is our subreddit r/ResonanceApp :)

u/0xMnlith — 4 days ago
▲ 140 r/react+4 crossposts

be honest developers, which icon library are you using in your projects?

u/TrT_nine — 7 days ago
▲ 0 r/react

I built a react based Groq-powered Resume Analyzer that:

​

- summarizes resume strengths

- highlights weak areas

- gives ATS score

- suggests suitable job roles

Features:

- no signup required

- resumes are not stored

- instant analysis

Students just upload your resume and see how you score.

Website: zeroapi.in

#PythonProgramming #groqai #machinelearning #AgenticAI

u/pyofpython — 5 days ago
▲ 1 r/react+3 crossposts

Open Source Contribution: UI component library

Hey everyone

I have built a small component library with mostly AI like cursor, codex and claude. If anyone would like to brainstorm ideas or contribute to the project can find the details below

Hosted link - https://zentauri-ui.vercel.app

GitHub - https://github.com/ShubhamTiwari909/zentauri-ui

npm - https://www.npmjs.com/package/@zentauri-ui/zentauri-components

Tech stack -

React + Next JS + Typescript + Tailwind + Framer Motion + Rechart (It's a monorepo where the library is inside the packages and the previous site is inside apps, helps in maintain both package and preview site under a single repo)

Contacts

Email - shubhmtiwri00@gmail.com

Linkedin - https://www.linkedin.com/in/shubham-tiwari-b7544b193

reddit.com
u/Much_Confection_2668 — 5 days ago
▲ 24 r/react

Been working on a desktop app called “Locally” because I got tired of juggling 5 different tools just to manage local projects.

Been working on a desktop app called “Locally” because I got tired of juggling 5 different tools just to manage local projects.

Current workflow for me usually looks like:

* multiple terminals open
* checking outdated npm packages manually
* docker containers in another window
* file explorer somewhere
* IDE tabs everywhere
* forgetting which project is even running

So I started building a lightweight native app (Rust + Tauri) that acts like a local development workspace.

Right now it can:

* manage local projects in one dashboard
* track outdated dependencies across projects
* handle package management from a UI
* quickly open/switch projects
* support React / Angular / Next / Vue projects

Planned stuff:
Docker integration, Git tools, env management, workspace sessions, monorepo support, etc.

I’m trying to validate whether this is actually useful outside my own workflow.

So I’m curious:

* what’s the most annoying part of managing local dev environments for you?
* do you already use tools for this?
* would you use a standalone desktop app for it?

Would genuinely appreciate honest feedback, even if the answer is “I’d never use this.”

u/Rare-Income7475 — 5 days ago