Skip to content

KleinDigitalSolutions/SME

BranchesTags

Repository files navigation

ÜBUNGSPROJEKT KDS

🚀 SME FLOW AI – No-Code Workflow Automation Platform

License: MIT TypeScript Next.js Docker Live Demo

A powerful, production-ready workflow automation platform with visual workflow builder, AI integrations, and real-time monitoring.

SME FLOW AI is a comprehensive SaaS platform that enables users to create, manage, and execute complex workflows through an intuitive visual interface. Built with modern technologies and enterprise-grade architecture, it demonstrates full-stack development skills, API integrations, and scalable system design.

🌐 Live Demo

[🚀 View Live Demo](coming soon)

Demo Login: Click "Als Demo-Benutzer anmelden" for instant access!

No signup required • Mock data • Full functionality

💡 Note: The demo runs in mock mode - all Google API integrations are simulated (no real API calls). Perfect for exploring the platform without API keys!

📸 Screenshots & Demo

Analytics Dashboard

Real-time monitoring with performance metrics, resource usage, and activity tracking.

Dashboard

Visual Workflow Builder

Drag-and-drop workflow creation with ReactFlow. Connect triggers, actions, and AI nodes.

Workflow Builder

🎥 Video Walkthrough (Coming Soon)

Planning to add: 2-minute screen recording demonstrating:

  • Demo login → Dashboard overview
  • Creating a workflow with visual builder
  • Real-time execution monitoring
  • Analytics and metrics

For now: Try the live demo or run locally with docker compose up

✨ Key Features

🎨 Visual Workflow Builder

  • Drag-and-drop interface powered by ReactFlow
  • Real-time workflow canvas with node connections
  • Conditional branching and complex flow logic
  • Visual feedback and validation

🤖 AI & API Integrations

  • Google Workspace: Sheets, Gmail, Calendar
  • Google AI: Vision API, Natural Language Processing
  • Google Ads: Campaign management and analytics
  • Extensible architecture for custom integrations

⚡ Enterprise Features

  • Real-time Monitoring: WebSocket-based execution tracking
  • Queue System: Robust job processing with Bull + Redis
  • Multi-tenancy: Complete organization isolation
  • Authentication: JWT-based security with bcrypt
  • Analytics Dashboard: Comprehensive usage metrics and insights
  • Billing System: Subscription management and usage tracking

📊 Developer Experience

  • Full TypeScript support
  • Docker-based development environment
  • Monorepo structure with npm workspaces
  • RESTful API with Zod validation
  • Real-time updates via Socket.IO

🏗️ Architecture & Tech Stack

Backend

  • Runtime: Node.js 18+ with TypeScript
  • Framework: Express.js
  • Database: PostgreSQL (Supabase)
  • Queue: Bull with Redis
  • Validation: Zod schemas
  • Authentication: JWT + bcrypt
  • Real-time: Socket.IO

Frontend

  • Framework: Next.js 15 (App Router)
  • UI: React 18 with Tailwind CSS
  • Workflow Canvas: ReactFlow
  • State Management: React Context + Hooks
  • HTTP Client: Custom API client with retry logic

Infrastructure

  • Containerization: Docker + Docker Compose
  • Database: Supabase (PostgreSQL with RLS)
  • Caching: Redis 7
  • Development: Hot reload, volume mounting

🚀 Quick Start (5 Minutes Setup)

TL;DR - Fastest Way

git clone https://github.com/yourusername/sme-flow-ai.git && cd sme-flow-ai
cp sme-flow-backup/sme-flow-api/.env.example sme-flow-backup/sme-flow-api/.env
cp sme-flow-backup/sme-flow-client/.env.example sme-flow-backup/sme-flow-client/.env
docker compose up -d && npm install && npm run seed
# Open http://localhost:3000 → Click "Als Demo-Benutzer anmelden"

Detailed Setup

Prerequisites:

Step 1: Clone & Setup

git clone https://github.com/yourusername/sme-flow-ai.git
cd sme-flow-ai

# Copy environment files
cp sme-flow-backup/sme-flow-api/.env.example sme-flow-backup/sme-flow-api/.env
cp sme-flow-backup/sme-flow-client/.env.example sme-flow-backup/sme-flow-client/.env

Step 2: Start Services

docker compose up -d

Step 3: Seed Demo Data

npm install
npm run seed

Step 4: Access the App

💡 Tip: The demo uses mock Google APIs - no API keys required!

📖 Demo Workflows

The seed script creates two example workflows:

1. Webhook → NLP → Email

Webhook Trigger → Sentiment Analysis (NLP) → Condition Check → Send Email
  • Receives data via webhook
  • Analyzes sentiment using Google NLP
  • Sends confirmation email if positive

2. Schedule → Vision → Sheets

Daily Schedule → Image Analysis (Vision) → Append to Spreadsheet
  • Runs daily at configured time
  • Analyzes images with Google Vision
  • Logs results to Google Sheets

🔧 Configuration

Environment Variables

API (sme-flow-backup/sme-flow-api/.env)

# Server Configuration
PORT=8000
API_BASE_URL=http://localhost:8000

# Database (Supabase)
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Authentication
JWT_SECRET=your-secret-key-here

# Queue & Cache
REDIS_URL=redis://redis:6379

# Frontend URL (for CORS)
NEXT_PUBLIC_CLIENT_URL=http://localhost:3000

# Demo Mode (optional)
PROVIDERS=mock           # Use 'google' for real APIs
ENABLE_GOOGLE_ADS=0      # Set to 1 to enable Google Ads

Client (sme-flow-backup/sme-flow-client/.env)

# API Endpoint
NEXT_PUBLIC_API_URL=http://localhost:8000

Database Setup

Option 1: Use Supabase Cloud (Recommended)

  1. Create a free account at supabase.com
  2. Create a new project
  3. Copy your project URL and keys to .env
  4. Run the schema from sme-flow-backup/sme-flow-api/schema_fixed.sql in the SQL editor
  5. Run npm run seed to populate demo data

Option 2: Use Local PostgreSQL

The Docker Compose setup includes a local PostgreSQL instance:

  • Accessible at localhost:54321
  • Default credentials in docker-compose.yml

📁 Project Structure

SME/
├── sme-flow-backup/
│   ├── sme-flow-api/          # Backend API
│   │   ├── src/
│   │   │   ├── SMEFlowWorkflowAPIServer.ts  # Main server
│   │   │   ├── workflow-engine.ts           # Workflow execution engine
│   │   │   └── integrations/                # API integrations
│   │   ├── scripts/
│   │   │   └── seed.ts                      # Database seeding
│   │   ├── Dockerfile
│   │   └── package.json
│   │
│   └── sme-flow-client/       # Frontend (Next.js)
│       ├── src/
│       │   ├── app/                         # Next.js App Router
│       │   ├── components/                  # React components
│       │   ├── lib/                         # API clients & utilities
│       │   └── styles/                      # Global styles
│       ├── Dockerfile
│       └── package.json
│
├── docker-compose.yml         # Multi-service orchestration
├── package.json               # Root workspace config
├── LICENSE                    # MIT License
└── README.md                  # This file

🔒 Security Features

Demo Mode (Default)

  • Mock Google API providers (no real API calls)
  • JWT-based authentication
  • Bcrypt password hashing
  • Row-Level Security (RLS) with Supabase
  • Service role key for admin operations
  • CORS whitelist protection
  • Rate limiting on authentication routes

Production Considerations

  • Enable OAuth2 for Google account connections
  • Encrypt stored OAuth tokens in database
  • Implement HTTPS/TLS
  • Set up environment-specific secrets management
  • Enable audit logging
  • Implement 2FA for user accounts
  • Set up monitoring and alerting

🧪 Testing & Development

Available Scripts

# Install all dependencies
npm install

# Start development (with Docker)
docker compose up --build

# View logs
docker compose logs -f api
docker compose logs -f web

# Stop all services
docker compose down

# Rebuild specific service
docker compose up -d --build api

# Seed database
npm run seed

# Build API
cd sme-flow-backup/sme-flow-api && npm run build

# Build Client
cd sme-flow-backup/sme-flow-client && npm run build

Running Individual Services

# API (requires Redis & PostgreSQL)
cd sme-flow-backup/sme-flow-api
npm install
npm run build
npm start

# Client
cd sme-flow-backup/sme-flow-client
npm install
npm run dev

🎯 What This Project Demonstrates

For Recruiters & Technical Interviewers:

This project showcases production-ready full-stack development skills:

Technical Skills

  • ✅ Modern TypeScript Stack: End-to-end type safety (Frontend → Backend → Database)
  • ✅ System Architecture: Microservices, message queues, real-time communication
  • ✅ API Design: RESTful endpoints, WebSocket integration, OAuth2 flows
  • ✅ Database Engineering: Multi-tenant PostgreSQL with Row-Level Security
  • ✅ DevOps & Deployment: Docker, CI/CD ready, cloud deployment guides
  • ✅ Security Best Practices: JWT auth, bcrypt hashing, CORS, rate limiting

Business Understanding

  • ✅ SaaS Architecture: Subscription models, usage tracking, billing systems
  • ✅ User Experience: Intuitive visual editor, real-time feedback, responsive design
  • ✅ Scalability: Queue-based processing, Redis caching, horizontal scaling ready
  • ✅ Documentation: README, deployment guides, security policies, contribution guidelines

Complexity Handled

  • Multi-tenancy: Complete data isolation per organization
  • Real-time Processing: Socket.IO for live execution updates
  • Async Workflows: Bull queue for background job processing
  • Visual Programming: ReactFlow integration for drag-and-drop workflows
  • AI Integrations: Provider pattern for swappable API implementations

🛣️ Roadmap

Planned Features

  • Workflow Templates: Pre-built workflow library
  • Webhook Designer: Visual webhook endpoint creator
  • Advanced Scheduling: Cron expressions, timezone support
  • Error Recovery: Automatic retry with exponential backoff
  • Audit Logs: Complete activity tracking
  • Team Collaboration: User roles and permissions
  • API Marketplace: Community-contributed integrations
  • Mobile App: React Native companion app

Technical Improvements

  • Migration to BullMQ (from Bull)
  • Comprehensive test suite (Jest, Playwright)
  • CI/CD pipeline (GitHub Actions)
  • Performance monitoring (Sentry, Datadog)
  • API documentation (Swagger/OpenAPI)
  • GraphQL API layer
  • Kubernetes deployment configs

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

💼 Why I Built This

As a full-stack developer, I wanted to demonstrate:

  1. Complex System Design: Multi-tenant SaaS architecture with real-time features
  2. Modern Tech Stack: Latest Next.js, TypeScript patterns, and cloud-native tools
  3. Production Thinking: Security, scalability, documentation, and deployment readiness
  4. Business Understanding: SaaS metrics, billing systems, usage tracking

This project represents the kind of architecture and code quality I bring to production applications.

👨‍💻 Author

Ozgur Azap

Full-Stack Developer | TypeScript Specialist | SaaS Architecture

🙏 Acknowledgments

📞 Support & Contributing

This is a portfolio project showcasing full-stack development capabilities. While it's not actively accepting contributions, feel free to:

  • ⭐ Star this repository if you find it helpful
  • 🐛 Report bugs via GitHub Issues
  • 💡 Share feedback and suggestions
  • 🔗 Fork and adapt for your own projects

Made with ❤️ for recruiters and developers looking for a comprehensive full-stack example

About

sme-three-dun.vercel.app

Resources

Readme

License

MIT license

Contributing

Contributing

Security policy

Security policy
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages