diff --git a/.claude/settings.local.json b/.claude/settings.local.json index b7f24a57..9f7db664 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -32,7 +32,13 @@ "Bash(tsc --noEmit)", "WebSearch", "WebFetch(domain:elysiajs.com)", - "Bash(tree:*)" + "Bash(tree:*)", + "Bash(git checkout:*)", + "Bash(npx tailwindcss init:*)", + "Bash(pkill:*)", + "Bash(taskkill:*)", + "Bash(npx eslint:*)", + "Bash(export NODE_ENV=production)" ], "deny": [] } diff --git a/app/client/src/App.tsx b/app/client/src/App.tsx index ae3a973b..f3240fda 100644 --- a/app/client/src/App.tsx +++ b/app/client/src/App.tsx @@ -1,5 +1,4 @@ import { useState, useEffect } from 'react' -import './App.css' import { api, apiCall, getErrorMessage } from './lib/eden-api' import type { User } from '@/shared/types' @@ -18,7 +17,7 @@ function App() { useEffect(() => { checkApiStatus() loadUsers() - }, []) + }, []) // eslint-disable-line react-hooks/exhaustive-deps const checkApiStatus = async () => { try { @@ -47,7 +46,7 @@ function App() { try { setSubmitting(true) - const result = await apiCall(api.users.post({ name: name.trim(), email: email.trim() })) as any + const result = await apiCall(api.users.post({ name: name.trim(), email: email.trim() })) as { success: boolean; user: User } if (result?.success && result?.user) { setUsers(prev => [...prev, result.user]) @@ -87,74 +86,140 @@ function App() { } const renderOverview = () => ( -
-
-
-

🔥 FluxStack - Hot Reload Ativo! ⚡

-

- Framework full-stack TypeScript moderno com hot reload coordenado! 🚀 -

-
-
-
🚀
-

Elysia.js

-

Backend rápido e type-safe com Bun runtime

-
-
-
⚛️
-

React + Vite

-

Frontend moderno com hot-reload ultrarrápido

-
-
-
🔗
-

Eden Treaty

-

API type-safe com inferência automática de tipos

-
-
-
🐳
-

Docker Ready

-

Deploy fácil com configurações otimizadas

-
-
-
🧪
-

Testing

-

Vitest + Testing Library configurados

-
-
-
📦
-

Bun Package Manager

-

Instalação e builds extremamente rápidos

+
+ {/* Hero Section with gradient background */} +
+
+
+
+

+ 🔥 FluxStack v1.4.0 ⚡ +

+

+ Framework full-stack TypeScript moderno com hot reload coordenado e Tailwind CSS 4! 🚀 +

+
+ + TypeScript + + + Elysia.js + + + React 19 + + + Tailwind CSS 4 +
- -
-

Stack Tecnológica

-
-
-

Backend

-
    -
  • Elysia.js - Web framework
    • -
  • Bun - Runtime & package manager
    • -
  • TypeScript - Type safety
    • -
-
-
-

Frontend

-
    -
  • React 19 - UI library
    • -
  • Vite - Build tool
    • -
  • TypeScript - Type safety
    • -
+ + {/* Features Grid */} +
+ {[ + { + icon: "🚀", + title: "Elysia.js", + description: "Backend rápido e type-safe com Bun runtime", + color: "from-blue-500 to-cyan-500" + }, + { + icon: "⚛️", + title: "React + Vite", + description: "Frontend moderno com hot-reload ultrarrápido", + color: "from-purple-500 to-pink-500" + }, + { + icon: "🔗", + title: "Eden Treaty", + description: "API type-safe com inferência automática de tipos", + color: "from-emerald-500 to-teal-500" + }, + { + icon: "🐳", + title: "Docker Ready", + description: "Deploy fácil com configurações otimizadas", + color: "from-indigo-500 to-purple-500" + }, + { + icon: "🧪", + title: "Testing", + description: "Vitest + Testing Library configurados", + color: "from-orange-500 to-red-500" + }, + { + icon: "🎨", + title: "Tailwind CSS 4", + description: "Styling moderno e responsivo", + color: "from-teal-500 to-green-500" + } + ].map((feature, index) => ( +
+
+
+
{feature.icon}
+

{feature.title}

+

{feature.description}

+
-
-

Comunicação

-
    -
  • Eden Treaty - Type-safe API
    • -
  • End-to-end TypeScript
    • -
  • Automatic type inference
    • -
+ ))} +
+ + {/* Tech Stack Section */} +
+
+

Stack Tecnológica

+
+
+
+ {[ + { + title: "Backend", + color: "blue", + items: [ + "Elysia.js - Web framework", + "Bun - Runtime & package manager", + "TypeScript - Type safety" + ] + }, + { + title: "Frontend", + color: "purple", + items: [ + "React 19 - UI library", + "Vite - Build tool", + "Tailwind CSS 4 - Styling" + ] + }, + { + title: "Comunicação", + color: "emerald", + items: [ + "Eden Treaty - Type-safe API", + "End-to-end TypeScript", + "Automatic type inference" + ] + } + ].map((category, index) => ( +
+

+ {category.title} +

+
    + {category.items.map((item, itemIndex) => ( +
  • +
    + {item} +
    • + ))} +
+
+ ))}
@@ -162,169 +227,218 @@ function App() { ) const renderDemo = () => ( -
-

🔥 Demo Interativo - Hot Reload Testando!

-

Teste a API em tempo real com hot reload coordenado 🚀

- - {/* Stats */} -
-
-
{users.length}
-
Usuários
+
+ {/* Header */} +
+

🔥 Demo Interativo

+

+ Teste a API em tempo real com hot reload coordenado e Eden Treaty 🚀 +

+
+ + {/* Stats Cards */} +
+
+
{users.length}
+
Usuários
-
-
{apiStatus === 'online' ? '✅' : '❌'}
-
API Status
+
+
{apiStatus === 'online' ? '✅' : '❌'}
+
+ API {apiStatus === 'online' ? 'Online' : 'Offline'} +
-
-
🚀
-
Eden Treaty
+
+
🚀
+
Eden Treaty
{/* Add User Form */} -
-

Adicionar Usuário

-
-
- - setName(e.target.value)} - placeholder="Nome completo" - required - /> -
-
- - setEmail(e.target.value)} - placeholder="email@exemplo.com" - required - /> -
- -
+
+
+

Adicionar Usuário

+
+
+
+
+ + setName(e.target.value)} + placeholder="Nome completo" + required + /> +
+
+ + setEmail(e.target.value)} + placeholder="email@exemplo.com" + required + /> +
+
+ +
+
+
{/* Users List */} -
-
-

Usuários ({users.length})

+
+
+

Usuários ({users.length})

- {loading ? ( -
- - Carregando usuários... -
- ) : users.length === 0 ? ( -
-
👥
-

Nenhum usuário encontrado

-

Adicione o primeiro usuário usando o formulário acima

-
- ) : ( -
- {users.map(user => ( -
-
- {getInitials(user.name)} -
-
{user.name}
-
{user.email}
-
- +
+ {loading ? ( +
+
+

Carregando usuários...

+
+ ) : users.length === 0 ? ( +
+
👥
+

Nenhum usuário encontrado

+

Adicione o primeiro usuário usando o formulário acima

+
+ ) : ( +
+ {users.map(user => ( +
+
+
+ {getInitials(user.name)} +
+
+

{user.name}

+

{user.email}

+ +
+
-
- ))} -
- )} + ))} +
+ )} +
) const renderApiDocs = () => ( -
-

Documentação da API

-

Documentação interativa gerada automaticamente com Swagger

+
+ {/* Header */} +
+

📚 Documentação da API

+

+ Documentação interativa gerada automaticamente com Swagger UI +

+
-
-
-

📋 Swagger UI Interativo

-

Interface completa para testar todos os endpoints da API

- - 🚀 Abrir em Nova Aba - + {/* Quick Links */} +
+
+
+
📋
+

Swagger UI Interativo

+

Interface completa para testar todos os endpoints da API

+ + 🚀 Abrir em Nova Aba + +
-
-

📄 OpenAPI Spec (JSON)

-

Especificação OpenAPI em formato JSON para integração

- - 📋 Ver JSON - +
+
+
📄
+

OpenAPI Spec (JSON)

+

Especificação OpenAPI em formato JSON para integração

+ + 📋 Ver JSON + +
-
-

🔧 Documentação Integrada

+ {/* Embedded Swagger */} +
+
+

🔧 Documentação Integrada

+