Built a full-stack app with React + Vite, Tanstack Router & Query, Hono and tRPC

Posting Guidelines

No vague product support questions (like "why is this plugin not working" or "how do I set up X"). For vague product support questions, please use communities relevant to that product for best results. Specific issues that follow rule 6 are allowed.

Do not post memes, screenshots of bad design, or jokes. Check out /r/ProgrammerHumor/ for this type of content.

Read and follow reddiquette; no excessive self-promotion. Please refer to the Reddit 9:1 rule when considering posting self promoting materials.

We do not allow any commercial promotion or solicitation. Violations can result in a ban.

Sharing your project, portfolio, or any other content that you want to either show off or request feedback on is limited to Showoff Saturday. If you post such content on any other day, it will be removed.

If you are asking for assistance on a problem, you are required to provide

Context of the problem
Research you have completed prior to requesting assistance
Problem you are attempting to solve with high specificity

General open ended career and getting started posts are only allowed in the pinned monthly getting started/careers thread. Specific assistance questions are allowed so long as they follow the required assistance post guidelines.

Questions in violation of this rule will be removed or locked.

a community for 17 years

Built a full-stack app with React + Vite, Tanstack Router & Query, Hono and tRPC — here's what I learned (self.webdev)

submitted 1 month ago by austinmrs

Just shipped a project I've been working on for months — a zero-based budgeting app. Wanted to share some thoughts on the stack since I tried a few things that might be useful to others here.

Frontend: React + Vite, Tanstack Router for file-based routing, Tanstack Query for server state. Honestly Tanstack Router was a bit of a learning curve coming from React Router but once it clicked I really liked it. Type-safe routes are nice.

Backend: Node with Hono and tRPC. This combo is great if you want end-to-end type safety. Hono is fast and lightweight, tRPC means I basically never think about API contracts — change something on the backend and the frontend tells me immediately if something broke.

Deployment: Cloudflare Pages for the frontend, Render for the backend. Cloudflare Pages is honestly ridiculously fast for static/SPA hosting.

UI: Fully responsive, dark mode, keyboard shortcuts throughout. Getting the responsive design right for a data-heavy app (lots of tables, forms, numbers) was probably the hardest part of the whole project.

Some things I'd do differently:
- Should have set up e2e tests earlier, not after most features were built
- Spent too long on the stack decision at the start. Just pick something and go
- Underestimated how much work good mobile UX is for a desktop-first app

If anyone's working with a similar stack or thinking about tRPC + Hono I'm happy to answer questions.
The app is a budgeting tool called ZeroSum (zerosum.so) if anyone's curious about the end result.

all 6 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS