FlowSense

AI-powered flowchart generation from natural language descriptions.

🚀 Tech Stack

• Frontend: Next.js 14 (App Router), React 18, TypeScript
• Backend: Next.js API Routes
• Database: Supabase (PostgreSQL) with Row Level Security
• Authentication: Supabase Auth
• AI: OpenAI GPT-4 Turbo
• Styling: Tailwind CSS + shadcn/ui
• State Management: Zustand
• Diagrams: Mermaid.js

📋 Prerequisites

• Node.js 18+ installed
• Supabase account and project
• OpenAI API account

🔧 Environment Variables

Create a .env.local file in the root directory with the following variables:

# OpenAI Configuration
OPENAI_API_KEY=your_openai_api_key_here
OPENAI_MODEL=gpt-4-turbo-preview

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here

# Application Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

🛠️ Installation

1. Clone the repository
2. Install dependencies:

   npm install

3. Set up environment variables (see above)
4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser

🎯 Development Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run test - Run tests
• npm run type-check - Run TypeScript checks

🏗️ Project Structure

flowsense/
├── app/                    # Next.js App Router
│   ├── (auth)/            # Auth route group
│   ├── dashboard/         # Dashboard pages
│   ├── editor/            # Flowchart editor
│   ├── shared/            # Shared flowcharts
│   └── api/               # API routes
├── components/            # Reusable components
│   ├── ui/               # shadcn/ui components
│   ├── flowchart/        # Flowchart components
│   ├── auth/             # Auth components
│   └── common/           # Common components
├── lib/                  # Utility functions
├── hooks/                # Custom hooks
├── stores/               # Zustand stores
├── types/                # TypeScript types
└── middleware.ts         # Next.js middleware

🔒 Security

• Row Level Security (RLS) enabled on all database tables
• Server-side authentication verification
• Input validation with Zod
• Rate limiting on AI endpoints
• Secure environment variable handling

📖 Features

Phase 1 (MVP)

• Project Setup
• Authentication System
• Database Schema & RLS
• Natural Language Input
• AI Clarification Loop
• Mermaid Generation
• Dashboard
• CRUD Operations
• Interactive Q&A

Phase 2 (Future)

• Advanced Editing
• Export Functionality
• Sharing Features
• Template Library
• Visual Editor

🎨 Color Scheme

• Primary: Deep Blue (#2563eb)
• Secondary: Emerald Green (#10b981)
• Accent: Indigo (#6366f1)
• Neutrals: Modern grays

📝 License

MIT License - see LICENSE file for details.