Repository files navigation

_{Hosted byrender.com for free}

_{As it is a free tier, this Demo will spin down with inactivity, which can delay requests by 50 seconds or more. Be patient!}

Technology	Description	Stars
Drizzle	A TypeScript-first ORM for Node.js
Fastify	Fast, unopinionated, minimalist web framework for Node.js
Postgres	The world's most advanced open source database
React 19	A JavaScript library for building user interfaces
Tailwind v4	A utility-first CSS framework for rapid UI development
tRPC	End-to-end typesafe APIs made easy

Technology	Description	Stars
Better Auth	Authentication library for Node.js
Phosphor Icons	Beautifully simple & consistent icons
npm Workspace	Workspaces for managing multiple packages in a single repository
Playwright	Test your web apps headlessly with a single API
React Router v7	Declarative routing for React
TypeScript	TypeScript is a typed superset of JavaScript
Vite	Next generation frontend tooling. It's fast!
Zod	TypeScript-first schema validation with static type inference
Zustand	Bear necessities for state management in React

• Games from fanapis.com Example of pulling data from externals REST API
• Health Check for the server (http://localhost:2022/health.trpc) and (http://localhost:2022)
• Search with Debounce Using a Custom Hook
• Chat with Server-Sent Events (SSE). SSE is easier to setup and don't require setting up a WebSocket server.

• Update the serverserver.envfile and the clientclient.envfile with your credentials
• Make sure Postgres is running and create a new database calledfsb

psql -U user // replace user by your postgres userCREATE DATABASE fsb;

• Run in the terminal In the root directory:

// Install the dependenciesnpm i// Setup the databasenpm run push// Seed the databasenpm run seed// Run the app (it will run the client and the server automatically)npm run dev

• Update the.gitignorefile by uncommenting# .env to ensure your credentials remain private and are not exposed.

npm run buildnpm run start

Focusing on developer experience: simple, efficient, and fast. This modern stack uses top-tier libraries to build a full-stack web application. Unlike the T3 app (https://create.t3.gg), we opted not to use Next.js, allowing the frontend to remain as static files, easily stored in cloud object storage like AWS S3. Consequently, this stack is designed for building web apps rather than traditional websites, as it is not SEO-friendly.

Video fromhttps://trpc.io

The tests should be executed while the application is running.

npm run test

• Need a component library? Check outChakra UI
• If your stack is getting more and more shared workspaces, consider usingpnpm instead of npm

• Nachonacho.com - The world's largest marketplace for Software & Services

Create a PR if you want to add your project here.

This project is free and open source. If you found it useful, consider giving it a star ⭐ or sponsoring me 💖 — it really helps!I'm always open to feedback, so feel free to share suggestions to improve the stack.You’re also welcome to contribute by opening a pull request 🚀.