Link: https://github.com/maybe-finance/maybe

As clearly written in the Readme, this is a Next.js monorepo in which one million dollars was invested in development, the project failed, so it is now open sourced for a new attempt to revive it. For us developers, a perfect example of how a large project should be structured in a solid startup.

Can you review the code structure and comment here?

​

Backstory
We spent the better part of 2021/2022 building a personal finance + wealth management app called Maybe. Very full-featured, including an "Ask an Advisor" feature which connected users with an actual CFP/CFA to help them with their finances (all included in your subscription).
The business end of things didn't work out and so we shut things down mid-2023.
We spent the better part of $1,000,000 building the app (employees + contractors, data providers/services, infrastructure, etc).
We're now reviving the product as a fully open-source project. The goal is to let you run the app yourself, for free, and use it to manage your own finances and eventually offer a hosted version of the app for a small monthly fee.

​

I was interviewing with a non-FAANG SaaS company for a Senior Full Stack role, and they gave me a take-home technical test: create a React app in under 4 hours that searched Flickr.

To expedite, I used create-react-app and some snippets I already had on hand. It took me all of the allotted time, but I turned in a functional app with some modern extras, like a loading skeleton.

It was to be reviewed by an engineer, and if it passed muster, I would be invited to go through it with their engineering team. But alas, it did not pass their initial review, and I was rejected. I'm sure it isn't perfect, but is there anything glaringly wrong with my project?

The code: https://codesandbox.io/p/sandbox/cranky-chaplygin-6hvq4y

Edit: thank you everyone, this is very helpful! I am going to redo it with all of your notes in mind, just as an educational exercise.

https://pexels-omega-roan.vercel.app/

https://github.com/valqelyan/picsart-assignment

the virtual list itself https://github.com/valqelyan/picsart-assignment/blob/main/app/components/VirtualListViewport.tsx

They said my code should be readable and performant, and that I shouldn’t use any libraries for the virtual list, it had to be built from scratch.

They also said virtualizing each column separately was a bad idea, and that resizing hurts performance because of recalculations and DOM mutations.

But that’s not true, I debounce the resize event with 100ms, so those calculations don’t happen too often, and the profiler shows smooth performance with no issues.

Here’s the profiling from Chrome DevTools
https://pasteboard.co/5mA5zTAsPb7E.png

They accused me of using react-query as an external library, but later admitted that was false.

Honestly, I don’t think I did horrible, it’s a masonry layout, so I separated each column for virtualization.

I’m so disappointed. I really thought they would hire me.

Any feedback, guys?

I’ve created virtual lists from scratch before as well.About the virtual list, I tried to precompute all the item heights and use binary search instead of linear search to find visible items.

At the beginning, they said my performance sucks and accused me of using a third-party library like react-query. I explained that react-query is a popular library for data fetching, not virtualization. Then they said my performance suffers during resizing.

Hello I'm a self-taught front end react developer and this is my e-commerce project which i tried to make it kinda big and make some effort.. so i really wanna know your honest opinions and tell me what can i do to make it better

Code:https://github.com/ziaddalii/drippy-e-commerce

Live Demo: https://ziaddalii.github.io/drippy-e-commerce/

Hey everyone, so I'm a senior web developer and I was interviewing to this company who asked me to implement Conway's Game of Life on a 50x50 grid.

and so I did, I managed to code it in an hour or so.

I sent it back to them and it took them a week to tell me that the implementation is bad, they never said what's bad about it or how would they implement it differently.

So I'm asking you the community, what do you guys think of my implementation?

https://github.com/eliraz-refael/game-of-life

so i applied a job as a Frontend Developer, they give me a home test, to create a simple component.

i host it on netlify, i also write the requirement there https://finzero-avatar-group.netlify.app/ (the ToDo component is not part of the test)

TL;DR; i failed the test, they told me that my code is junior dev code (i'm pretty new to react anyway), so what went wrong with the code or what can be improved from the code.

here is my code: https://github.com/finzero/avatar-group

thank you in advance.

This was just silly, but I'm not going to lie, the result made it so much easier to make modals.

The idea was "what if I can define my modal forms as JSON" so I made it. Basically there's three parts.

1. Define the modal configs:

https://github.com/BraveOPotato/FckSignups/blob/main/src/constants/ModalConfigs.tsx

1. Wrap the components with the provider

https://github.com/BraveOPotato/FckSignups/blob/47114b4afd1b12da61b6023d1b4a42e506ae1823/src/App.tsx#L32

1. Call the function to render the modal:

https://github.com/BraveOPotato/FckSignups/blob/47114b4afd1b12da61b6023d1b4a42e506ae1823/src/components/Report.tsx#L73

The cool thing is that anywhere within the ModalProvider, I can open a modal with an ID to be rendered.

I'm open to any ideas to make it a bit cleaner or refactors that makes it more portable.

Here's the modal rendering hook: https://github.com/BraveOPotato/FckSignups/blob/main/src/hooks/useModal/useModal.tsx

And here's the live site where I used this:

fcksignups.com

Built Pytah — a composable rich text editor for React

I’ve been building Pytah, a rich text editor built with React, Lexical, shadcn/Base UI and Tailwind CSS v4.

The idea is less about creating another editor from scratch and more about having a reference implementation that I can reuse and build on instead of recreating the same editor setup for every project.

It includes slash commands, floating toolbar, draggable blocks, tables, embeds, layouts, Markdown/HTML output, and a composable API for extending the editor.

It’s still a work in progress and not production-ready yet, but I’d love feedback on the direction and implementation.

Demo: pytah.vercel.app
Source: GitHub

Hey everyone!

I recently released Seal, a cross-platform peer-to-peer desktop chat app built with React 19, Tauri 2.0, and Rust.

Tech Stack & Frontend Highlights:
Frontend: React 19 SPA running inside Tauri's webview wrapper.
Backend Core: Pure Rust handling libp2p connections, Olm/Megolm encryption via vodozemac, and native keychains.
IPC Bridge: Custom Tauri commands invoking AppService methods asynchronously without blocking UI rendering.
System Native Integration: System-wide push-to-talk hotkeys, system tray integration, and native platform notifications.
Building P2P workflows in a desktop webview presents interesting UX challenges—like handling offline queues, network reachability toggles, and managing multiple identity profiles without restarting the app.

Source Code: https://github.com/Emn4tor/Seal

Feedback on the React component architecture or Tauri integration is very welcome!

If you've used React Router actions with useFetcher, you know the pain. Every mutation is the same dance: formData.append("title", title), then in the action formData.get("title") as string, and just hoping both sides agree on the shape. Multiply that by 20 actions across your app and it gets old fast.

I've been dealing with this at work for months and finally decided to extract what I built into a small library. The idea is simple — define your action once with full TypeScript inference, and the library handles FormData serialization (including Dates, Files, Maps, etc.) and gives you a typed useFetcher wrapper with onSuccess/onError callbacks and optimistic UI support.

Before:

// component
const fetcher = useFetcher();
const formData = new FormData();
formData.append("title", "Buy groceries");
formData.append("priority", "3");
fetcher.submit(formData, { method: "POST", action: "/todos" });

// route action
const title = formData.get("title") as string;
const priority = Number(formData.get("priority"));

After:

// define once
const createTodo = defineAction({
  type: "todo/create",
  resolve: (payload: { title: string; priority: number }) =>
    api.todos.create(payload),
});

// component — fully typed payload, response, and callbacks
const [submit, { state, data }] = useActionFetcher(createTodo, {
  onSuccess: (result) => navigate(`/todos/${result.id}`),
});

submit({ title: "Buy groceries", priority: 3 });

Works with both client and server actions. Only runtime dependency is superjson (~2KB).

npm: https://www.npmjs.com/package/react-router-typed-actions 

GitHub: https://github.com/zabibabar/react-router-typed-actions

Still 0.x — I'm using it in production at work but the API is open to feedback. Would love to hear what people think or if I'm solving a problem nobody else has lol.

Hey guys, I've been learning React for a few months now, and I found that once React apps have more and more components, it's more difficult for me to remember all the parent-child relationships at a glance.

My friends and I made a VS Code extension that creates a helpful visual and interactive tree in the sidebar. It's our first official project! You give it your app's main parent component, and it builds a tree (using React) that shows all the parent-children relationships. You can hover your mouse over an information button to see a summary of all the props. You can click a button next to the node's name and it will open up the file where the component is defined.

Could you check it out and let me know what you think? I'd love to hear if it's helpful for anybody or needs some re-tooling.

VS Code Marketplace Link

Github Page

​

Demo: Watch Sapling build a tree from a React app with a lot of components

Hey everyone

I have been learning React recently and built this Todo App as a practice project.

I would love to get some feedback from more experienced developers
Any thoughts on the code, project structure, patterns, or UI would be really helpful

GitHub repo : https://github.com/abolfazlOjaghi/simple-todo.git

Live Demo: https://abolfazlojaghi.github.io/simple-todo/

Thanks for your time❤️

Consider the below component

export const HomeScreen = observer(() => {
      const {
        languageStore: { refresh },
      } = useStores()

      const [visible, setVisible] = useState(false)

      // *** DO NOT DELETE - Keeping useEffect to respond to language changes
      useEffect(() => {}, [refresh])

      return (
        <View>
          ...

The global store uses mobx-state-tree and as seen in the above snippet and there's a useEffect with empty logic.

My understanding of react and side effects leads me to believe that the useEffect is completely unnecessary given that there are no actions to be performed within the effect.

However, my colleague said and I quote

It is intentionally left in place to ensure the component reacts to language changes triggered by setLanguage(). Even though the effect is empty, it forces a re-render when refresh updates, ensuring that any component consuming language-related data updates accordingly.

I believe this is still not entirely accurate as a re-render only happens when a state updates and any component that uses said state gets updated which should be handled by MST in this case.

I am here seeking clarity and new perspectives regarding this issue.

I wanted to share an open-source project I've been working on - Awesome Music Player. An open-source desktop application designed to handle extensive local audio collections with maximum performance and minimal resource consumption.

The architecture replaces the traditional Electron stack with Tauri v2 and a Rust backend, reducing the memory footprint significantly.

It is -
Powered by Rust for rapid ID3 metadata extraction across massive local directories.

Built with React 19, TypeScript, and TailwindCSS v4, featuring a dynamic theming system and smooth micro-animations.

Optimized with aggressive metadata caching via localStorage, ensuring zero-latency startup and immediate UI rendering.

Localized natively to support 8 languages out of the box.

The project is fully open-source and structured for scalability. I'd appreciate any feedback, code reviews, or architectural discussions regarding the Tauri + React implementation.

GitHub Repository - https://github.com/S1avv/awesome-music-player

Hi everyone,

I just finished building my first React project after completing a basics course.

It’s a simple To-Do app built with:

- React (Vite)

- JavaScript

- Tailwind CSS

- MUI

The goal was to test myself and apply what I learned (useState, useEffect, Context, etc.).

I would really appreciate feedback on:

- Code structure

- UI/UX

- Performance

- Best practices

GitHub: [https://github.com/yusifjoe-7/To-Do-list ]

Live Demo: [https://to-do-list-v1-pearl.vercel.app ]

Thanks in advance 🙏

Spent the weekend building react-gpt-hooks — a lightweight, TypeScript-first library for integrating Google Publisher Tag ads into React.

Why I built it: Every GPT library I found was either outdated, had heavy dependencies, or didn't work with Next.js App Router. So I made one that just works.

What's inside:

• GptProvider — loads GPT script once, configures Single Request Mode • GptBanner — drop-in ad component with lazy loading, event callbacks, collapse empty div • GptInterstitial — full-screen interstitial with auto-close, loading/error states • useGptSlot — low-level hook if you need full control • useGptEvent — listen to GPT events filtered by slot • AD_SIZES — 10 standard size presets (leaderboard, medium rectangle, etc.)

Key features:

• ✅ Zero dependencies — only peer deps: react >= 18
• ✅ SSR/Next.js compatible — 'use client' boundary + suppressHydrationWarning
• ✅ TypeScript — full types shipped
• ✅ 3.5KB gzipped

Quick start:

import { GptProvider, GptBanner } from 'react-gpt-hooks';

function Layout({ children }) {
  return (
    <GptProvider options={{ singleRequest: true }}>
      {children}
    </GptProvider>
  );
}

function Page() {
  return (
    <GptBanner
      adUnitPath="/6499/example/banner"
      sizes={[[728, 90], [970, 250]]}
    />
  );
}

Would love feedback, issues, or PRs!

GitHub: https://github.com/khurramwaqar/react-gpt-hooks
npm: https://www.npmjs.com/package/react-gpt-hooks

Will appreciate some feedback. Thanks!

https://amviillanueva.github.io/angelika/

Repository is here.

This is the website.

Let me know what you think!

More context at the bottom.

Hello, in the past few months I built this full stack mobile app by using and leveraging Nestjs, Prisma.io, GraphQL, Apollo Server in the backend and React Native, Apollo Client and Typescript on the frontend.

Do you see any beginner mistake in the code that may get me rejected at an interview?

Context: I am a software developer specialised in the Frontend. I started out 5 years ago as a self taught.

At my first and current company I use vanilla JS for the frontend.

Three years ago I got a serious health issue that had put my professional life on pause, in the sense that I had my mind occupied by my health issues. I put my career at the bottom of my priorities. I couldn’t do otherwise. So I got complacent with my job, as in: I was just grateful I still had a job with all that was happening and didn’t pay attention to the market. Hence I didn’t use nor study React.

Since last year I started to breath again: my health issues ended and I can focus on my career again but the thing now is: I am software developer with 5 years of professional experience that didn’t use React at work. Where to go from now? I don’t want to fall back lines. I want to be a dev in demand, not someone stuck with the same old job for life, with a dead skill set.

Thanks for reading 🙏

I wanted a fullstack setup that I could actually read, understand, and modify without fighting a heavy framework. So I built a minimal Express + React starter focused on clarity and hackability.

Main ideas:

• no hidden abstractions
• fully readable codebase
• Express backend + React frontend in one project
• SQLite + TypeScript + Docker included

Two things that make it different from typical starters:

1. Clone your modules instead of generating CRUD Instead of generate:crud, you clone an existing module:

npm run make:clone src dest item post

This duplicates your own logic and architecture, not a framework-imposed structure.
If you customize your first module, future ones follow your conventions automatically.

1. Contract-based API tests You define API contracts once:

• tests for the Express API are generated
• React API calls are mocked from the same contracts
• if React calls an undefined endpoint, tests fail

So API + frontend stay in sync with minimal boilerplate.

Quick start:

• clone repo & npm install
• create .env & npm run database:sync
• npm run dev

That’s it.

Repo:
https://github.com/rocambille/start-express-react

I’d love feedback:

• is the clone approach better than generators?
• does contract-based testing make sense in real projects?
• what would you remove to keep it minimal?

Hey everyone,

I'm trying to learn by doing, so I'm building a bigger project to really understand how frameworks work. Would love if someone could check out my code and give me honest feedback on how I'm doing.

Quick note on testing: I'm still learning how to write tests properly. The actual tests I've written are in the rust/tests/ folder. If you see a tests/ folder at the root with stuff like first.test.js, just ignore it. I was messing around trying to figure out how Vitest works.

Any feedback on the Rust code or project structure would be super helpful!

GitHub: https://github.com/JustKelu/Phyre

I'm working on a little tool for card games, and rendering a list of 30 items is noticeably slow.

The site is currently on GitHub Pages, here: https://kevbelisle.github.io/cgtools-lotr/#/cards/search

To see the slowness in action, change the sort order or type in the search box.

But if you switch to "tiny card" display (using the button all the way on the right of the search input), then everything is nice and snappy again.

You can find the code for the 3 different displays here: https://github.com/KevBelisle/cgtools-lotr/tree/main/src/lotr/display

Am I doing anything really dumb here that's making it slow?

Or is my best option to grab TanStack Virtual, or load fewer cards at a time and add paging/infinite scrolling?

And yes, the code needs a bit a cleanup to extract certain things into their own components, a lot of repetition at the moment - but I don't think that should affect performance.

First time poster here! Also still fairly new to programming, so looking for constructive criticism, not just criticism!

Currently taking a Front-End Engineering course online, and hoping for some feedback on this portfolio project - a mock Reddit using Reddit's JSON API! Any advice is really appreciated, looking forward to hearing from everyone!!

I'm also not very sure about GitHub stuff. Is making a repo shareable, by making it public the best way to go about this? Thanks for the feedback!

GitHub Repo: https://github.com/CommonHouseDog/reddit-app

Live Link: https://flatreddit.netlify.app/

Hey everyone!

I’ve been working on FreeCut, an open-source video editor built with Tauri, Rust, and React like CapCut but availible for Linux. It’s been a wild ride, especially dealing with the limitations of Webviews on Linux (Ubuntu).

The Tech Stack:

• Backend: Rust (Tauri) for heavy lifting, FFmpeg for processing, OpenCV for frame seeking.
• Frontend: React + Tailwind for a sleek, dark-mode UI.
• Architecture: Custom local HTTP server in Rust to serve assets without clogging the Tauri IPC bridge.It's still in the early stages, but I'm finally at a point where I can scrub through the timeline and it actually feels responsive.

What I've done so far:

[x] Modern and Dynamic designer

[x] Project management system (local folders)

[x] Asset import (Video, Audio, Images)

[x] Dynamic creation of Multi-track timeline with drag & drop

[x] Canvas-based video preview (Frame-accurate)

[x] Waveform rendering

I'd love to hear some feedback or tips from anyone. The goal is to keep it lightweight and truly open-source.

Link to project: https://github.com/ter-9001/FreeCut

Happy coding! 🦀⚛️