webappbuilder_skill

Overview

This skill collects project requirements and scaffolds a production-ready full-stack starter using React + Vite + Tailwind for the frontend and Node/Express + MongoDB for the backend. It follows a clean MVC backend layout, includes auth scaffolding, a sample CRUD entity, and environment examples to get development running quickly.

How this skill works

I first run a compact requirement checklist to capture project name, modules, roles, pages/endpoints, DB preference, auth method, and extra features. After you confirm the summary, I generate a minimal, readable codebase: frontend (React/Vite/Tailwind), backend (Express/MongoDB in MVC), .env.example files, API prefix and health route, plus a sample entity with full CRUD. Generated code is intentionally extendable and production-ready as a starter.

When to use it

• When you want to scaffold a new React+Vite+Tailwind frontend with a Node/Express+MongoDB backend.
• When you need a quick, opinionated starter following MVC and API versioning (/api/v1).
• When you have project requirements ready and want a minimal, extendable codebase.
• When you need baseline auth (JWT/session/OAuth) and sample CRUD to build from.
• When you prefer a checklist-driven intake before any code generation.

Best practices

• Always confirm the compact requirements checklist before generating code.
• Choose MongoDB Atlas for production and local for development; include connection config in .env.
• Start with JWT auth for stateless APIs; add OAuth or sessions if needed later.
• Keep generated modules small and readable; refactor into services when complexity grows.
• Use the provided sample entity as a pattern for new models, controllers, and routes.

Example use cases

• Scaffold a SaaS MVP with auth, dashboard, and a main CRUD entity (e.g., projects or products).
• Create an internal admin panel with admin/user roles and file upload support.
• Kick off a marketplace prototype with payments and notification placeholders.
• Build a developer boilerplate that enforces API versioning and health checks.
• Generate a learning project to explore full-stack patterns and deployment steps.