DEV Community: Md Rounaq Ali

Check out my project VoxCalc: a next-gen voice-activated AI calculator! Built with Flutter, Google ML Kit for on-device OCR, math recognition, and speech-to-text NLP processing. Read the full engineering write-up here! 📱🎙️

Md Rounaq Ali — Thu, 11 Jun 2026 17:34:07 +0000

Md Rounaq Ali

May 31

How I Built VoxCalc — An AI-Inspired Next-Gen Calculator with Flutter, Google ML Kit & Voice NLP

#flutter #dart #machinelearning #mobiledev

5 min read

I built NexBrief: an automated daily IT newsletter for tech students using Node.js & MongoDB. Check out my full deep-dive on how I bypassed SMTP port blocks using HTTPS APIs and built a dynamic 60/40 news curation algorithm. 👇

Md Rounaq Ali — Thu, 11 Jun 2026 17:31:48 +0000

Md Rounaq Ali

Jun 11

How I Built NexBrief: An Automated Daily IT Newsletter Platform for Engineering Students

#node #webdev #javascript #mongodb

4 min read

How I Built NexBrief: An Automated Daily IT Newsletter Platform for Engineering Students

Md Rounaq Ali — Thu, 11 Jun 2026 16:54:47 +0000

As a B.Tech student, keeping up with the rapid developments in the IT and AI sectors is critical for career development, placements, and interviews. However, searching through countless tech blogs, college portals, and world news sites every single day is time-consuming and exhausting.

To solve this problem, I built NexBrief—India's first dedicated daily newsletter and intelligence platform tailored specifically for engineering students and IT professionals.

Every morning at 7:00 AM IST, registered subscribers receive a curated, highly structured newsletter direct to their inbox. Readers can get fully caught up in just 2 to 5 minutes.

In this article, I’ll share the architecture under the hood, key engineering challenges I solved, and code snippets from the system.

🌟 The Content Formula

NexBrief operates on a strict, target-driven content ratio to deliver maximum value in minimum time:

🔴 50% IT & AI (framework releases, tools, internship openings, cybersecurity reports).
📚 30% Education & Academic Research (placements, exam dates, college hackathons, scientific research).
🌐 20% World Headlines (global business, economy, tech policy).

🛠️ The Tech Stack

Frontend: Modern, responsive, glassmorphic dashboard built using Semantic HTML5, Vanilla CSS, and asynchronous JavaScript.
Backend: REST APIs powered by Node.js and Express.
Database: MongoDB & Mongoose for user profile storage, subscription states, and newsletter dispatch caching.
Email Engine: Brevo Transactional HTTPS API.
Cron Scheduler: cron-job.org.

⚙️ Core Engineering Challenges & Solutions

1. The 60/40 Curation & Curation Pool Algorithm

A major product requirement was to balance news localization: exactly 60% of the content must be India-centric, while 40% focuses on Global updates.

To implement this, I built a custom pooling algorithm that pulls from multiple NewsAPI streams, categorizes them, separates them into India vs. World pools, and applies dynamic sizing. If the live feed has a shortage of articles, it gracefully backfills the remainder from cached fallbacks, ensuring the newsletter layout is always balanced.

Here is the core news mixing algorithm (newsService.js):

const mixIndiaAndWorld = (liveArticles, min, max, categorizeFn, fallbackFn) => {
  const cleanArticles = (liveArticles || []).filter(a => 
    a.title && a.title !== '[Removed]' && a.description && a.url
  );

  const seenTitles = new Set();
  const uniqueLive = [];

  for (const a of cleanArticles) {
    const titleNorm = a.title.toLowerCase().trim();
    if (seenTitles.has(titleNorm)) continue;
    seenTitles.add(titleNorm);

    const cat = categorizeFn(a.title + ' ' + (a.description || ''));
    uniqueLive.push({
      title: a.title,
      description: a.description || 'Click to read full article.',
      url: a.url,
      urlToImage: a.urlToImage || getCategoryStockImage(cat),
      source: a.source?.name || 'News Source',
      publishedAt: a.publishedAt || new Date().toISOString(),
      category: cat,
      isIndia: isIndiaRelated(a.title, a.description, a.source?.name)
    });
  }

  const liveIndia = uniqueLive.filter(a => a.isIndia);
  const liveWorld = uniqueLive.filter(a => !a.isIndia);

  // Determine dynamic count C based on news availability
  let C = Math.min(Math.max(uniqueLive.length, min), max);

  const targetIndiaCount = Math.round(C * 0.6);
  const targetWorldCount = C - targetIndiaCount;

  // Fetch fallbacks if live news is short
  const allFallbacks = fallbackFn(50);
  const fallbackIndia = allFallbacks.filter(f => f.isIndia);
  const fallbackWorld = allFallbacks.filter(f => !f.isIndia);

  const finalIndia = fillPool(liveIndia, fallbackIndia, targetIndiaCount, seenTitles);
  const finalWorld = fillPool(liveWorld, fallbackWorld, targetWorldCount, seenTitles);

  const combined = [...finalIndia, ...finalWorld];

  // Sort India-related to the top
  return combined.sort((a, b) => (a.isIndia && !b.isIndia ? -1 : 1));
};

2. Fallback Image System (Zero Gray Boxes)

A common problem in aggregators is missing images from news feeds, leaving ugly gray boxes on dashboards or emails.

NexBrief solves this by binding high-resolution, topic-relevant Unsplash images dynamically based on article subtopics (e.g. AI, Science, Cybersecurity, Software, Cloud). If the publisher provides no image, the system automatically injects a beautiful themed placeholder.

3. Bypassing SMTP Blocks with HTTP Email Delivery

Many popular cloud hosting providers (like Render) block standard SMTP outbound ports (25, 465, 587) by default. This prevents node-mailer from connecting to SMTP servers.

To bypass this restriction, I designed the system to communicate directly with Brevo using its Transactional HTTPS REST API over Port 443 instead of traditional SMTP. This guarantees 100% email delivery.

Here is the sender service integration (emailService.js):

const fetch = require('node-fetch');

const sendEmailViaAPI = async ({ toEmail, toName, subject, htmlContent }) => {
  const BREVO_API_URL = 'https://api.brevo.com/v3/smtp/email';

  try {
    const response = await fetch(BREVO_API_URL, {
      method: 'POST',
      headers: {
        'accept': 'application/json',
        'api-key': process.env.BREVO_API_KEY,
        'content-type': 'application/json',
      },
      body: JSON.stringify({
        sender: {
          name: process.env.FROM_NAME || 'NexBrief Daily',
          email: process.env.FROM_EMAIL,
        },
        to: [{ email: toEmail, name: toName }],
        subject: subject,
        htmlContent: htmlContent,
      }),
    });

    const data = await response.json();
    if (!response.ok) {
      throw new Error(data.message || 'Brevo API Send Failure');
    }
    return data;
  } catch (error) {
    console.error(`❌ Send Failure to ${toEmail}:`, error.message);
    throw error;
  }
};

4. Interactive Glassmorphic Admin Dashboard

Admins have access to a secure, password-guarded control panel built with glassmorphism aesthetics. The panel allows:

Real-time monitoring of user subscription statuses (Active vs Paused).
Manually triggering a global digest or test dispatch.
Administrative privileges configuration (promoting or demoting admins).
Deleting accounts permanently to clean up expired or inactive subscriptions.

📈 SEO & Discoverability

To ensure rapid search engine discoverability on subdomains, NexBrief is shipped with verified sitemaps and crawling permissions (robots.txt and sitemap.xml) which are submitted and successfully tracked by Google Search Console.

🚀 Check It Out

Live Application: https://nexbrief-news.onrender.com
GitHub Repository: GitHub Link
My Portfolio: https://md-rounaq-ali.netlify.app

If you'd like to support the project, please leave a ⭐ on the GitHub repository and sign up to receive your first brief tomorrow morning! I'd love to hear your feedback in the comments.

How I Built VoxCalc — An AI-Inspired Next-Gen Calculator with Flutter, Google ML Kit & Voice NLP

Md Rounaq Ali — Sun, 31 May 2026 16:25:08 +0000

TL;DR: I built a cross-platform scientific calculator in Flutter that lets you speak math equations out loud, point your camera at handwritten formulas, and watch them get solved instantly. Here's exactly how I did it.

🎯 Why I Built This

As a B.Tech CSE student, I was tired of building the same CRUD apps for my portfolio.

Everyone has a to-do list. Everyone has a weather app. I wanted to build something that genuinely impressed technical interviewers and showed I could work with AI APIs, device hardware, and complex state management — all at once.

So I built VoxCalc — a mathematical computational suite that combines:

🎙️ Voice-to-Math: Speak "what is 15 percent of 340" and get the answer
📸 Camera OCR: Point at a handwritten equation → it solves it
📈 2D Graph Plotter: Visualize any algebraic function with multi-touch zoom
💱 Currency Converter: Live exchange rates via REST API

Here's what I learned building it from scratch.

🛠️ The Tech Stack

Framework:     Flutter 3.x (Dart)
Architecture:  Clean Architecture (Feature-First)
AI / ML:       Google ML Kit (Text Recognition v2)
Voice:         speech_to_text package (NLP)
State Mgmt:    Provider / Riverpod
APIs:          Open Exchange Rates REST API
Storage:       flutter_secure_storage
Build:         Gradle with R8/Proguard minification

🏗️ Architecture: Why Feature-First Clean Architecture?

Most Flutter tutorials show you lib/screens/ and lib/widgets/. That works for demos. It breaks for real apps.

I used Feature-First Clean Architecture, which separates every feature into its own isolated module:

lib/
├── core/
│   ├── theme/
│   ├── utils/
│   └── constants/
├── features/
│   ├── calculator/
│   │   ├── data/
│   │   ├── domain/
│   │   └── presentation/
│   ├── voice_input/
│   │   ├── data/
│   │   ├── domain/
│   │   └── presentation/
│   ├── ocr_scanner/
│   │   ├── data/
│   │   ├── domain/
│   │   └── presentation/
│   ├── graph_plotter/
│   └── currency_converter/
└── main.dart

Why this matters: Each feature can be developed, tested, and deployed independently. When I added the currency converter 2 weeks after the core calculator, I didn't touch a single existing file.

🎙️ Feature 1: Voice-to-Math NLP Engine

This was the most exciting feature to build. The goal: convert natural spoken language into a solvable math expression.

The Challenge

speech_to_text gives you raw text like:

"what is fifteen percent of three hundred and forty"

That's useless to a math parser. You need:

340 * 0.15

My Solution: A Custom NLP Preprocessor

I wrote a Dart utility class that maps English phrases to mathematical operators:

class MathNLPParser {
  static const Map<String, String> _wordMap = {
    'plus': '+',
    'minus': '-',
    'times': '*',
    'multiplied by': '*',
    'divided by': '/',
    'percent of': '* 0.01 *',
    'squared': '^ 2',
    'square root of': 'sqrt(',
  };

  static String parse(String spokenText) {
    String expression = spokenText.toLowerCase();

    // Replace word numbers with digits
    expression = _replaceWordNumbers(expression);

    // Replace operator phrases
    _wordMap.forEach((word, operator) {
      expression = expression.replaceAll(word, operator);
    });

    // Clean up and validate
    expression = expression.replaceAll(RegExp(r'[^0-9+\-*/.()^\s]'), '').trim();

    return expression;
  }
}

Then I pass this cleaned expression to a math evaluation engine to get the result.

The UX Touch

While the user is speaking, I render a live audio waveform animation using a custom painter that reads microphone amplitude values in real time. This makes the feature feel futuristic and gives users confidence the app is listening.

📸 Feature 2: Camera OCR Scanner (On-Device, 100% Offline)

Using Google ML Kit Text Recognition v2, I built a live camera scanner that detects handwritten or printed mathematical expressions and solves them instantly.

Setup

# pubspec.yaml
dependencies:
  google_mlkit_text_recognition: ^0.11.0
  camera: ^0.10.5

The Core Scanner Logic

class OcrScannerService {
  final textRecognizer = TextRecognizer(
    script: TextRecognitionScript.latin,
  );

  Future<String?> recognizeFromImage(InputImage image) async {
    try {
      final RecognizedText result = await textRecognizer.processImage(image);

      // Extract only math-relevant characters
      String raw = result.text;
      String cleaned = _extractMathExpression(raw);

      return cleaned.isNotEmpty ? cleaned : null;
    } catch (e) {
      debugPrint('OCR Error: $e');
      return null;
    }
  }

  String _extractMathExpression(String raw) {
    // Keep only digits, operators, and math symbols
    return raw
      .replaceAll('×', '*')
      .replaceAll('÷', '/')
      .replaceAll(RegExp(r'[^0-9+\-*/().=\s]'), '')
      .trim();
  }
}

Why On-Device Processing Matters

I specifically chose ML Kit over cloud OCR APIs (like Google Vision API) because:

✅ Zero latency — no network round trip
✅ Privacy — user's handwriting never leaves their device
✅ Works offline — functions in airplane mode
✅ Free — no API billing ever

📈 Feature 3: Real-Time 2D Algebraic Graph Plotter

This was the most technically complex feature. I built a custom CustomPainter that renders mathematical functions as smooth curves on a coordinate grid.

class GraphPainter extends CustomPainter {
  final String expression;
  final double scale;
  final Offset offset;

  GraphPainter({
    required this.expression,
    required this.scale,
    required this.offset,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2 + offset.dx, 
                          size.height / 2 + offset.dy);

    // Draw coordinate axes
    _drawAxes(canvas, size, center);

    // Plot the function
    _plotFunction(canvas, size, center);
  }

  void _plotFunction(Canvas canvas, Size size, Offset center) {
    final paint = Paint()
      ..color = const Color(0xFF00E5FF)  // Neon cyan
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke;

    final path = Path();
    bool firstPoint = true;

    // Sample function at every pixel along x-axis
    for (double px = 0; px < size.width; px++) {
      double x = (px - center.dx) / scale;
      double? y = _evaluateAt(expression, x);

      if (y == null || y.isNaN || y.isInfinite) {
        firstPoint = true;
        continue;
      }

      double py = center.dy - (y * scale);

      if (firstPoint) {
        path.moveTo(px, py);
        firstPoint = false;
      } else {
        path.lineTo(px, py);
      }
    }

    canvas.drawPath(path, paint);
  }
}

I also implemented multi-touch pinch-to-zoom and pan gestures using GestureDetector to give users a native-feeling interactive graph experience.

🔒 Security & Build Optimization

Secure Storage

For saving user preferences and API keys, I used flutter_secure_storage which encrypts data using platform-native keystore (Android Keystore / iOS Keychain):

final storage = const FlutterSecureStorage();

// Write
await storage.write(key: 'api_key', value: userApiKey);

// Read
String? key = await storage.read(key: 'api_key');

R8/Proguard Minification

In android/app/build.gradle, I enabled R8 code shrinking for the release build:

buildTypes {
    release {
        minifyEnabled true
        shrinkResources true
        proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'),
                      'proguard-rules.pro'
    }
}

This reduced the APK size by ~40% and made reverse engineering significantly harder.

🎨 UI Design Philosophy

I went with a dark glassmorphism theme with neon cyan highlights (#00E5FF). The design principle was: "make it feel like something from 2030".

Key UI decisions:

120 FPS micro-animations on button press using AnimatedScale
Custom slide-out drawer for feature navigation (instead of a boring tab bar)
Tactile haptic feedback on every key press using HapticFeedback.lightImpact()
Futuristic monospace font (JetBrains Mono) for the result display

🚀 What I Learned

Clean Architecture pays off immediately — when I added the currency converter, it took 4 hours, not 4 days
On-device ML is the future — no latency, no cost, better privacy
Custom painters are powerful — Flutter's canvas API can render anything you imagine
NLP is hard but solvable — even simple regex + word maps get you 80% of the way there
Security is not optional — even a calculator app handles user data that deserves encryption

📦 Check It Out

🌐 Portfolio: md-rounaq-ali.netlify.app
💻 GitHub: github.com/md-rounaq-ali/VoxCalc
💼 LinkedIn: linkedin.com/in/md-rounaq-ali

💬 What's Next?

I'm currently exploring adding:

LaTeX rendering for displaying complex mathematical notation
Step-by-step equation solver showing all working steps
Wolfram Alpha API integration for symbolic math

If you found this useful, drop a ❤️ or share it! I'm a B.Tech CSE student from Hyderabad actively looking for Flutter internship opportunities — feel free to connect on LinkedIn!