Tag

React

3 articles tagged with "React"

MemoMate

MemoMate

A web application that streamlines note-taking and summarization powered by AI. Upload documents, create AI chatbots from your notes, and generate diagrams via natural language.

Features

  • Note Workspaces — Hierarchical tree-based file/folder organization
  • Document Upload — Support for PDF, DOCX, and Excalidraw formats
  • AI Chatbot Creation — RAG-based chatbots from uploaded notes
  • Diagram Generation — Natural language to Mermaid syntax (flowcharts, Gantt charts)
  • Whiteboard — Excalidraw-based collaborative drawing
  • Command Bar — kmenu-powered quick actions
  • Shareable Bot Links — Create bots from notes and share via unique URLs
  • Admin Dashboard — Site metrics, token usage, and user engagement

Technical Highlights

  • LangChain + LangGraph for RAG workflow orchestration
  • Faiss vector store for similarity search
  • OpenAI GPT-4o-mini for chat and diagram generation
  • Excalidraw integration for whiteboard functionality
  • Redux Toolkit for state management
  • AWS EC2 deployment with GitHub Actions CI/CD

Tech Stack

LayerTechnology
FrontendReact 18 + TypeScript + Redux
BackendBun + Express + MongoDB
AI/MLLangChain, LangGraph, OpenAI
Vector StoreFaiss
AuthJWT + bcrypt

Architecture

User uploads documents (PDF, DOCX)
         ↓
Document Parser (pdf-parse, mammoth)
         ↓
Text Splitter (RecursiveCharacterTextSplitter)
         ↓
Embedding Generator (OpenAI)
         ↓
Faiss Vector Store
         ↓
User chats → Retrieve relevant chunks → LLM generates response

Media Bot

Media Bot

An AI-powered media planning platform with a conversational interface for campaign optimization. Combines LLMs with mathematical optimization to maximize ROI across marketing channels.

Features

  • Conversational AI Interface — Stage-based chat that gathers campaign requirements (budget, objectives, audience, channels, duration)
  • Dataset Upload — Drag & drop CSV/Excel files with historical performance data
  • Budget Optimization — SciPy SLSQP algorithm for optimal channel allocation
  • ROI Analysis — Automatic calculation of cost efficiency and audience reach metrics
  • Channel Support — Meta, Snapchat, Google, TikTok (expandable)
  • Session Persistence — SQLite-based conversation history

Technical Highlights

  • Together AI (Llama 3.1 70B) for natural language understanding and plan generation
  • SciPy optimization for mathematical budget allocation
  • Pandas for data processing and analysis
  • Framer Motion for smooth UI animations
  • Glassmorphic design with dark theme

Tech Stack

LayerTechnology
FrontendReact 19 + TypeScript + Vite
BackendFastAPI
AITogether AI (Llama 3.1 70B)
OptimizationSciPy SLSQP
DatabaseSQLite
StylingTailwind CSS + Framer Motion

How It Works

  1. Requirements Gathering — Chat collects budget, objectives, target audience
  2. Data Analysis — Upload historical performance CSV/Excel
  3. Optimization — SciPy finds optimal budget split across channels
  4. Plan Generation — AI creates detailed channel-specific recommendations

Mithaq Management System

Mithaq Management System

An enterprise-grade Lead Management System designed for educational institutions to centralize, automate, and optimize their lead generation and conversion pipeline.

Features

  • Lead Lifecycle Management — Complete tracking from NEW → CONTACTED → FOLLOW_UP → REGISTERED/NOT_REGISTERED
  • Automated Distribution — Round-robin algorithm with database-level locking to prevent race conditions
  • SLA Monitoring — Automated tracking of initial contact timeframes with breach detection
  • Role-Based Access Control — Four user roles (Admin, Manager, Moderation, Sales) with different permissions
  • Real-Time Synchronization — WebSocket-based instant updates across all connected clients
  • Analytics Dashboard — Live KPIs, conversion funnel analysis, and agent productivity metrics
  • Multi-Channel Notifications — Push notifications, WhatsApp integration, and email alerts

Technical Highlights

  • 35,000+ lines of TypeScript and SQL
  • 15+ database tables with optimized relationships and Row-Level Security
  • 100+ concurrent users with sub-100ms response times
  • 46x performance improvement through query optimization
  • Supabase backend with PostgreSQL, Edge Functions, Auth, and Real-time subscriptions

Tech Stack

FrontendBackend
React 19PostgreSQL 17
TypeScript 5.9Supabase
Tailwind CSS 4Deno Edge Functions
shadcn/uiWebSocket

Architecture

Built with enterprise best practices: composite indexes, materialized views for dashboards, PostgreSQL cron jobs for automation, and optimistic concurrency control for conflict detection.