skills.rest
djliden
djlidenCOMMUNITY
Explore all skills by this author →
Website𝕏@danjlidenGitHub

fullstack-app

Guide end-to-end setup of Vite React TypeScript frontends with FastAPI backends.

Updated May 11, 2025
Search Tags:#typescript#react#fastapi#pnpm#vite#fullstack#web-ui
One-click install
npx skills add https://github.com/djliden/devrel-claude-code-plugin --skill fullstack-app
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullstack-app
Source: https://github.com/djliden/devrel-claude-code-plugin/tree/main/devrel-autonomy/skills/fullstack-app
Command: npx skills add https://github.com/djliden/devrel-claude-code-plugin --skill fullstack-app

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides you in building modern fullstack demos with a dedicated frontend (Vite + React + TypeScript) and a FastAPI backend. It helps you deliver interactive UI, user authentication, and data persistence for demos that look polished to non-technical stakeholders.

Core Features & Use Cases

  • Frontend stack: Vite + React + TypeScript with Tailwind CSS + Shadcn UI for a polished, responsive UI.
  • Backend stack: FastAPI with OpenAPI-generated contracts and Pydantic models for robust data handling.
  • Project scaffolding & workflow: Step-by-step setup to create a cohesive frontend + backend project, ensuring consistent API contracts and publish-ready demos.
  • Use Case: Build a demo app with login and CRUD to showcase a real-world workflow to clients and teammates, without diving into production-grade complexity.

Quick Start

Use the fullstack-app skill to scaffold a complete frontend + backend demo:

  • Frontend setup: pnpm create vite@latest frontend --template react-ts
  • Install and configure: cd frontend; pnpm install; pnpm add tailwindcss @tailwindcss/vite; pnpm dlx shadcn@latest init -y --base-color neutral
  • Backend setup: mkdir backend; cd backend; uv init; uv add fastapi uvicorn pydantic

Frequently Asked Questions about fullstack-app

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

FAQPage Schema
How do I build a fullstack app with React frontend and FastAPI backend?▼

Build a fullstack app by scaffolding a Vite + React + TypeScript frontend and a FastAPI backend with Pydantic models. This Skill provides end-to-end setup guidance, including authentication, CRUD operations, OpenAPI contracts, and responsive UI with Tailwind CSS and Shadcn UI for polished demos.

Can I use Vite and React with TypeScript for a production-ready demo?▼

Yes. Vite + React + TypeScript supports responsive, polished web UIs suitable for demos and internal tools. This Skill covers project scaffolding, dependency management with pnpm, and frontend-backend integration patterns that deliver a professional appearance to non-technical stakeholders.

How do I set up authentication and CRUD in a React and FastAPI project?▼

Configure user authentication and CRUD data persistence by structuring your FastAPI backend with Pydantic models for request/response validation and your React frontend to consume the OpenAPI-generated API contract. This Skill guides dependency-aware CORS setup and proxy-based routing for seamless frontend-backend communication.

What's the best way to organize a fullstack project with separate frontend and backend folders?▼

Organize your project with a dedicated frontend folder (Vite + React + TypeScript + Tailwind CSS) and backend folder (FastAPI + uvicorn) using consistent API contracts from OpenAPI specifications. This Skill provides step-by-step scaffolding and workflow guidance to ensure cohesive tooling and aligned development practices.

Do I need to manually write API documentation for a React and FastAPI project?▼

No. FastAPI auto-generates OpenAPI specifications from Pydantic models, serving as the contract between frontend and backend. This Skill leverages auto-generated documentation to drive frontend-backend integration, eliminating manual API documentation and reducing misalignment.

Related Skills

Explore More Software Engineering Skills→
d0whc3rd0whc3r

javascript-typescript-typescript-scaffold

Generate TypeScript project scaffolds with pnpm, ESLint, and Vitest configurations.

Community
Advanced
giosuetedeschi-specgiosuetedeschi-spec

vercel-deployment

Configure environment variables and runtimes for Next.js deployments on Vercel.

Community
Intermediate
TNHoang2708TNHoang2708
1

ck:ui-styling

Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.

Community
Advanced
CuriousLearnerCuriousLearner
27

project-scaffolder

Automate software project scaffolding across languages, frameworks, and project types.

Community
Advanced