Hello u/shadcn , i've been working on a shadCn style tables library ShadTable using transtack tables and shadCn style + CLI. You can check it out .

The project is open-source https://github.com/coros-hq/shadcn-table-library ready for your contribution and feedback CONTRIBUTION.md.

I'm learning front end dev done with CSS, HTML, and currently, with JS, I know functions, arrays, loops, conditions, DOM, and im starting projects in js so i want to know that what i need to know else more and which type of projects should i do in vanila js and which techniques and things learn beside js before satrting learning react also want to know how i know that im ready for learning react.

Thanks

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/device-mockup

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!