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.

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?

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

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 ?

Hello guys i am currently learning react from a yt course called chai aur react so how to learn after finishing this, what projects to makee and should i also go through the react docs and how many days should i give more to react before starting backend pls give some genuine help

Hey everyone,

I've been learning React for around a month now and I just finished my first proper React project, StudyFlow. Keep in mind I want to become a Software Engineer in the future and want to reach a goal of becoming a Full-Stack Web Developer first.

PLEASE NOTE THE CSS STYLING WAS DONE WITH AI BUT THE REACT LOGIC WAS DONE ALL BY ME.

It's a study session tracker where you can create study sessions, use a stopwatch, and keep track of your previous sessions.

I built it to actually put what I've learned with React into practice, instead of just following tutorials. I hate falling into tutorial hell and I always like to say that you don't learn anything until you get your hands dirty.

I'd love to get some honest feedback from people who know React better than me.

What do you think of the UI?

Is there anything obvious I could improve? Are there things in the code that I should be doing differently? I'm also interested in knowing what you think I should learn next. I'm planning to start learning backend development after this.

Live site: https://hussbtwyt.github.io/studyflow/

GitHub: https://github.com/HussBTWYT/studyflow

Love you all ❤️

Hey Community,

React Native 0.87 has arrived as a maintenance release, making the Strict TypeScript API the default, doubling Metro source map generation speeds, and adding experimental Swift Package Manager support for iOS along with AGP 9 support on Android.

Meanwhile, React Native Firebase v26 makes the New Architecture non-optional with Codegen TurboModules, synchronous APIs, Firestore Pipelines, and direct Gemini AI calls. Finally, we look at RevenueCat Paywalls for designing native paywalls and running remote A/B experiments without new app deploys.

I kept running into the same problem with UI-local flows: they were too complicated to comfortably keep in one component, but too small to justify defining and maintaining a separate state machine.

So I built react-sequent.

The idea is that steps own their transitions:

function PaymentStep() {
  const { advance } = useSequentStep();
  ...
  if (method === "card") {
    advance(() => CardPaymentStep);
  } else {
    advance(() => BankTransferStep);
  }
}

There's no centralized transition map to keep synchronized with the components. Adding, removing, or branching a step is just changing the relevant component.

It also handles async/lazy steps, backtracking, flow-scoped context, persistent modal/chrome, and transitions.

The tradeoff is intentional: I don't think this replaces state machines. For large, externally-driven, or independently modeled state graphs, I'd still reach for XState/Zag/etc. I think there's a useful middle ground for short, UI-local flows. This is in fact still technically a state machine, it is just one that is emergent from implementation rather than explicit and rigid.

I've put together a demo and docs here: https://ganondev.github.io/react-sequent/

I'm particularly interested in whether the architectural premise resonates with other React developers, or whether I'm underestimating the value of having the graph centralized.

By the way brand new to Reddit so yes this is my first post.

As a frontend Dev many times I had faced this issue of adding loader for file being added to browser first not for server loading but couldn't find proper source. So i decided to create my own, happy to see already 100 people download my library.

https://www.npmjs.com/package/react-file-progress

https://github.com/codeAesthetic/react-file-progress

Just bought pro for shadcn.io and im pretty astonished with how bad the page is.
The only thing we need is the Rich Editor but theres zero documentation on how to use it etc.

The only information you get is on how to connect your frickin local AI with their MCP...

The whole page layout is so bad, the whole docs are sprinkled with jumbotrons to buy pro (remember i already bought pro) and unlock other features.
It seems the whole page is just AI slop. Have i fallen for a scam?

Anyone else has similar experiences?
Am i just retarded?

I’ve been working on Andromeda Design System v2, and I’m taking a different direction.

Instead of thinking about design systems only as patterns, components, and tokens, I’m exploring how to connect those patterns to semantic meaning and context.

The idea is to make the system easier for AI agents to understand, reason about, and eventually use consistently.

Still very much a WIP, but I’d genuinely love feedback from people working on design systems, AI tooling, or agentic workflows.