skills.rest
BotchaVarun
BotchaVarunCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

fullstack-js

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

Updated Mar 8, 2026
Search Tags:#full-stack#react#drizzle#javascript#tailwind#express#shadcn
One-click install
npx skills add https://github.com/BotchaVarun/EduBot --skill fullstack-js-botchavarun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstack-js
Source: https://github.com/BotchaVarun/EduBot/tree/main/.local/skills/fullstack-js
Command: npx skills add https://github.com/BotchaVarun/EduBot --skill fullstack-js-botchavarun

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, API routes, form handling, data fetching, and styling that are easy to get inconsistent. This Skill encodes a complete set of conventions so the generated Express + React + Drizzle codebase stays coherent, typed end-to-end, and visually consistent. ## Core Features & Use Cases - End-to-end type safety: Defines the data model first in shared/schema.ts using Drizzle and drizzle-zod, then reuses insert/select types across storage, routes, forms, and queries. - Frontend conventions: Enforces wouter routing, shadcn useForm with zodResolver, TanStack Query v5 object syntax with proper cache invalidation, and data-testid attributes on interactive elements. - UI styling rules: Ships reference guides for hover/elevation utilities, layout and spacing, sidebar setup, shadcn component usage, and dark-mode-safe contrast. - Use Case: Ask the AI to build a recipe manager app; it will generate the Drizzle schema, storage interface, API routes, React pages with sidebar navigation, and themed styling that all follow the same rule set. ## Quick Start Use the fullstack-js skill to build a task tracker app with a sidebar, a form to add tasks, and dark mode support.

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 Express and React?▼

Start by defining the data model in shared/schema.ts with Drizzle and drizzle-zod, then build the IStorage interface in server/storage.ts, thin API routes in server/routes.ts, and React pages using wouter for routing. Keep the backend limited to persistence and API calls, with most logic in the frontend.

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 support array-style useQuery arguments?▼

No, TanStack Query v5 only allows the object form, such as useQuery({ queryKey: ['key'] }). Use array query keys like ['/api/recipes', id] for hierarchical cache invalidation, and call apiRequest from @lib/queryClient for mutations.

Why does my Drizzle array column schema fail?▼

Array columns in Drizzle must call .array() as a method on the column type, such as text().array(), not as a wrapper function like array(text()). This is a common pitfall when writing schemas in shared/schema.ts.

Can I modify package.json or the Vite config in this setup?▼

No, package.json, vite.config.ts, server/vite.ts, and drizzle.config.ts are pre-configured and must not be edited. New packages should be installed through the packager_install_tool, and environment variables on the frontend must use the VITE_ prefix with import.meta.env.

Related Skills

Explore More Software Engineering Skills→
yethikrishnayethikrishna

website-building-webapp

Pre-build a fullstack web app template with Express, Vite, React, Tailwind, shadcn/ui, and Drizzle ORM.

Community
Intermediate
ecnepsyroc-botecnepsyroc-bot

railway-deploy

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

Community
Intermediate
anouar1991anouar1991
1

dark-mode-tester

Audit dark mode rendering and color contrast against WCAG 2.1 guidelines.

Community
Advanced
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate