Forem: sudarshan161219

I built a real-time retainer tracker using React and Node.js

sudarshan161219 — Sun, 18 Jan 2026 16:36:59 +0000

Hi everyone.

I recently built a tool called Retain to solve a specific problem: efficiently tracking freelance hours without spreadsheets or constant email updates.

The Concept Retain is a client portal that keeps budget tracking transparent. The goal was to remove friction for both the developer and the client.

Key Features

Real-Time Sync: Utilizing Socket.io, budget bars update instantly on the client’s screen whenever hours are logged on the admin side.
Magic Links: Clients receive a secure, cryptographic link to view their dashboard. No account creation or login is required.
Tech Stack: React, Node.js, Express, Prisma, and PostgreSQL.

How it works

I set a total budget (e.g., 20 hours).
I log time as I work.
The client checks their permanent link to see exactly how much time remains.

I am currently refining the architecture and would appreciate any feedback on the concept or the stack.

link:https://retain-frontend-gamma.vercel.app

Thanks for reading.

Built a lightweight client sign-off tool sharing the tech stack and design decisions (beta)

sudarshan161219 — Mon, 05 Jan 2026 20:11:19 +0000

I’ve been working on a small side project to experiment with secure file sharing and approval workflows, and wanted to share the technical approach and get feedback from other developers.
So I built a small client sign-off / approval tool.

Core features

File upload (images, PDFs)
Public approval links (no authentication)
Explicit approval / change-request state
Simple audit trail of actions

Technical overview

Frontend: React + TypeScript
Backend: Node.js (Express)
Database: PostgreSQL (via Prisma)
Storage: Object storage with pre-signed URLs (no file proxying through the server)
Auth model: Token-based public links instead of user accounts

Design decisions

No sign-up / no user auth: approval links are scoped via unique tokens to reduce friction
Pre-signed uploads: keeps the backend stateless and avoids large file handling
Minimal domain model: Project → File → Approval log
Explicit states: PENDING / APPROVED / CHANGES_REQUESTED

Current status

Beta
Focused on correctness, simplicity, and clean APIs

I’d love feedback on:

Architecture choices
Security implications of public token links
What you’d improve or redesign at this stage

here is the link: https://signoff-one.vercel.app/

Building a Serverless Invoice Generator with React, Zustand, and Tailwind

sudarshan161219 — Sat, 27 Dec 2025 20:07:25 +0000

I just shipped a new portfolio project: a Free Invoice & Document Generator that runs entirely in the browser.

I wanted to challenge myself to build a complex form-handling application without relying on a backend database. The goal was to create something useful for freelancers that respects user privacy by design.

🚀 The Project

The app allows users to generate professional Invoices, Quotes, and Receipts instantly. Because it uses Local Storage, users can close the tab and come back later without losing their work, but no data is ever sent to a server.

🔗 Live Demo: Invo

🛠️ The Stack

Framework: React (Vite) for speed.
State: Zustand (for handling complex nested form data).
Styling: Tailwind CSS (specifically utilizing @media print to ensure pixel-perfect A4 outputs).
Icons: Lucide React.

🔮 Future Roadmap

While the app is functional now, I have a few features on the roadmap:

Cloud Backup: Integrating Supabase/Firebase for users who want to sync across devices.
PDF Export: Improving the native download functionality.
Authentication: Optional login for saving client lists permanently.

🙏 Request for Feedback

I built this to demonstrate my skills for freelance clients on Upwork.

How is the UX? Is the form flow intuitive?
Are there any "must-have" features for invoicing that I missed?
Any code organization tips for large Zustand stores?

I appreciate any feedback or code reviews!

Thanks for reading. Happy coding!

Modal closing on refresh (React + Zustand + sessionStorage)

sudarshan161219 — Sat, 01 Nov 2025 20:36:40 +0000

I wanted my modal state to survive page reloads, so I persisted it in sessionStorage:

{ "isOpen": true, "activeModal": "addFile", "mode": "addFile" }

Problem:
When navigating to a different route, the modal should auto-close ✅
But on refresh, React remounts → effect runs → modal closes ❌

Final clean fix

import { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import { useModalStore } from "@/store/useModalStore";

export const useAutoCloseModalOnRouteChange = () => {
  const { pathname } = useLocation();
  const prevPath = useRef(pathname);

  useEffect(() => {
    const store = useModalStore.getState();

    // ✅ Only close if the route *actually* changed
    if (prevPath.current !== pathname && store.isOpen) {
      store.closeModal();
    }

    prevPath.current = pathname;
  }, [pathname]);
};

✅ Closes modal only on real navigation
✅ Modal stays open on page refresh
✅ Works with Zustand + sessionStorage
✅ No infinite loops
✅ No permissions required browsers allow sessionStorage by default

✅ Short feedback

This approach is clean because:

You don’t add closeModal to dependencies (avoids re-renders)

No infinite loops (not watching isOpen)

Fully independent from the UI can be dropped into any route-based modal

Nice little pattern for URL-synced modals 👌

Building My Invoice App – Added File Attachments Today

sudarshan161219 — Fri, 31 Oct 2025 06:19:57 +0000

I’m still working on my invoice tool for freelancers and small businesses, and today I added a new feature: file attachments for each client or invoice.

What I wanted

Let users attach receipts, PDFs, images, contracts, etc.
Allow multiple uploads
Show real-time progress
Rename files before/after uploading
Store files in the cloud (not just locally)
Keep everything tied to a specific client

Formats I decided to support

<input
  type="file"
  className="hidden"
  onChange={handleChange}
  multiple
  disabled={uploadedFiles.length + uploadQueue.length >= MAX_FILES}
  accept="
    .jpg,.jpeg,.png,.webp,
    .pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.odt,
    .zip,.rar,.7z,.tar,.gz,
    .mp3,.wav,.mp4,.mov,
    .psd,.ai,.svg,.fig"
 />

Tools I used

React + TypeScript
Cloudflare R2 for storage(free upto 10gb)
Presigned URLs for direct uploads
Prisma to link attachments to clients
Modals + toasts for UI

I’m sharing this because I’m trying to build this project piece by piece, learning as I go.
If you have ideas, better approaches, or feature suggestions, I’d love to hear them.

Is it still worth building an invoice generator SaaS in 2025?

sudarshan161219 — Tue, 28 Oct 2025 05:44:33 +0000

Hi friends

I’m a solo developer currently about 75% done building an invoice generator SaaS for freelancers and small business owners.

It started as a simple tool for myself something minimal, privacy-focused, and quick to use. But as I kept building, I realized… there are tons of invoice tools already out there 😅

Now I’m wondering is it still worth finishing and launching it?

Here’s what my version focuses on so far:

Minimal and fast UI
Simple subscription-based pricing (no complex tiers)
Privacy-first (no tracking, no data selling)
Freelancer-focused workflow — quick client and invoice creation, no bloat

I’m not trying to reinvent the wheel just make invoicing cleaner and lighter for solo creators and small businesses.

But I’d love to get your perspective:

Would you still use a new invoice generator today?

What would make one stand out for you in 2025?

If you’ve built a SaaS before how did you validate it before launch?

Any feedback or advice from fellow builders would mean a lot 🙏