webdev-readme-fullstack

Guides fullstack web development on the React, tRPC, Drizzle, and Manus OAuth template.

Updated Sep 16, 2026
One-click install
npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill webdev-readme-fullstack-military-veteran-team-lpt-realty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webdev-readme-fullstack
Source: https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills/tree/main/skills/webdev-readme-fullstack
Command: npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill webdev-readme-fullstack-military-veteran-team-lpt-realty

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a fullstack web app from scratch requires wiring authentication, database access, API contracts, and frontend data fetching, which is error-prone and slow. This Skill provides the complete development guide for the Manus webdev fullstack template so every project follows proven conventions out of the box. ## Core Features & Use Cases - End-to-end tRPC workflow: Define procedures in server/routers.ts, add query helpers in server/db.ts, and consume them with typed trpc.* hooks—no REST routes or Axios clients. - Built-in auth and database: Manus OAuth with protectedProcedure, Drizzle ORM schema management with migration generation, and pre-configured environment variables. - Frontend and design guidance: Covers shadcn/ui + Tailwind styling, DashboardLayout for admin panels, animation timing rules, media upload workflow, and Vitest testing patterns. - Use Case: When asked to build a task manager with user accounts, follow this guide to extend the Drizzle schema, add protected tRPC procedures, and wire a dashboard UI with optimistic updates. ## Quick Start Use the webdev fullstack guide to scaffold a new feature with a database table, tRPC procedure, and React page following the template conventions.

Frequently Asked Questions about webdev-readme-fullstack

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new feature to a tRPC fullstack app?▼

Update the Drizzle schema in drizzle/schema.ts, generate and apply the migration, add query helpers in server/db.ts, then create procedures in server/routers.ts. Finally wire the UI with trpc.*.useQuery and useMutation hooks.

How does authentication work with Manus OAuth and tRPC?▼

Manus OAuth completes at /api/oauth/callback and sets a session cookie. Each tRPC request builds context with the current user as ctx.user, and protectedProcedure gates authenticated logic while useAuth() exposes auth state on the frontend.

Can I store images in the client public folder?▼

No, local media in client/public or client/src/assets causes deployment timeouts. Upload assets with the manus-upload-file CLI, reference the returned storage path in code, and keep originals outside the project directory.

When should I use DashboardLayout versus custom navigation?▼

Use DashboardLayout with sidebar navigation for internal tools, admin panels, and personal productivity apps. For public-facing products like marketing sites or e-commerce, design custom top or contextual navigation instead.

How do I implement role-based access control with tRPC?▼

The user table includes a role field with admin and user values. Gate admin-only operations by checking ctx.user.role in procedures or wrapping logic in an adminProcedure that throws FORBIDDEN for non-admin users.

Why should timestamps be stored as UTC in the database?▼

Storing business timestamps as UTC Unix milliseconds avoids timezone drift and confusion across clients. Convert to the user's local timezone only at display time in React components using toLocaleString.