skills.rest
gopaljilab
gopaljilabCOMMUNITY
Explore all skills by this author →
GitHub

fullstack-js

Implements full-stack JavaScript applications with React, Express, Drizzle, and Shadcn UI conventions.

Updated Mar 6, 2026
Search Tags:#typescript#full-stack#react#drizzle#express#shadcn#tanstack-query
One-click install
npx skills add https://github.com/gopaljilab/Gupta-Portfolio --skill fullstack-js-gopaljilab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstack-js
Source: https://github.com/gopaljilab/Gupta-Portfolio/tree/main/.local/skills/fullstack-js
Command: npx skills add https://github.com/gopaljilab/Gupta-Portfolio --skill fullstack-js-gopaljilab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a full-stack JavaScript app involves dozens of small decisions about schema design, routing, forms, data fetching, and styling that are easy to get inconsistent. This Skill encodes a complete set of conventions for React, Express, Drizzle ORM, TanStack Query, and Shadcn UI so the generated codebase stays coherent and follows best practices. ## Core Features & Use Cases - Schema-first development: Defines the data model in shared/schema.ts with Drizzle and drizzle-zod insert schemas before any other code, keeping frontend and backend types in sync. - Frontend conventions: Enforces wouter routing, react-hook-form with zodResolver, TanStack Query v5 object syntax with proper cache invalidation, and data-testid attributes on interactive elements. - UI styling rules: Provides detailed references for hover/elevation utilities, Shadcn component usage, sidebar setup, layout spacing, and visual contrast including dark mode support. - Use Case: Ask the AI to build a recipe manager app; it will first write the Drizzle schema, then the storage interface and Express routes, then React pages with forms and queries that all share the same types. ## Quick Start Build a full-stack JavaScript app with a projects dashboard following the fullstack-js guidelines, starting with the shared schema.

Frequently Asked Questions about fullstack-js

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

FAQPage Schema
How do I structure a full-stack JavaScript app with React and Express?▼

Start by defining the data model in shared/schema.ts using Drizzle ORM with drizzle-zod insert schemas. Then implement the IStorage interface in server/storage.ts, write thin API routes in server/routes.ts, and build React pages that consume the shared types.

How do I validate forms with react-hook-form and Zod?▼

Use shadcn's useForm hook and Form component with zodResolver from @hookform/resolvers/zod, passing the insert schema from shared/schema.ts. Extend the schema with .extend for extra rules and always provide default values since the form is controlled.

Does TanStack Query v5 work with array syntax for useQuery?▼

No, TanStack Query v5 only supports the object form, such as useQuery({ queryKey: ['key'] }). Mutations should use apiRequest from @lib/queryClient and invalidate caches by queryKey afterward.

Why does hover-elevate not work on my component?▼

The hover-elevate and active-elevate-2 utility classes do not work with overflow-hidden or overflow-scroll containers. Remove the overflow class or restructure the element so overflow remains visible.

Can I modify package.json or vite.config.ts in this setup?▼

No, package.json must never be edited directly; use the packager install tool for new dependencies. The Vite and drizzle configs are pre-configured to serve frontend and backend on one port and should not be modified unless absolutely necessary.

Related Skills

Explore More Software Engineering Skills→
BRANDNEWSHVTBRANDNEWSHVT

ui-ux-redesign

Plan a frontend UI/UX redesign workflow from inventory to implementation.

Official
Advanced
ecnepsyroc-botecnepsyroc-bot

railway-deploy

Deploy .NET 8 ASP.NET Core apps to Railway with PostgreSQL and migrations.

Community
Intermediate
zajcazajca
2

E2E Test Builder

Create Playwright end-to-end tests using Page Object Model patterns and database isolation.

Community
Intermediate
HouseGarofaloHouseGarofalo
3

nextjs-app-router

Develop Next.js 14+ applications using the App Router paradigm.

Official
Advanced