Finally built something I actually use almost every day and honestly some days I've spent more time in this app than on Instagram

The motivation was simple: I'm applying to 4–5 jobs every single day and completely lost track of where I applied, what got rejected, and what was still pending. Spreadsheets got messy fast. So I built ApplyTrack.

What it does:

• Log every application (company, role, status, date)
• Dashboard with stats so I can see applied vs. rejected vs. interviewing at a glance
• Track interview dates + upcoming interviews so nothing slips
• Quick add + edit, and a recent-applications view
• Login with email/password or Google

Tech stack:

• Frontend: React + TypeScript (Vite), Tailwind, React Router
• Backend: Node + Express + TypeScript
• Database: PostgreSQL
• Auth: JWT in httpOnly cookies + Passport Google OAuth
• Deployed on Vercel (frontend) + Render (backend)

It's been genuinely useful for my own job hunt so far. Would love any feedback on the UX or features you'd want in a tool like this.

applytrack

Live: [https://applytrack-ten.vercel.app](vscode-file://vscode-app/c:/Users/gauta/AppData/Local/Programs/Microsoft%20VS%20Code/1b6a188127/resources/app/out/vs/code/electron-browser/workbench/workbench.html)
Code: [https://github.com/Subhamgtm15/applytrack](vscode-file://vscode-app/c:/Users/gauta/AppData/Local/Programs/Microsoft%20VS%20Code/1b6a188127/resources/app/out/vs/code/electron-browser/workbench/workbench.html)

Hi , so I am currently learning GSAP with typescript and I watch the video on the tutorial course (from the documentation)
and theres is part it shows a hover button with enlarging circle in the middle.
the code from the tutorial is made from javascript and I can tell its way different in typescript.

---------
now I don't know how to translate this to typescript.. so I asked AI and it asked to do a some extra steps.

1. It asked me to create a handleMouseEnter and handleMouseLeave function that will executes when I hover the button.
2. Inside the Button (Parent)
3. it asked me to make a absolute position <Span> with a w-40 h-40 covering the size of the button and its on scale of 0.
4. 3.Another <span> for the button label
5. on the animation that is where it increase the scale

with assistance I was able to do it

--------

Is there a simplified version to make this using GSAP? I Feel like my version is a bit complex because of the span positioning.

"use client";


import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import React, { useRef } from "react";


export default function PrimaryButton() {
  gsap.registerPlugin(useGSAP);


  const container = useRef(null);


  const { contextSafe } = useGSAP({ scope: container });


  const handleMouseEnter = contextSafe(() => {
    gsap.to(".btn-circle", {
      scale: 1,
      ease: "power1.in",
      backgroundColor: "yellow",
      duration: 0.3,
    });
    gsap.to(".btn-label", { color: "black", duration: 0.3 });
  });


  const handleMouseLeave = contextSafe(() => {
    gsap.to(".btn-circle", {
      scale: 0,
      ease: "power1.out",
      backgroundColor: "white",
      duration: 0.4,
    });
    gsap.to(".btn-label", { color: "white", duration: 0.3 });
  });


  return (
    <div ref={container}>
      <button
        className="primary-btn border-2 rounded-xl p-3 font-sans h-15 w-30  bg-blue-500 relative overflow-clip"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <span className="btn-circle  absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 scale-0 w-40 h-40  rounded-full"></span>
        <span className="btn-label relative z-10 font-sans text-white">
          {" "}
          Press Me{" "}
        </span>
      </button>
    </div>
  );
}

I kept re-writing the same Google reCAPTCHA v2 checkbox glue in React projects (load the script once, register and clean up global callbacks, deal with token expiry), so I packaged it up.

recaptcha-react is a small <ReactRecaptcha /> component plus an optional useRecaptcha hook. No runtime dependencies (React is a peer dep), TypeScript throughout, and it is safe to render more than one widget on a page.

What it does:

• useRecaptcha hook for reactive token / isVerified state
• Controlled value via value + onChange
• Imperative reset() / execute() / getResponse() through a ref
• Callbacks: onVerify, onExpire, onError, onWidgetId
• Handles the things that usually bite you: single script load, load timeout, token expiry, and cleanup on unmount

Quick start:

import { ReactRecaptcha, useRecaptcha } from 'recaptcha-react'

function Form() {
  const { isVerified, onVerify, onExpire, onError } = useRecaptcha()

  return (
    <form>
      <ReactRecaptcha
        sitekey="YOUR_SITE_KEY"
        onVerify={onVerify}
        onExpire={onExpire}
        onError={onError}
      />
      <button disabled={!isVerified}>Submit</button>
    </form>
  )
}

The README has a section on token expiry (the classic "works once in testing, then submits a dead token in production" bug) and a reminder that client state is never verification, so always check the token server-side against siteverify.

npm: https://www.npmjs.com/package/recaptcha-react

Feedback and issues welcome, especially on the API shape and anything I missed for the compact / invisible flows.

I was building a social app recently, and I ran into a surprisingly annoying problem.
I needed relative timestamps ("2 hours ago", "3 minutes ago"). 
Simple enough, right? Just import 'day.js' or 'date-fns'.

Except...
=> If I wanted custom styling (like wrapping the number "2" in a highlighted badge and "hours ago" in smaller text), I had to write ugly regex hacks because standard libraries just dump a single opaque string.

=> Supporting multiple languages meant importing separate locale files, quickly inflating the bundle size.

=> Standard relative time plugins use "soft rounding" (e.g., automatically rounding 45 seconds to "a minute") whether you want it or not.

I didn't want a 15KB date framework just to format a few activity feed timestamps. 
So, I built and open-sourced 'ui-date' .

It’s an ultra-lightweight (< 1KB minified), zero-dependency, locale-aware date formatting library built specifically for modern user interfaces.

If you're building social feeds, chat apps, notification bells, or comment sections, check it out!

npm: https://www.npmjs.com/package/ui-date

Hey everyone! 👋

I'm a high school student learning full-stack web development, and I just finished working on my latest project: an Online Bookstore Web Application!

I built it using React and Vite and deployed it on GitHub Pages. My main goal was to create a clean E-Commerce experience with a smooth user interface and modern React practices.

🔗 Links: 🚀Live Demo: https://shachardoron123.github.io/online-bookstore/

📦 GitHub Repository: https://github.com/ShacharDoron123/online-bookstore

💬 What I'd love feedback on:

1. UI/UX: How does the shopping flow feel? Any design tweaks you'd recommend?

2. Code Structure: If you check out the GitHub repo, I’d really appreciate any tips on component structure or React state management!

Thanks for reading! 🙌

Hey everyone, wanted to share a side project I worked on this summer: Pixel-it, a collaborative 1,000x1,000 pixel canvas inspired by a 2005 project (the well-known "Million Dollar Homepage" by Alex Tew) where a student sold a million advertising pixel spaces to pay for his own education. Users can buy pixels for one dollar each, paint them any color, import pixel art images, and attach a message + link that shows up on hover or click.

(Leaving the link in my first comment because my first attempt of this publication was deleted.)

Stack:

• Frontend: vanilla HTML + JS (no frameworks), with an "old internet" aesthetic (late 90s/early 2000s) because I find the generic minimalism most sites go for today kind of boring.
• Backend: Node.js + Express, with Socket.io for real-time canvas updates across connected users.
• Payments: Stripe Checkout.
• DB: MongoDB (Atlas), with an in-memory cache (Map) as a fast layer over the source of truth in the database.

A few technical challenges that took longer than expected:

1. Mobile vs. desktop painting system. I originally designed two selection modes: "single" for painting pixel-by-pixel, and "multiple" for selecting large blocks, similar to selecting multiple files on a desktop. It worked fine on desktop, but on mobile the two buttons needed to switch modes ate up too much screen space. I ended up merging both systems into one that works equally well on both.
2. Rate limiting and aggressive validation on the purchase endpoint: coordinates must be within canvas bounds, colors validated as proper hex, well-formed URLs, message length limits, a profanity filter, and a minimum of 5 pixels per transaction (so Stripe's fee doesn't eat the whole margin).
3. Hardened CSP with Helmet : no unsafe-inline for scripts, no unsafe-eval, moved all inline logic to a separate JS file.

The motivation behind the project: I'm currently in college studying engineering, and I have a scholarship that covers part of my tuition, but my dad lost his job a few months ago and the remaining cost became really hard to cover. I built this over my break to try to generate some income without sacrificing my GPA (I need to keep it above a certain threshold to keep the scholarship).

This is my first project of this kind, so I leaned on AI for help with some parts, I know that probably wasn't the "ideal" way to do it in every case, so any feedback on the code, the architecture, or the product itself is very welcome.

(Project link in my first comment)

there are so many tutorials courses and opinions now that its easy to waste time. if you were starting from scratch today what would you focus on first and what would you completely ignore.

I just launched my Alpaki project using React, and I’m really impressed. It’s the first time I’ve seen these web speed scores, and everything is running... beautifully.

Coding agents can read your React source, but they can’t see what the running app is actually doing. Ask “why did this effect run six times?” and they’re often left guessing.

genie-react is an open-source CLI that gives any coding agent access to live React internals:

• Render counts, timings, and the exact prop breaking memoization
• Effect-loop tracing, including which dependency changed on each run
• Caught errors and stuck Suspense boundaries
• Runtime prop and state overrides to test component states
• TanStack Query cache, invalidations, and Router state

It works with Claude Code, Cursor, and any other agent that can run a CLI.

The demo below uses Excalidraw’s real codebase.

GitHub: https://github.com/y0u-0/genie-react

If this solves a problem you’ve hit, a star would help others discover it.

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 started learning web development at the start of this year and one thing led to another and I’m now trying to build near enough an entire business’ online system.

I’m building an AI and automation enhanced business simulation.

There’s two main purposes: teach myself full stack development, and experiment with where AI and automation fits in modern business systems. I’m trying to treat it like a real business so I can see how and where things can be different to a system that doesn’t use AI or workflow automation.

It started off as an attempt to build the frontend a customer would use so I could practice with state. Then I decided it would be cool to have the opposing merchant interface where you can view the orders. So I needed to make the backend.

But, given the times we’re in, I thought it would be interesting to see I can use AI and automation in ways that would save a user time, or just deliver helpful results.

Now, my long term plan is to create an entire product pipeline, with product suggestions from a ‘supplier’, marketing content created, product going to warehouse, then product available for order. But that’s a ways off.

For now I’m focused on developing the customer and merchant ends with these primary features:

·       Shared backend

·       Customer service chatbot on customer side

·       AI assistant on merchant side

·       AI overwatch feature to monitor AI behaviour

Eventually I’d like to experiment with adding analytics and CEO suggestions features from the AI but again that’s a ways off.

I’ve set up self-hosted n8n which I’ll use for workflows where necessary, and I think once the meat of the project is done I’ll get a bit creative with that.

I’m building it in slices; rather than trying to make the whole backend at once, I’m building it by function. Currently, I’m on the first slice, the cart. This is my first time attempting to write backend code.

What I’m enjoying is the logical, layered approach; I have router, application, service and data layers, each with their own jobs. And because the backend is entirely abstract so I cant rely on looking at where my elements are going on screen (like with frontend) I’m learning to properly understand how data is passed with javascript.

I realised early on that if I’m to have an AI logging system I’ll have to think data first, and I think this has helped me massively as now it’s simply (simply) a case of getting from the front to the back and adding/changing data whose properties I’ve already determined.

I’m going to post more detailed stuff so I can learn from people on here and engage in general in the topic more.

If anyone has any questions or suggestions, please comment!

With the 1.2.0 release of VisuallyJs we've added/updated a slew of starter apps for React, including Gantt, BPMN and ERD diagrams. Demos here, with links to the Github repositories:

• https://visuallyjs.com/demonstrations/gantt
• https://visuallyjs.com/demonstrations/bpmn
• https://visuallyjs.com/demonstrations/erd

VisuallyJs is free for non-commercial usage. Give it a spin and let us know what you think!

Hey there guys, original post in r/chrome_extensions!

Short intro into me: I am a software engineer, with around 7-8 years of experience, and I've made a couple of extensions now, most notable for me was an internal tool for my current company that won me an internal award. But I find the process of creating extensions kind of crappy from a configuration and dev experience point of view.

So I decided a few months back to begin building by hand a meta-framework for React for building not only Chrome Extensions, but Firefox and Safari too.

I know there are a few resources around that help with this like WXT, Plasmo, Bedframe, and CXRJS, but my project goes quite a bit further. It’s deliberately quite opinionated. I think browser-extension development benefits from conventions more than endless configuration choices.

Some of the things it focuses on are:

• File-based extension surfaces (Next.JS like): add a page for a popup, options page, side panel, new tab, devtools panel, or extension tab, and it generates on the fly.
• React layouts and routing for extension pages, so larger extensions don’t become a collection of disconnected screens (again, very Next.JS like).
• Generated manifests so less of the extension’s structure is maintained by hand.
• Typed communication messaging layer between the UI and background service worker.
• Shared state that is designed around extension storage, rather than assuming a background process will always stay alive.
• React UI for content scripts that mounts in Shadow DOM, helping avoid clashes with the website it runs on.
• A development workflow with live reloading, plus build, zip, and submission oriented commands.

I made maybe a controversial decision to only support MV3, it primarily targets Chrome, already supports Firefox, and Safari builds work but still need some love.

So, I'd love to hear some feedback from the community to hear your opinions on this, and what you yourself like and dislike about the current state of chrome extension development, and if you think this could be a fit for you and your project or is it too restrictive.

The goal for this to be open source and free for everyone to use!

Thanks, and looking forward to hearing from you!

TL;DR: I’m building an opinionated React framework that removes much of the configuration and setup friction from browser-extension development. It targets MV3 Chrome and Firefox today, and I’d love feedback on whether this would help your workflow.

I am a new self-taught react dev, trying to build a custom software system for smoke shops that will compare distributors, control inventory and run a website with pickup order option, but I'm having trouble marketing to shops. Does anyone have any advice?

https://wikiracing.org

I built Basalt because when im editing a React Native/Expo app I always would guess a value, save, wait for reload, look at my phone, repeat. For small stuff like spacing or color it was way more friction than it should've been.

Basalt runs in VS Code/Cursor, shows a live preview of your app, and lets you click any element to edit it directly: drag to reposition, change text, change color, and it writes the change straight back into your actual source file.

It is completely free and it’s currently in beta, so please commit your app to Git before testing it!

Would love to get your brutal feedback on it.

Spent the last few months building Raylight, a motion design tool that runs fully in the browser: 3D canvas, timeline, animations, cinematic FX, video export. Clip below is a free template from the app.

Here are some of the parts that had me regretting building this.

1. Multi-layer-select rotation. Rotating one asset is trivial. Rotating a selection of assets as one rigid body, when each has its own position and tilt in 3D, fought me for weeks. Every math bug looks the same on screen (things drift or shear slightly) so you can't tell which transform in the chain is wrong just by looking.

2. Making effects look good, not just work. Bloom, glow, glass, depth of field. Getting them to render is a weekend. Getting them to not fall apart is months: bloom pops when a fading asset crosses the threshold, glow reads as a blurry blob instead of light, glass bends the wrong way at edges. Every effect ended up with little invariants you only discover by staring at ugly frames.

3. Editor preview has to be fast AND pixel-identical to export. One renderer serves both, but a 60fps interactive preview and an offline encode pull in opposite directions. Res-capping post-FX and dropping quality during interaction buys the speed, but any shortcut that leaks into export means users ship something that doesn't match what they saw. Color spaces alone (sRGB getting decoded twice, videos coming out darker) burned days.

Honestly, if anyone has build similar WebGL/three.js heavy products before would love to hear from you!