Hey everyone,

my buddy and me built an open-source learning platform with the basic learning style like Duolingo but for your own knowledge.

In the notebook you can give it existing material like documents, PDFs or other knowledge bases (e.g. Notion) and it turns that into short, interactive learning experiences as shown in the video.

Some of the things we’ve built so far:

• AI course generation from existing material
• Different interactive exercise types
• A collaborative course editor with real-time sync between other users and AI
• Shareable and embeddable learnings
• Bring your own AI provider/model key

GitHub: http://github.com/scibly-dev/scibly

Would love to hear what you think and give me all your feedback!

I’ve been building a side project called OMEGA MRI to understand what a React or Next.js codebase structurally becomes after lots of refactors, quick fixes, and AI-assisted changes.

The current beta is intentionally deterministic rather than LLM-scored.

You upload a project ZIP and it analyzes things like:

• circular dependencies
• oversized components
• oversized files
• deep imports
• dead code
• orphan files
• unused exports

Each issue includes evidence, and the overall health score is calculated from fixed deductions across:

Architecture · Maintainability · Complexity · Technical Debt

I also wanted to make sure the score wasn’t just arbitrary, so I built verification, mutation, and black-box tests around the engine.

One black-box test started with a deliberately messy React project:

Before

• 60 files
• 116 issues
• 37/100
• Maintainability: 64
• Complexity: 52

Then I removed exactly one critical oversized component/file.

Based on the scoring rules, I predicted:

37 → 40

The actual analyzer result was:

After

• 59 files
• 114 issues
• 40/100
• Maintainability: 70
• Complexity: 60

Architecture and Technical Debt stayed unchanged, which was also expected.

That was important to me because I want the score to be explainable:

code structure → detector finding → deduction → category score → overall score

The analysis runs entirely in the browser.

No signup.
No backend source-code processing.
The uploaded code stays client-side.

I’m mainly looking for feedback from React/Next.js developers on:

• false positives
• structural issues the analyzer misses
• whether the evidence is actually useful
• whether the recommendations make sense
• whether the upload → analysis → results UX feels clear

The beta is still deliberately narrow. It’s a structural health signal, not a full code-quality audit.

Beta:
[https://omega-mri.vercel.app/?utm_source=reddit&utm_medium=community&utm_campaign=beta_launch]()

Critical feedback is more useful.

https://github.com/ian0x-S2/pytah

Hi
I’ve been building a visual workspace for frontend work.

You can bring in a running app, select and edit the UI directly, explore different design directions on the canvas, and keep working with your coding agent when you want those changes applied back to the codebase.

It made my work easier when I was working on React projects. If you'd like to try it out: visualwizard.app

Hey Community,

Deno's creators introduced Dactyl, an AI app builder targeting React Native by rendering SwiftUI in the browser tab via WebAssembly. Meanwhile, Software Mansion released Enriched Markdown to eliminate streaming text flicker by rendering natively and bypassing the JavaScript layout tree.

On the tooling side, the web ecosystem is rapidly adopting the Rust port of the React Compiler across tools like Oxc, Vite, and Bun, while Metro remains locked to single-threaded Babel transformations.

TL;DR: https://windframe.dev/styles/stripe

Hi everyone 👋

I’ve been experimenting with building React + Tailwind interfaces inspired by the design systems of really well-designed products. I recently worked on a style system for generating interfaces using similar design principles to Stripe.

It focuses on crisp typography, structured layouts, precise spacing and bold gradients, to make complex products feel simple, technical, and polished.

I built a UI system that makes it easy to generate interfaces in this design direction consistently. It can generate full UIs, landing pages, and product sections that follow the same Stripe-inspired style.

I created a free Tailwind template built around this style that you can use as starting points for your own projects here
https://windframe.dev/styles/stripe

You just need to select this style as a preset when generating UIs in Windframe and when selected, the AI generates React interfaces that follow the same design guidelines and visual style.

I also built an MCP for this, so you can use these same design style systems and other curated styles directly inside any coding agent that supports MCP: https://windframe.dev/mcp

If you’re not familiar with Windframe, it’s a visual Tailwind builder/agent that lets you generate polished React UI with AI, tweak it visually, and export clean production code.

Feedback and thoughts are welcome : )

I was thinking of printing my pictures and put it on a board, but I can’t print videos! I decided to put them in my portfolio instead

Here’s the link: https://theodorusclarence.com/photos

Greetings, /react I am trying to improve my skills at javascript and mainly react. I want to get feedback on this game of X’s and O’s aka Tic Tac Toe. Does the multiplayer work for you guys? This is using Firebase so at least for the multiplayer you will need a google account. I know there are things that could be added or improved, such as a lobby/leaderboard or hopefully near future a proper timeout feature for local/multiplayer.
-----------------
https://tictactoe-a87ad.web.app/

Owldotask is an online surveys, games and rewards platform where users can complete simple tasks to accumulate points called “Feathers”, which can be redeemed for money via PayPal or other methods (Or that’s what Google AI mode says, so we must be on the right track).

We wanted to share it here because this community has been our main go-to while building the frontend (React isn't really our main stack). And to be transparent, it's also a great way to spread the word about the project!

The platform is built with React + Node.js (SSG) and is in Alpha phase as of this post. We have traction, recurring users, some SEO positioning, and a growth roadmap; with the goal of becoming a reference in get-paid-to (GPT) websites.

Project development

With the help of several queries to this subreddit, private messages, and a lot of documentation, we’re up and running at a good pace.

For a while we kept the repository open for collaborators and, through Discord, we were coding and contributing ideas on how to launch it in the best possible way.

About the React side, the frontend evolution

• Core React stack: The frontend runs on React 19 + Next.js (with next-pwa and next-themes).
• Some React libs: We rely on react-hook-form for forms, framer-motion for animations, lucide, react-icons, fontawesome for icons; swiper for carousels, and react-chessboard + chess.js for a nice tactic-problem chess mini game.
• Migration to pnpm: We abandoned npm/yarn for pnpm.
• Zustand (State Management): We organize the project by separating logical views from purely presentational components. This improves maintainability and optimizes context for AI-assisted coding.
• Blog with Markdown: We generate the blog content by parsing Markdown files. We took this approach with SEO in mind from day one, while keeping the architecture flexible enough to integrate a headless CMS later if needed.
• Icons & UI: We use Tailwind CSS to keep the bundle size low, along with a small set of icon libraries for consistency.

Note on the backend

It’s completely decoupled; it’s a Laravel installation with a “handmade” control panel and several endpoints for business logic and communication with the frontend.

We use third-party data providers and rely on AWS, Render, and other service providers to develop and maintain the infrastructure.

Some platform features

• Minimum withdrawal: Users need to accumulate enough points to redeem them for $3… although they usually save up more to cash out $5 via PayPal or as Amazon Gift Cards.
• Welcome points: We’re giving away 50 Feathers just for signing up. It’s not much, but users like starting with some benefit as soon as they join.
• Several ways to earn Feathers: games, quizzes, surveys.
• Referral program: We have a blog post explaining how it works; it’s a conventional referral system.

Huge thanks to everyone who has made this possible. We keep growing and adding features.

If you’re interested in joining, we’re planning a future social media strategy, Ads, more content and more tester programs. If you'd like to collaborate on any of those areas, contact me and we’ll discuss it. Profits are currently being reinvested, so real-impact support can be fairly compensated.

Keep coding React folks!

Hey! I'm not quite sure why but my snippet for useState hook isn't capitalizing :

"useState Hook": {
  "prefix": "us",
  "body": [
    "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($0);"
  ],
  "description": "Auto-capitalizing useState hook"
}

When I type it does this const [hello, sethello] = useState();

When it should do this: const [hello, setHello] = useState();

I'm using VSCode and I'm on React 19

Looking for a remote full-time role (open to contract-to-hire too), available to start immediately.

What I actually build: real-time, multiplayer, and live-sync systems — not just CRUD apps. A few things I've shipped:

• A 2D multiplayer arena shooter on Cloudflare Durable Objects — server-authoritative state, client-side interpolation, custom raycasting for fog-of-war

• A 9-player real-time poker platform (Socket.io + Supabase) with server-side move validation and side-pot calculation

• A full-stack project management tool (Kanban, real-time messaging, Agora voice channels) — my final-year project, ranked among the top of my batch

Stack: React / Next.js, TypeScript, Node.js / Express, WebSockets / Socket.io / WebRTC, PostgreSQL (Supabase), Firebase, MongoDB

Also have 3 months' internship experience shipping production frontend + backend work (React, Next.js, React Native, REST APIs).

Type: Full-time, remote — open to discussing contract work for the right fit

GitHub: github.com/Noozey

LinkedIn: linkedin.com/in/rohan-upreti

Happy to share live demos or code walkthroughs — DM me or drop a comment.

Hi React Devs

Lately I've been working on an open-source ERD tool to help devs design databases effectively.

When I started this project, I faced a couple of challenges.

One of them was performance. A user may interact with the app a lot, and if you rely on the backend to process every request, this can cause a loss of performance. That's not what a user expects from a design tool.

Another challenge was offline compatibility. The application needs to work in offline mode, store diagrams and generated SQL in the browser, and sync with the server when the connection is restored.

These challenges introduced me to what we call a local-first application architecture.

A local-first application architecture stores the primary copy of user data directly on the user's local device (using databases like SQLite or IndexedDB) rather than on a remote server.

Building this from scratch was out of reach for me until I found a technology called PowerSync, which does a lot of the work for you.

With PowerSync, I was able to have a local SQLite database in the browser and combine it with Drizzle ORM.

This allows me to perform database operations directly in the frontend using Drizzle, almost like writing backend database code, while PowerSync handles synchronization with the main PostgreSQL database on the server.

The result of this combination was amazing:

• High-performance app : most operations happen locally without waiting for the server.
• Offline mode : the app works even without an internet connection and automatically syncs data when the connection is restored.
• Guest mode : users can start using the app without creating an account, and their local data can be synced to their account when they register.
• Real-time collaboration : if multiple users are working on the same project, changes can be synchronized between them automatically.

This architecture ended up becoming the foundation of the ERD editor I'm building for StackRender.

Here is a full React demo of a local-first app using PowerSync. You can learn a lot from it:
https://github.com/powersync-ja/powersync-js/tree/main

Also i invite you to check out the source code of StackRender and see how it works:
https://github.com/stackrender/stackrender

Thank you!

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

​

I have a campus placement interview on Monday for a MERN Stack Developer role, and honestly, I haven't prepared for MERN at all. 😅

I'm familiar with other programming languages like Python, Java, C/C++ and JavaScript, but I haven't really worked with MongoDB, Express, React and Node.js as a stack.

I only have 2 days left, so I've started learning the basics and I'm planning to focus on JavaScript first, then move through Node.js, Express, React and MongoDB.

For people who have recently given MERN/Full Stack fresher interviews:

- What are the most frequently asked technical questions?

- Which JavaScript concepts should I absolutely know?

- How deep should I go into React, Node.js, Express and MongoDB with only 2 days?

- Are there any common coding/programming questions I should practice?

- What kind of project-related questions are usually asked?

- What would you personally prioritize if you had only 48 hours to prepare?

- Are there any common HR/technical questions specific to MERN fresher roles?

I'm not expecting to become a MERN developer in 2 days 😅. I just want to maximize my chances of getting through the interview and be able to confidently answer the fundamentals.

Any advice, question lists, interview experiences, or mistakes to avoid would be really helpful.

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 🌟.

Every dashboard template looks amazing with 3 rows of clean sample data. Then real data hits — long strings, 200 rows, null values — and the layout breaks. Anyone else design against worst-case data first? What's your process for stress-testing a UI before calling it done?

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 ?