First Project with Autohand Code

bash

# Create main project directory
mkdir taskflow-app
cd taskflow-app

# Initialize with Autohand Code
autohand create --type full-stack --name taskflow

# This will create:
# - frontend/ (React app)
# - backend/ (Node.js app)
# - database/ (Schema files)
# - docker-compose.yml
# - README.md

bash

# Generate complete project structure
autohand genereate "Create full-stack project structure for task management app" --output .

# Generate package.json files
autohand genereate "package.json for React frontend with TypeScript" --output frontend/package.json
autohand genereate "package.json for Node.js backend with TypeScript" --output backend/package.json

bash

# Install frontend dependencies
cd frontend
npm install
npm install @types/react @types/react-dom typescript tailwindcss

# Install backend dependencies
cd ../backend
npm install
npm install express prisma @prisma/client jsonwebtoken bcryptjs cors
npm install @types/express @types/jsonwebtoken @types/bcryptjs @types/cors typescript ts-node

# Return to root
cd ..

bash

# Generate Prisma schema
autohand genereate "Prisma schema for task management app with users, tasks, categories" --output backend/prisma/schema.prisma

prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  username  String   @unique
  password  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  
  tasks     Task[]
  categories Category[]
  
  @@map("users")
}

model Category {
  id          String   @id @default(cuid())
  name        String
  color       String   @default("#3B82F6")
  userId      String
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  
  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  tasks       Task[]
  
  @@unique([userId, name])
  @@map("categories")
}

model Task {
  id          String   @id @default(cuid())
  title       String
  description String?
  priority    Priority @default(MEDIUM)
  status      Status   @default(TODO)
  dueDate     DateTime?
  categoryId  String
  userId      String
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  
  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  category    Category @relation(fields: [categoryId], references: [id], onDelete: Cascade)
  
  @@map("tasks")
}

enum Priority {
  LOW
  MEDIUM
  HIGH
  URGENT
}

enum Status {
  TODO
  IN_PROGRESS
  DONE
  CANCELLED
}

bash

# Initialize Prisma
cd backend
npx prisma init

# Generate Prisma client
npx prisma generate

# Create and run migrations
npx prisma migrate dev --name init

# Seed database (optional)
npx prisma db seed

bash

# Generate main server file
autohand genereate "Express.js server with CORS, JSON parsing, and error handling" --output backend/server.js

# Generate API routes
autohand genereate "REST API routes for tasks with CRUD operations" --output backend/routes/tasks.js
autohand genereate "REST API routes for users with authentication" --output backend/routes/users.js

typescript

import express from 'express';
import cors from 'cors';
import { PrismaClient } from '@prisma/client';
import authRoutes from './routes/auth';
import taskRoutes from './routes/tasks';
import categoryRoutes from './routes/categories';
import { errorHandler } from './middleware/errorHandler';
import { notFound } from './middleware/notFound';

const app = express();
const prisma = new PrismaClient();

// Middleware
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Health check
app.get('/health', (req, res) => {
  res.json({ status: 'OK', timestamp: new Date().toISOString() });
});

// Routes
app.use('/api/auth', authRoutes);
app.use('/api/tasks', taskRoutes);
app.use('/api/categories', categoryRoutes);

// Error handling
app.use(notFound);
app.use(errorHandler);

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

export default app;

bash

# Generate authentication routes
autohand genereate "Express.js authentication routes with JWT, bcrypt, and validation" --output backend/src/routes/auth.ts

bash

# Generate task CRUD routes
autohand genereate "Express.js CRUD routes for tasks with validation and error handling" --output backend/src/routes/tasks.ts

bash

# Generate category CRUD routes
autohand genereate "Express.js CRUD routes for categories with validation" --output backend/src/routes/categories.ts

bash

# Generate authentication middleware
autohand genereate "JWT authentication middleware for Express.js" --output backend/src/middleware/auth.ts

# Generate error handling middleware
autohand genereate "Error handling middleware for Express.js" --output backend/src/middleware/errorHandler.ts

bash

# Generate main App component
autohand genereate "React App component with routing and layout" --output frontend/src/App.tsx

# Generate TaskList component
autohand genereate "React TaskList component with filtering and sorting" --output frontend/src/components/TaskList.tsx

# Generate TaskForm component
autohand genereate "React TaskForm component with validation" --output frontend/src/components/TaskForm.tsx

typescript

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AuthProvider } from './contexts/AuthContext';
import { ThemeProvider } from './contexts/ThemeContext';
import Layout from './components/Layout/Layout';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import Tasks from './pages/Tasks';
import Categories from './pages/Categories';
import Profile from './pages/Profile';
import ProtectedRoute from './components/Auth/ProtectedRoute';
import './index.css';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        <AuthProvider>
          <Router>
            <Routes>
              <Route path="/login" element={<Login />} />
              <Route path="/register" element={<Register />} />
              <Route path="/" element={
                <ProtectedRoute>
                  <Layout>
                    <Routes>
                      <Route index element={<Dashboard />} />
                      <Route path="tasks" element={<Tasks />} />
                      <Route path="categories" element={<Categories />} />
                      <Route path="profile" element={<Profile />} />
                    </Routes>
                  </Layout>
                </ProtectedRoute>
              } />
            </Routes>
          </Router>
        </AuthProvider>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

export default App;

bash

# Generate task list component
autohand genereate "React task list component with filtering, sorting, and search" --output frontend/src/components/Tasks/TaskList.tsx

# Generate task form component
autohand genereate "React task form component with validation and TypeScript" --output frontend/src/components/Tasks/TaskForm.tsx

# Generate task card component
autohand genereate "React task card component with priority indicators and actions" --output frontend/src/components/Tasks/TaskCard.tsx

bash

# Generate login form
autohand genereate "React login form with TypeScript, validation, and error handling" --output frontend/src/pages/Login.tsx

# Generate register form
autohand genereate "React register form with TypeScript and validation" --output frontend/src/pages/Register.tsx

bash

# Initialize Tailwind CSS
cd frontend
npx tailwindcss init -p

# Generate Tailwind configuration
autohand genereate "Tailwind CSS configuration with custom colors and components" --output frontend/tailwind.config.js

bash

# Generate main CSS file
autohand genereate "Tailwind CSS styles for task management app with custom components" --output frontend/src/index.css

bash

# Generate component-specific styles
autohand genereate "Tailwind CSS utility classes for task components" --output frontend/src/components/Tasks/Tasks.css

# Generate layout styles
autohand genereate "Tailwind CSS styles for layout components" --output frontend/src/components/Layout/Layout.css

bash

# Generate API tests
autohand test --generate --directory backend/src/routes --framework jest

# Generate authentication tests
autohand test --generate --file backend/src/routes/auth.ts --framework jest

# Generate task management tests
autohand test --generate --file backend/src/routes/tasks.ts --framework jest

bash

# Generate React component tests
autohand test --generate --directory frontend/src/components --framework react-testing-library

# Generate page tests
autohand test --generate --directory frontend/src/pages --framework react-testing-library

# Generate integration tests
autohand test --generate --integration --directory frontend/src --framework cypress

bash

# Run backend tests
cd backend
npm test

# Run frontend tests
cd ../frontend
npm test

# Run integration tests
npm run test:e2e

bash

# Generate Docker files
autohand genereate "Dockerfile for Node.js backend with TypeScript" --output backend/Dockerfile
autohand genereate "Dockerfile for React frontend with Nginx" --output frontend/Dockerfile

# Generate docker-compose
autohand genereate "Docker Compose configuration for full-stack app with PostgreSQL" --output docker-compose.yml

bash

# Generate API tests
autohand genereate "Jest API tests for Express.js routes with authentication" --output backend/tests/api.test.ts

# Generate model tests
autohand genereate "Jest tests for Prisma models with CRUD operations" --output backend/tests/models.test.ts

bash

# Build and run with Docker
docker-compose up --build

# Deploy to production
docker-compose -f docker-compose.prod.yml up -d