DEV Community: Hulya

Building a Voice-Enabled AI Coach with Real Esports Data

Hulya — Wed, 28 Jan 2026 09:20:28 +0000

I built an AI coaching tool for the hackathon that analyzes esports match data and responds with voice. Most of the work went into prompt engineering and fixing API issues. This post covers what I built, what broke, and how I fixed it.

Why This Matters

Professional esports teams like Cloud9 have analysts reviewing hundreds of hours of footage. They track player tendencies, draft patterns, objective timing. Most of this remains manual - someone watching VODs and taking notes.

GRID provides detailed match data for every professional League of Legends and VALORANT game. The missing piece is turning that data into coaching conversations. A spreadsheet showing 22% gank success rate doesn't tell a jungler what to change. A coach saying "you're forcing top lane ganks when your bot lane setups work twice as often" does.

I built an AI that takes match data and explains it like a coach would.

What I Built

Zenith pulls match data from GRID's esports API, analyzes patterns, and responds to questions with voice. Ask "what went wrong this game?" and it returns a spoken answer referencing specific players and moments.

The hackathon required personalized player insights, automated macro game review, and hypothetical outcome predictions. I prioritized making insights conversational rather than just accurate.

AI Model Issues

I started with AWS Bedrock using Amazon Nova Micro for cost reasons. The first version failed entirely. Nova requires a different API format than Claude - it needs the Messages API format with an inferenceConfig block instead of standard parameters. I spent hours debugging before finding this.

After fixing the format, responses were still generic. Statements that could apply to any match. I rewrote prompts several times. The fix was being specific about tone: "Talk like a coach reviewing film with the team. No bullet points. Reference players by name. Be direct about what went wrong."

Then I hit Bedrock rate limits during testing. Deadline approaching, I added Anthropic Claude as a fallback:

async def get_coaching_response(self, prompt: str, context: dict) -> str:
    try:
        return await self.bedrock_client.invoke(prompt, context)
    except RateLimitError:
        return await self.anthropic_client.invoke(prompt, context)

The system tries Bedrock first, falls back to Anthropic if rate limited, and uses pre-written responses if both fail. I added support for multiple Bedrock models (Claude, Llama, Titan, Nova) with automatic format detection.

Making the Coach Useful

The first version had problems. Ask about a specific player, get a generic team overview. Ask the same question twice, get identical responses with the same intro paragraph.

I fixed these over several iterations:

Player name recognition. Ask "how did Skuba play?" and it looks up that player's stats instead of summarizing the team.

Context awareness. Tracks conversation history. Skips the intro on follow-up questions.

Query patterns. Different question types trigger different response structures - mistakes vs MVP vs player comparisons.

Champion and role data. Responses include each player's champion and role for relevant advice.

Prompt engineering took longer than writing code. Making an AI sound like a coach instead of an encyclopedia requires precise instructions.

Voice Integration

I added ElevenLabs because coaches multitask and can't always read.

First version was slow. Question → 2-3 seconds for AI → 3-4 seconds for audio generation. Six seconds total.

I switched to ElevenLabs' turbo model, cutting audio generation to under one second. I limited responses to 500 characters with sentence boundary detection to avoid mid-thought cutoffs. Added caching so repeated questions play instantly.

if len(clean_text) > 500:
    truncated = clean_text[:500]
    last_period = truncated.rfind('.')
    if last_period > 300:
        clean_text = truncated[:last_period + 1]

GRID Data Integration

GRID provides official data for professional League of Legends and VALORANT matches - actual game data, not scraped estimates.

The data includes objective timestamps, fight locations, and gold leads at any point. This is what coaches analyze manually.

The API has two parts: GraphQL for tournament metadata, File Download for match events as JSONL. Some GraphQL endpoints returned UNAUTHENTICATED with a valid key, so I added fallback to the File Download API.

Data structure varies between endpoints. Player assists appear at participant.stats.killAssistsGiven or player.assists depending on the source. I wrote a normalization layer to handle this.

Pattern Detection

The hackathon required insights like "jungler ganks top lane pre-6 with 22% success rate." I built tracking by lane and game phase:

class GankOutcome(Enum):
    SUCCESS_KILL = "success_kill"
    SUCCESS_FLASH = "success_flash"
    FAILURE_DEATH = "failure_death"
    FAILURE_COUNTER = "failure_counter"

class TimePeriod(Enum):
    PRE_6 = "pre_6"
    MID_GAME = "mid_game"
    LATE_GAME = "late_game"

I also built isolated death tracking - deaths with no teammates nearby. This identifies patterns like "team loses 85% of games with 5+ isolated deaths in mid-game."

What-If Analysis

I built a scenario engine for questions like "what if we contested that Baron?" It classifies the situation, finds similar historical cases, and calculates success probability with confidence intervals.

VOD Review Agenda

The system generates timestamped review agendas. It identifies objective contests, teamfights with large gold swings, poor rotations, and isolated deaths. Each item includes timestamp, description, optimal play, and priority level.

Junie Usage

I used Junie in PyCharm throughout the hackathon.

Bedrock debugging: I described the error and Junie identified the Nova API format differences. It pointed me to the inferenceConfig structure I was missing.

GRID API client: I requested an async client with pagination and rate limiting. Junie generated working code with aiohttp, retry logic using tenacity, and error handling for different HTTP status codes. It matched my existing code style.

ElevenLabs integration: Junie built text preprocessing (removing markdown, emojis, URLs), sentence boundary detection, and two API routes for file generation and streaming.

Map bug: My React component broke due to Map from lucide-react shadowing JavaScript's Map. I spent 10 minutes confused. Junie identified the issue and suggested renaming the import to MapIcon.

Pattern detection: Junie generated the enum classes and dataclasses. I wrote the analysis logic.

Problems: progress output is verbose, history disappeared when switching to Claude, can't accept partial suggestions. The context awareness still saved time.

React Hydration Errors

The frontend had hydration errors from React rendering different content on server vs client. I fixed this by adding 'use client' to chart components and resolving the Map import collision.

Vercel builds failed initially. I fixed import paths and Turbopack config for path aliases.

Future Development

Zenith currently works with historical match data. Next would be live game integration - coaches asking questions during scrims with immediate analysis.

Pattern detection could expand to draft analysis: comparing team performance across compositions and identifying impactful bans.

For organizations like Cloud9 with multiple teams, this could standardize how coaching insights get documented and shared.

Retrospective

I should have added voice earlier - it changed how the product felt.

I should have written data normalization first. I kept hitting inconsistent data shapes throughout development.

I should have talked to actual coaches. I made assumptions about usefulness that may be wrong.

Stack

Next.js 16 / React 19 / TypeScript
Python 3.12 / FastAPI
AWS Bedrock (Nova, Claude) with Anthropic fallback
ElevenLabs turbo model
GRID Esports API
PyCharm + Junie

Conclusion

The hardest part wasn't the code. It was getting the AI to say something useful instead of generic summaries. Prompt engineering and API debugging took more time than building features.

Voice output made the tool more practical for actual coaching use. GRID's data made real analysis possible. Junie helped with the repetitive parts.

The project works. Whether coaches would actually use it requires testing with real users, which I didn't do. That's the main gap.

ToddlerBites: The Meal Planning App for Everyone Feeding a Toddler

Hulya — Mon, 29 Dec 2025 15:18:48 +0000

This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux

What I Built

ToddlerBites is a meal planning and tracking app for anyone feeding a toddler — parents, nannies, daycare workers, and grandparents. It focuses on the multi-caregiver problem: keeping everyone informed about what a child ate.

Demo

Live Demo

I couldn't publish to the App store yet. For now, use the demo account to try it out!

The Story Behind It

Parents deal with picky eaters, allergies, and limited time every day.

The harder part: when multiple caregivers are involved, no one knows:

What the kid already ate today
What they liked or refused
Which ingredients to avoid (allergies, textures, dislikes)

This leads to repeated meals, unsafe food choices, and constant texting between caregivers asking "what did she eat for lunch?"

I built this because I had this problem.

The Solution

ToddlerBites keeps all caregivers on the same page. One app. Shared history.

Features

Multi-Child Profiles

Save each child's allergies, dislikes, texture preferences (smooth, chunky, mixed), and age group. Recipe suggestions filter automatically based on these settings. Supports multiple toddler profiles per user.

Meal Logging & History

Log what they ate, how much (none/some/most/all), and their reaction (loved it, tried it, refused). Rate meals 1-5 stars and add notes. All caregivers see the same timeline.

Recipe Discovery

Browse 30+ toddler-friendly recipes filtered by:

Allergies (gluten, dairy, nuts, eggs, etc.)
Meal type (breakfast, lunch, dinner, snack)
Prep time (10-min meals to longer weekend cooking)
Difficulty (easy, medium, hard)
Texture preferences

Pantry Tracking

Track what ingredients you have at home across categories:

Produce, Protein, Dairy, Grains, Snacks, Condiments

Filter recipes by "pantry only" to find meals you can make without shopping.

AI Recipe Generation

Generate custom recipes based on:

Your pantry ingredients
Your child's allergies and preferences
Time available
Meal type

Uses OpenAI to create recipe suggestions for your specific situation.

Voice Read-Aloud

Listen to cooking instructions hands-free via ElevenLabs text-to-speech. Four voice options:

Rachel (female, default)
Adam (male)
Bella (female)
Josh (male)

Shopping Lists

Generate shopping lists from recipe ingredients. Items grouped by category. Check off items as you shop.

Favorites

Save recipes your toddler likes. Filter by child.

What Makes It Different

Most meal planning apps target adults. ToddlerBites addresses:

Toddler-specific needs — picky eaters, texture sensitivities, small portions, choking hazard awareness
Multi-caregiver access — parents, nannies, daycare, grandparents all see the same data
Allergy filtering — every recipe filters against the child's allergies

How It Works

Create a profile for your toddler with allergies, dislikes, and texture preferences
Browse recipes or generate AI suggestions from your pantry
Use voice read-aloud while cooking
Log meals after feeding — track portions and reactions
All caregivers see the same meal history

Tech Stack

Layer	Technology
Frontend	Flutter (iOS, Android, Web)
Navigation	go_router
State Management	Provider
Backend	Firebase (Auth, Firestore, Cloud Functions)
Analytics	Firebase Analytics + Crashlytics
Payments	RevenueCat
AI	OpenAI API (GPT-4 for recipe generation, Whisper for voice transcription)
Voice TTS	ElevenLabs
Fonts	Google Fonts (Poppins)

Architecture

Firebase Auth for Google/Apple/Email sign-in
Firestore for real-time data sync across caregivers
Local storage (shared_preferences) for offline access
RevenueCat for subscription management

Challenges & Solutions

Challenge	Solution
Ingredient Matching	Fuzzy matching for variations (plural forms, "cheddar" → "cheese")
Multi-Caregiver Sync	Firebase real-time listeners
Voice Integration	ElevenLabs with offline audio caching
Allergy Safety	Strict filtering that blocks unsafe recipes
UI for Busy Parents	Large tap targets, minimal steps

Roadmap

[ ] Shared family accounts — Multiple caregivers on one subscription
[ ] Nutrition tracking — Daily nutrient intake monitoring
[ ] Meal planning calendar — Plan weekly meals
[ ] Daycare integration — Providers log meals directly
[ ] Pediatrician reports — Export eating patterns

If you're feeding a toddler, let me know what you think in the comments.

From Specs to Spooky: Using Kiro to Build My AI Psychic Hotline

Hulya — Mon, 17 Nov 2025 06:18:32 +0000

For a Halloween-themed hackathon, I decided to build AI Psychic Hotline – a web app where you choose a “realm,” ask a question, the system draws tarot cards, and an AI “psychic” generates a themed fortune that you can read (and optionally listen to) in a Halloween-inspired interface.

Instead of jumping straight into ad-hoc coding, I tried to use Kiro’s spec-driven workflow end to end: PRD → SRS → SDD → Kiro spec → implementation → quality checks.

This post walks through how I used Kiro’s features – spec-driven development, vibe coding, steering docs, hooks, and MCP – to keep the project structured and consistent.

Demo Link: https://ai-psychic-hotline.vercel.app/

Project images

Starting with specs: PRD, SRS, SDD

Before writing code, I created three documents:

PRD (Product Requirements Document)
High-level goals: what the app should do, core flows, target users, and hackathon constraints.
SRS (Software Requirements Specification)
Detailed functional and non-functional requirements, written using the EARS pattern and following INCOSE-style quality rules (clear, testable, focused requirements).
SDD (Software Design Document)
Architecture and design: Next.js App Router, tarot data model, LLM integration, API routes, and error handling strategy.

Example EARS-style requirement from the SRS:

WHEN the user submits a valid question, THE SYSTEM SHALL generate a new reading by drawing 3–5 tarot cards and calling the LLM to produce a fortune based on the cards and the question.

Once these documents were in place, I fed them into Kiro.

From documents to Kiro spec

My first step with Kiro was spec-driven, not code-driven.

I asked it to:

“Take this PRD, SRS, and SDD for AI Psychic Hotline and turn them into a Kiro spec using your spec-driven development flow.”

Kiro created a project spec under:

.kiro/specs/ai-psychic-hotline/
  requirements.md
  design.md
  tasks.md

`requirements.md`

Kiro combined the PRD and SRS into a requirements document with EARS-style requirements and user stories covering:

Text-based question input
Optional voice input (STT)
Tarot spreads with three realms
LLM-based fortune generation
Optional TTS playback
Movie-style or story-style recommendations aligned with the reading
A simple “fate meter” interaction
Privacy and error handling

`design.md`

It then turned the SDD into a design document that described:

Next.js App Router architecture
A TarotDeck module and FortuneService
The POST /api/fortune contract (request and response structure)
Data models for cards and readings
A service-layer approach (business logic outside React components)
Error handling and basic security considerations
Integration of a 3D fog background using something like Vanta.js

`tasks.md`

Finally, it generated a task list with a logical order:

Project setup
Tarot data and TypeScript types
Backend services and endpoints
UI components
Optional voice features (STT/TTS)
Optional “movie oracle” integration
Visual and atmospheric polish
Tests and documentation

This turned my initial documents into something Kiro could follow step by step.

Spec-driven development vs. vibe coding

Once the spec was ready, I used two different working styles with Kiro: strict, spec-driven implementation for core logic, and more relaxed “vibe coding” for UI and copy.

Spec-driven: backend and contracts

For backend code and data contracts, I stayed close to the spec. Examples of prompts:

“Implement the TarotDeck module and Card type exactly as defined in design.md under Data Model.”
“Create the POST /api/fortune endpoint according to the API contract in the design document.”

Kiro generated:

TypeScript types for Card and ReadingResponse
A TarotDeck that loads card definitions and draws a small spread without duplicates
A Next.js API route for /api/fortune that:
- validates the question
- draws cards
- builds an LLM prompt from the cards and question
- returns { cards, fortune, movieRecommendation? } as JSON

Using the design document as the source of truth meant I didn’t have to keep re-explaining shapes and data; I just asked Kiro to “follow the spec.”

Vibe coding: UI, microcopy, and interactions

For the frontend and overall feel of the app, I used a more conversational, iterative approach:

“Generate React components for the question input, tarot spread, and fortune view wired to /api/fortune.”
“Write short, on-theme microcopy for labels, placeholders, and error messages.”
“Add a simple card reveal animation that feels responsive but not distracting.”
“Integrate a subtle 3D fog background behind the main panel.”

This “vibe coding” style worked well for layout, transitions, and tone. The spec ensured structure, while the conversation with Kiro let me experiment quickly with presentation and copy.

Steering docs: controlling style and behavior

Kiro has strong defaults (for example, it likes purple for UI). That didn’t match the Halloween palette I wanted, so I introduced steering docs.

UI steering

I created a colors and typography steering file that defined the palette and fonts. For example:

:root {
  --background: #0a0a0a;
  --foreground: #ededed;
  --accent-primary: #f97316;   /* orange */
  --accent-secondary: #a3e635; /* green */
}

And I added explicit guidance:

Don’t use purple/violet/fuchsia or Tailwind purple-* / violet-* classes.
Use the accent colors above for highlights and borders.
Use serif headings for titles and sans-serif for body text.

Whenever Kiro generated or refactored UI, I reminded it to follow this steering doc. That helped keep the visual language consistent: dark background, orange/green accents, and typography that fit the theme.

Persona steering

I also wrote a short steering doc for the “psychic” persona. Key points:

Fortunes should be 3–6 sentences, within a reasonable word limit.
They should reference the drawn cards by name.
The tone should change slightly depending on the chosen realm (Love, Fate, Shadows).
No literal claims about real-world outcomes (e.g., health, lottery, etc.).

Kiro then used this to shape the LLM system prompt and example outputs. This reduced the amount of manual tweaking I had to do to keep the “voice” consistent.

Engineering conventions

A third steering doc captured some simple engineering guidelines:

Business logic should live in services, not React components.
API contracts shouldn’t be changed casually; if they change, update the spec first.
Use TypeScript strictly (no any where a proper type is possible).

Together, these steering docs gave Kiro a clear set of constraints and preferences. The result was less drift in style and structure as the project evolved.

Agent hooks: automation for safety and feedback

As the project grew, I used agent hooks to have Kiro react to certain file changes automatically.

A typical pattern was:

Trigger: On save of files in src/services/** or tarot-related modules.
Action: Run tests and simple smoke tests that:
- call /api/fortune with a sample question
- verify the response includes cards and a fortune in the expected shape

This meant that when Kiro refactored FortuneService or tarot logic, the hook would automatically run checks and surface problems without me having to remember to run commands manually.

It’s not full-blown CI, but for a hackathon-scale project it was enough to catch obvious regressions early.

MCP tools: project-specific quality checks

Traditional tests tell you whether the code runs and returns the right structure. For this project, I also cared about more qualitative aspects: Are fortunes too long? Do they mention the cards? Are realm tones consistent?

To address this, I experimented with MCP tools as a kind of domain-specific quality layer:

A tarot deck validator that checks tarot.json for missing data or inconsistencies.
A fortune quality checker that:
- samples fortunes
- checks the length against persona guidelines
- looks for card names in the text
- evaluates basic tone consistency per realm

These tools flagged issues that unit tests didn’t. For example, an early version of the fortune generator produced text that was structurally correct but too long and verbose. Using MCP, I could measure average length and compliance with the 3–6 sentence rule, then adjust the prompt and token limits and re-check.

This made quality feel less subjective and provided feedback that fit the specific needs of this app.

Atmosphere and UX

Once the main functionality was in place, I used Kiro to help refine the user experience so it felt more like a focused “reading space” than a generic form:

A realm selection step before the question, with short descriptions of Love, Fate, and Shadows.
A simple question screen with on-theme copy (e.g., a more descriptive placeholder rather than just “Enter question”).
Small touches such as:
- “Shuffling the deck…” while the cards are being drawn
- “The spirits are silent. Try again in a moment.” for error states
- A basic “fate meter” interaction where the user can choose to accept or defy the reading

These are not complex features individually, but together they make the experience more coherent and intentional.

Takeaways

Working with Kiro on this project felt less like using a single “code generation button” and more like collaborating with a tool that understood structure, style, and workflow.

In practice, I used Kiro in a few distinct ways:

Spec-driven development: Turning PRD/SRS/SDD into requirements.md, design.md, and tasks.md and then implementing core logic from that spec.
Vibe coding: Iterating on UI components, microcopy, and subtle interactions through conversational prompts.
Steering docs: Controlling visual design, tone of voice, and coding conventions so generated output stayed consistent.
Agent hooks: Automating tests and smoke checks after certain changes, which made refactoring safer.
MCP tools: Adding domain-specific quality checks that go beyond “does this compile” or “does this return JSON.”

For a hackathon project, this approach was surprisingly effective at keeping things organized and on-theme without losing the ability to iterate quickly.

If I repeat this pattern on another project, I’ll likely follow the same steps: start with lightweight specs, let Kiro build a project spec and tasks, add steering docs early, and then layer on hooks and MCP tools as the core features solidify.

Forked A/B Index Optimizer: Making Database Optimization Accessible to Everyone

Hulya — Fri, 07 Nov 2025 13:51:23 +0000

This is a submission for the Agentic Postgres Challenge with Tiger Data

I didn't know you could A/B test database indexes!

Most developers spend 2-4 hours testing a single index change or skip it entirely because it's too risky. I built Forked A/B Index Optimizer to change that.

Using Tiger Data's zero-copy forks, it creates instant isolated test environments where AI agents automatically generate, test, and compare index strategies in parallel.

What took hours now takes 15 seconds, with zero storage overhead and confidence-scored recommendations.

The Problem

Database index optimization is stuck in the past:

Risky: Wrong indexes break performance
Time-consuming: Testing requires separate environments, benchmarks, result comparison
Expert-only: Most developers leave it to DBAs
Guesswork: Even experts rely on intuition over data

The traditional workflow:

Export production database → 30 minutes
Set up test environment → 20 minutes
Create test indexes → 10 minutes
Run benchmarks (3 iterations) → 45 minutes
Compare results manually → 15 minutes
Clean up → 10 minutes

Total: 2-4 hours per attempt. Most developers skip this entirely.

The Solution

Forked A/B Index Optimizer automates the entire process:

Paste your queries → AI analyzes patterns and generates two competing index strategies
Zero-copy forks → Creates two isolated test environments in under a second
Parallel testing → Both strategies tested simultaneously with identical workloads
Visual comparison → Clear performance charts with confidence-scored recommendations
Safe deployment → Apply the winning strategy with evidence-backed certainty

Total: 8-15 seconds end-to-end. No manual setup. No production risk. No DBA required.

What Inspired Me

The inspiration came from A/B testing in web development. We routinely A/B test button colors, headlines, and layouts to make data-driven decisions. The same approach should work for database indexes.

Tiger Data's zero-copy forks create instant isolated test environments with no storage overhead. Combined with AI agents that generate strategies, run tests, and analyze results, this makes database optimization practical for any developer.

Demo Links

Live Demo: https://forked-a-b-index-optimizer.up.railway.app/
GitHub Repository: https://github.com/hulyak/forked-A-B-Index-Optimizer

Screenshots

Main Interface

The interface shows the value proposition and indicates Tiger Data's Agentic Postgres integration.

Agent Coordination in Action

Watch three AI agents coordinate in real-time: the Orchestrator manages workflow, IndexTuner generates strategies, and Validator runs performance tests.

Performance Comparison

Visual comparison shows Strategy B (composite indexes) outperforming Strategy A (single-column indexes) by 43%.

AI Recommendation with Confidence Score

The system provides confidence-scored recommendations with clear reasoning and estimated impact.

Hybrid Search Insights

Hybrid search combines BM25 (pg_textsearch) and vector similarity (pgvector) to find similar optimization patterns from historical data.

Try it now without credentials:

Toggle "Demo Mode" ON for simulated testing (works without Tiger Cloud)
Toggle "Demo Mode" OFF to see real Tiger Cloud integration

Use these queries to test the optimizer:

-- Query 1: Simple WHERE clause
SELECT * FROM users WHERE email = 'test@example.com';

-- Query 2: WHERE + ORDER BY
SELECT * FROM orders WHERE status = 'completed' ORDER BY created_at DESC;

-- Query 3: JOIN with filtering
SELECT u.name, COUNT(o.id)
FROM users u
JOIN orders o ON u.id = o.user_id
WHERE o.created_at > '2024-01-01'
GROUP BY u.name;

-- Query 4: Complex with multiple filters
SELECT *
FROM products
WHERE category = 'electronics'
  AND price > 100
  AND inventory > 0
ORDER BY price DESC
LIMIT 20;


-- Query 5: Complex JOIN with aggregation**

SELECT u.name, u.city, COUNT(o.id) as order_count, SUM(o.total_amount) as total_spent
FROM users u
JOIN orders o ON u.id = o.user_id
WHERE o.created_at > '2024-01-01'
  AND o.status = 'completed'
GROUP BY u.id, u.name, u.city
HAVING COUNT(o.id) > 2
ORDER BY total_spent DESC
LIMIT 50;

-- **Query 6: Multiple JOINs**

SELECT
    p.name as product_name,
    p.category,
    SUM(oi.quantity) as total_sold,
    SUM(oi.quantity * oi.unit_price) as revenue
FROM products p
JOIN order_items oi ON p.id = oi.product_id
JOIN orders o ON oi.order_id = o.id
WHERE o.status = 'completed'
  AND o.created_at > '2024-01-01'
GROUP BY p.id, p.name, p.category
ORDER BY revenue DESC
LIMIT 25;

How I Used Agentic Postgres

The application architecture is built entirely around Agentic Postgres features:

I built this application using three Agentic Postgres features: zero-copy forks, MCP coordination, and hybrid search.

1. Zero-Copy Forks: The Foundation

I use database forks as temporary test environments, not as backup copies. Each optimization creates two forks where different index strategies run tests in parallel, then auto-delete.

How It Works:

Each optimization spawns two isolated forks (Strategy A vs Strategy B). Both start with identical data, run tests in parallel, and auto-delete when done.

// Create competing test environments
const forkA = await tigerService.createFork(`${jobId}-strategy-a`);
const forkB = await tigerService.createFork(`${jobId}-strategy-b`);

// Apply different strategies
await validator.applyIndexStrategy(forkA.connectionString, strategies.strategyA);
await validator.applyIndexStrategy(forkB.connectionString, strategies.strategyB);

// Test both in parallel
const [resultsA, resultsB] = await Promise.all([
  validator.runPerformanceTests(forkA.connectionString, queries),
  validator.runPerformanceTests(forkB.connectionString, queries)
]);

// Cleanup automatically (even on errors)
await Promise.all([
  tigerService.deleteFork(forkA.forkName),
  tigerService.deleteFork(forkB.forkName)
]);

Why This Works:

Traditional Copies	Zero-Copy Forks
30+ minutes to create	<1 second
Full storage duplication	$0 storage cost (copy-on-write)
Manual cleanup required	Auto-delete after testing
Risk of orphaned databases	Crash-safe cleanup

Fast, free forks mean developers can test index changes without worrying about time or storage costs.

I haven't seen another tool using database forks for parallel optimization testing.

2. Tiger MCP: Multi-Agent Orchestration

The Setup: One MCP server, 7 specialized tools, 3 coordinating agents.

Instead of one monolithic script, I built three agents that collaborate through structured tools. Each has a clear role and communicates via MCP protocol.

The Agents

Orchestrator Agent

Manages fork lifecycle (create → test → cleanup)
Coordinates IndexTuner and Validator
Compares results from both strategies
Generates confidence-scored recommendations

IndexTuner Agent

Parses query patterns (WHERE, JOIN, ORDER BY)
Generates Strategy A (basic single-column indexes)
Generates Strategy B (advanced composite/partial indexes)
Explains rationale for each index

Validator Agent

Applies indexes to forks
Runs EXPLAIN ANALYZE (3 iterations for statistical validity)
Collects metrics: execution time, planning time, buffer hits, I/O
Analyzes query execution plans

The MCP Tools

Seven specialized operations the agents coordinate through:

tools: [
  'create_fork',      // Spin up isolated environments
  'delete_fork',      // Clean up resources
  'list_forks',       // Enumerate available forks
  'run_query',        // Execute SQL on specific forks
  'explain_analyze',  // Collect performance metrics
  'create_index',     // Apply strategies
  'drop_index'        // Remove indexes
]

Real-Time Transparency

Users see each step as agents coordinate:

Orchestrator: Creating fork optimization_abc123-strategy-a
IndexTuner: Analyzing 3 queries for optimization patterns
IndexTuner: Detected WHERE + ORDER BY pattern → composite index strategy
Validator: Running EXPLAIN ANALYZE (iteration 1/3)
Validator: Strategy A: 156.32ms avg execution time
Validator: Strategy B: 98.45ms avg execution time (37% improvement)
Orchestrator: Recommendation - Apply Strategy B (confidence: 92%)

Showing the process helps users understand how the system reaches recommendations.

3. Hybrid Search: Pattern Recognition

The Approach: Combine lexical search (BM25) with semantic search (vectors) to find relevant historical patterns.

Most tools do keyword search or semantic search. I fused both to get better results than either alone.

BM25 Text Search (pg_textsearch)

Find exact keyword matches in query patterns:

SELECT pattern, confidence
FROM optimization_history
WHERE to_tsvector('english', query_pattern) @@
      to_tsquery('english', 'WHERE & ORDER_BY & composite_index')
ORDER BY ts_rank(to_tsvector('english', query_pattern),
                 to_tsquery('english', 'WHERE & ORDER_BY & composite_index')) DESC
LIMIT 5;

Strengths: Precise keyword matching, fast execution
Weaknesses: Misses semantic similarity ("sort by" vs "order by")

Vector Similarity (pgvector)

Find semantically similar strategies:

SELECT pattern, confidence, embedding <-> query_embedding AS distance
FROM optimization_history
ORDER BY embedding <-> query_embedding
LIMIT 5;

Strengths: Understands semantic meaning, finds related concepts
Weaknesses: Can be too broad, slower than BM25

Fusion Scoring

Combine both approaches with weighted scoring:

const fusionResults = {
  similarPatterns: [
    {
      pattern: 'WHERE + ORDER BY optimization',
      confidence: 0.92,
      source: 'pg_textsearch'  // High keyword match
    },
    {
      pattern: 'Composite index benefits',
      confidence: 0.87,
      source: 'pgvector'  // Semantic similarity
    },
    {
      pattern: 'Partial index selectivity',
      confidence: 0.79,
      source: 'hybrid_fusion'  // Combined score
    }
  ],
  recommendations: [
    'Covering indexes show 23% better selectivity for filtered queries',
    'Composite indexes reduce random I/O by 45% for multi-column filters'
  ]
};

The Result: Users get contextual insights like "This pattern matched 92% of successful WHERE + ORDER BY optimizations in our database."

4. Tiger CLI: Developer Experience

The Integration: CLI operations embedded in application runtime, not just setup.

Most tools use CLIs for initial setup. I use Tiger CLI programmatically during every optimization.

Development Workflow

# Initial setup
tiger service create --name forked-ab-optimizer-db
tiger db connect forked-ab-optimizer-db < data/sample-schema.sql

# Testing fork operations
tiger service fork forked-ab-optimizer-db test-fork-1
tiger service list  # Verify fork created
tiger service delete test-fork-1  # Test cleanup

Production Runtime

Every fork operation calls Tiger CLI programmatically:

async createFork(forkName) {
  const command = `${this.tigerCLIPath} service fork ${this.serviceName} ${forkName}`;
  const { stdout, stderr } = await execAsync(command);

  if (stderr) {
    throw new Error(`Fork creation failed: ${stderr}`);
  }

  return {
    forkName,
    connectionString: this.extractConnectionString(stdout),
    created: new Date().toISOString()
  };
}

async deleteFork(forkName) {
  const command = `${this.tigerCLIPath} service delete ${forkName}`;
  await execAsync(command);
  return { deleted: true, forkName };
}

Key Point: The CLI runs during optimizations, not just setup. Every fork creation, query execution, and cleanup uses Tiger CLI under the hood.

5. Performance: The Speed Multiplier

What I Measured (average across 50+ test runs):

Operation	Time	Notes
Fork creation	0.8s	Both forks created
Strategy generation	2.3s	AI analyzes patterns
Performance testing	6.5s	3 runs per strategy
Result comparison	0.4s	Statistical analysis
Total	10s	End-to-end optimization

Traditional Approach Comparison:

Step	Traditional	Our Tool	Savings
Environment setup	30 min	1 sec	99.9%
Index application	5 min	2 sec	99.3%
Performance testing	45 min	7 sec	99.7%
Cleanup	10 min	1 sec	99.8%
Total	90-150 min	10 sec	99.8%

10-second test cycles let developers:

Test 5 query variations in 1 minute
Add index optimization to CI/CD pipelines
Experiment without worrying about wasted time
Make decisions based on real performance data

What Worked Well

1. Zero-Copy Fork Speed

First fork creation: 0.8 seconds. Expected some delay - there wasn't any.

Traditional database copies take 10-60 minutes. Zero-copy forks are instant. This single feature made the entire project viable.

2. MCP Protocol Quality

Expected multi-agent coordination to require complex message passing. MCP's structured tool system made it straightforward:

Each agent knows its available tools
Protocol handles serialization
Error handling is built-in
Debugging is clear (can inspect tool calls)

3. Demo Mode Design

Built demo mode as a fallback for missing credentials. It serves multiple purposes:

Quick prototyping without database setup
Hackathon demonstrations
UI testing without consuming resources

4. Real-Time Activity Logs

The UI shows live agent activity as tests run:

Orchestrator: Creating fork abc-strategy-a
IndexTuner: Analyzing query patterns
IndexTuner: Generated composite index for WHERE + ORDER BY
Validator: Running tests (iteration 1/3)
Orchestrator: Strategy B is 43% faster, high confidence (92%)

This transparency helps users understand the recommendation process.

Challenges & Solutions

Challenge 1: SQL Parsing Complexity

Problem: Extracting column names from WHERE, JOIN, ORDER BY using regex is fragile.

Attempted Solution 1: Use a full SQL parser library
Result: Too heavy (3MB+ bundle), slow, overkill for basic patterns

Final Solution: Pattern matching with documented limitations

extractColumnsFromWhere(query) {
  // Handles: WHERE col = value AND col2 > 5
  // Doesn't handle: Complex subqueries, CTEs, window functions
  const whereMatch = query.match(/WHERE\s+(.+?)(?:ORDER|GROUP|LIMIT|$)/i);
  if (!whereMatch) return [];

  const columns = whereMatch[1].match(/\b([a-z_][a-z0-9_]*)\s*[=><!]/gi);
  return columns ? columns.map(col => col.replace(/\s*[=><!].*/, '').trim()) : [];
}

Learning: Ship working code for 90% of cases. Document limitations. Let users tell you what's broken.

Coverage: Handles 90% of common query patterns. Production version would add pgsql-parser.

Challenge 2: Race Conditions in Fork Cleanup

Problem: If fork creation failed, cleanup code crashed trying to delete non-existent forks.

Bad Approach:

// ❌ This crashes if forkA is undefined
await tigerService.deleteFork(forkA.forkName);

Fixed Approach:

// ✅ Graceful cleanup even in error paths
if (forkA && forkA.forkName) {
  try {
    await tigerService.deleteFork(forkA.forkName);
  } catch (cleanupError) {
    console.error(`Cleanup failed for forkA: ${cleanupError.message}`);
    // Don't throw - log and continue
  }
}

Learning: Error paths need as much care as happy paths. Test failure scenarios explicitly.

Challenge 3: Connection Pooling Strategy

Problem: Should I pool connections to forks? Each fork has a unique connection string.

Considered Approaches:

Pool per fork → Too much memory overhead
Single global pool → Doesn't work (different connection strings)
No pooling → Poor performance for main database

Final Solution: Hybrid approach

async executeQuery(connectionString, query) {
  // Use pool for base database (frequent, long-lived)
  if (this.pool && connectionString === this.baseConnectionString) {
    return await this.pool.query(query);
  }

  // Individual client for forks (infrequent, short-lived)
  const client = new Client({ connectionString });
  try {
    await client.connect();
    return await client.query(query);
  } finally {
    await client.end();
  }
}

Learning: Don't force one pattern everywhere. Use the right tool for each use case.

Challenge 4: SQL Injection Prevention

Problem: Users input SQL queries. How prevent injection when building indexes?

Vulnerable Code:

// ❌ NEVER DO THIS
const sql = `CREATE INDEX idx_${tableName}_${column} ON ${tableName}(${column})`;

Secure Implementation:

sanitizeIdentifier(identifier) {
  if (!identifier || typeof identifier !== 'string') {
    throw new Error('Invalid identifier');
  }

  // Only alphanumeric and underscores
  const sanitized = identifier.replace(/[^a-zA-Z0-9_]/g, '');

  // Can't start with number
  if (/^[0-9]/.test(sanitized)) {
    throw new Error('Identifier cannot start with number');
  }

  // Block SQL keywords
  const reserved = ['SELECT', 'INSERT', 'UPDATE', 'DELETE', 'DROP', 'CREATE', 'ALTER'];
  if (reserved.includes(sanitized.toUpperCase())) {
    throw new Error('Cannot use SQL reserved keyword');
  }

  if (sanitized.length === 0) {
    throw new Error('Identifier empty after sanitization');
  }

  return sanitized;
}

Learning: Security matters in prototypes. Build it right from day one.

Challenge 5: Statistical Reliability

Problem: Single query runs showed inconsistent results (±30% variance) due to:

OS-level caching
Network latency fluctuations
PostgreSQL query planner randomness

V1 Approach: Run query once

const result = await explainAnalyze(query);
return result.executionTime;  // ❌ High variance

V2 Approach: Run 3 times, take average

const runs = [];
for (let i = 0; i < 3; i++) {
  const result = await explainAnalyze(query);
  runs.push(result.executionTime);
}

const avgTime = runs.reduce((sum, t) => sum + t, 0) / runs.length;
const variance = Math.max(...runs) - Math.min(...runs);

return { avgTime, variance, runs };

Results:

Variance reduced from ±30% to ±5%
Confidence scores more accurate
Users trust results more

Learning: Real-world performance testing needs statistical rigor, not single samples.

Tech Stack

Database: Agentic Postgres (Tiger Cloud)
Agent Coordination: Tiger MCP with 7 custom tools
Backend: Node.js 18 + Express.js
Frontend: React 18 + Vite + Recharts
Search: pg_textsearch (BM25) + pgvector (embeddings)
CLI: Tiger CLI (programmatic integration)
Deployment: Docker Compose / Railway

For Judges: Quick Test (2 minutes)

Visit live demo: https://forked-a-b-index-optimizer.up.railway.app/
Toggle Demo Mode OFF (to see real Tiger Cloud)
Paste this query:

SELECT u.name, COUNT(o.id) as order_count
FROM users u
JOIN orders o ON u.id = o.user_id
WHERE o.created_at > '2024-01-01'
  AND o.status = 'completed'
GROUP BY u.id, u.name
ORDER BY order_count DESC
LIMIT 50;

Click "Start A/B Optimization"
Watch agents coordinate in real-time
Review performance comparison (expect 25-45% improvement)

No authentication required - Ready to test immediately!

Final Thoughts

Building Forked A/B Index Optimizer showed me databases can work with developers rather than against them. Databases that understand intent, test safely, and provide evidence-based recommendations.

Tiger Data's Agentic Postgres enables this. Zero-copy forks, MCP tools, and hybrid search are building blocks for new database applications.

Started wanting to build something useful. Learned that good infrastructure enables creativity. Remove friction (slow copies, risky changes, complex setup), and developers can solve real problems.

That's what Agentic Postgres does.

ResearchHub AI: Secure Academic Research Assistant with Auth0 for AI Agents

Hulya — Fri, 24 Oct 2025 16:42:15 +0000

This is a submission for the Auth0 for AI Agents Challenge

What I Built

ResearchHub AI is an intelligent academic research assistant that demonstrates the full power of Auth0 for AI Agents platform. It solves a critical problem faced by research labs worldwide: managing access to sensitive research materials while enabling AI-powered literature discovery and knowledge synthesis.

The Problem

Academic researchers face several challenges:

Fragmented tools: PubMed, ArXiv, Google Scholar are all separate
No centralized document management for lab research
Security concerns with unpublished research and grant proposals
Need for fine-grained access control (undergraduate vs principal investigator)
Risk of unauthorized data sharing by AI agents

The Solution

ResearchHub AI provides:

Unified interface for searching PubMed, ArXiv, and Semantic Scholar
Secure document library with RAG-powered search
5-tier role-based access matching academic hierarchy
AI agent powered by Claude that respects permissions
Human-in-the-loop approval for sensitive operations (CIBA)

Demo

Live Demo: https://researchhub-ai.vercel.app

GitHub Repository: https://github.com/hulyak/researchhub-ai

Screenshots

Homepage with Auth0 Universal Login:

Chat Interface with Role Badge:

Role-Based Document Management:

Role Switching for Testing:

How I Used Auth0 for AI Agents

Key Features Demo

Authentication Flow
- Sign in with any Auth0-supported identity provider
- Secure session management with Next.js
- Profile automatically created with default PhD Student role
AI-Powered Research
- Ask: "Find recent papers on CRISPR gene editing"
- Agent searches PubMed and returns relevant papers with citations
- Query your own documents: "Search my documents for machine learning"
Role-Based Access Control
- Switch between 5 academic roles in Settings
- Document visibility changes based on role
- Undergraduate sees only public papers
- Faculty sees all documents including grant proposals
Document Management
- Upload research papers with metadata
- Automatic vector indexing for RAG search
- Access control enforced at query time

How I Used Auth0 for AI Agents

I implemented all three core pillars of Auth0 for AI Agents, plus the bonus CIBA feature:

1. Authenticate the User 🔐

Implementation: lib/auth0/config.ts, app/api/auth/[auth0]/route.ts

export const auth0 = initAuth0({
  secret: process.env.AUTH0_SECRET!,
  issuerBaseURL: process.env.AUTH0_ISSUER_BASE_URL!,
  baseURL: process.env.AUTH0_BASE_URL!,
  clientID: process.env.AUTH0_CLIENT_ID!,
  clientSecret: process.env.AUTH0_CLIENT_SECRET!,
})

Features:

Universal Login with OAuth 2.0 / OpenID Connect
Support for social and enterprise identity providers
Secure session management with httpOnly cookies
Role-based user profiles stored in PostgreSQL

Demo: Sign in with Google, or any Auth0-supported provider at the homepage.

2. Control the Tools (Token Vault) 🔑

Implementation: lib/auth0/token-vault.ts

export class TokenVault {
  async storeToken(userId: string, service: string, accessToken: string) {
    const mgmtToken = await this.getManagementToken()
    await fetch(`${this.baseUrl}/api/v2/users/${userId}/credentials`, {
      method: 'POST',
      body: JSON.stringify({
        credential_type: 'public_key',
        name: `${service}_token`,
        value: accessToken,
      }),
    })
  }
}

Features:

Secure storage of API credentials (PubMed, Semantic Scholar, GitHub)
Automatic token refresh and lifecycle management
No hardcoded credentials in codebase
Per-user token isolation

Why This Matters: Research APIs require authentication, but hardcoding keys is insecure. Token Vault enables secure credential management at scale.

3. Limit Knowledge (RAG with FGA) 📚

Implementation: lib/auth0/fga.ts, lib/rag/vector-store.ts

This is where the magic happens - combining vector search with real-time authorization:

async searchAuthorized(query: string, userId: string): Promise<DocumentChunk[]> {
  // 1. Generate query embedding
  const embedding = await this.embeddings.embedQuery(query)

  // 2. Search Pinecone for relevant documents
  const results = await this.index.query({
    vector: embedding,
    topK: 15
  })

  // 3. Filter by FGA authorization in real-time
  const authorized = []
  for (const result of results.matches) {
    const hasAccess = await fgaClient.checkAccess(
      userId,
      result.metadata.documentId,
      'read'
    )
    if (hasAccess) {
      authorized.push(result)
    }
  }

  return authorized
}

5-Tier Role Hierarchy:

UNDERGRADUATE: Public papers and preprints only
PHD_STUDENT: + Lab documents and datasets
POSTDOC: + Peer reviews and draft manuscripts
FACULTY: + Grant proposals and confidential materials
PRINCIPAL_INVESTIGATOR: Full administrative access

Authorization Model:

type document
  relations
    define owner: [user]
    define writer: [user] or owner
    define reader: [user] or writer
    define viewer: [user] or reader

Demo: Upload a "Grant Proposal" document, switch to Undergraduate role, and watch it disappear from your view. Switch back to Faculty, and it reappears!

4. BONUS: Human-in-the-Loop (CIBA) ✅

Implementation: lib/auth0/ciba.ts (Production-Ready)

⚠️ Note: Requires Auth0 Enterprise plan to activate, but the implementation is fully complete and ready to deploy.

export class CIBAClient {
  async executeWithApproval<T>(
    userId: string,
    action: string,
    callback: () => Promise<T>
  ) {
    // Check if approval needed
    if (!this.requiresApproval(action)) {
      return { success: true, data: await callback() }
    }

    // Initiate CIBA request
    const ciba = await this.initiateRequest(userId, { action })

    // Wait for user approval
    const approved = await this.waitForApproval(ciba.authReqId)

    if (!approved) {
      return { success: false, error: 'Action denied' }
    }

    // Execute action only if approved
    return { success: true, data: await callback() }
  }
}

Sensitive Actions Requiring Approval:

Sharing unpublished research externally
Submitting to preprint servers
Granting external access to lab data
Exporting confidential documents
Deleting documents
Modifying grant proposals

Integration: The document sharing tool (lib/tools/document-manager.ts) uses CIBA to request approval before sharing sensitive materials:

const result = await cibaClient.executeWithApproval(
  userId,
  'share_unpublished_research',
  `Share "${document.title}" with user ${targetUserId}`,
  async () => {
    // Grant FGA access only after approval
    await fgaClient.grantAccess(targetUserId, documentId, permission)
  }
)

Why This Matters: AI agents should never autonomously share sensitive research data. CIBA ensures humans remain in control of critical decisions.

Tech Stack

Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS
Authentication: Auth0 for AI Agents, @auth0/nextjs-auth0
AI/ML: Claude 3.5 Sonnet (Anthropic), OpenAI embeddings, LangChain
Vector Database: Pinecone
Database: PostgreSQL with Prisma ORM
Authorization: Auth0 FGA (Fine-Grained Authorization)
APIs: PubMed, ArXiv, Semantic Scholar
Deployment: Vercel

Lessons Learned and Takeaways

Challenge 1: Database Connection in Production

After deploying to Vercel, got 500 errors because Prisma couldn't connect to the database.

Vercel Postgres provides PRISMA_DATABASE_URL and POSTGRES_URL, but my schema expected DATABASE_URL.

Solution:

Added DATABASE_URL=$PRISMA_DATABASE_URL in Vercel environment variables
Updated schema.prisma to use both pooled and direct connections:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")        // Pooled for queries
  directUrl = env("POSTGRES_URL")       // Direct for migrations
}

Lesson: Cloud platforms have their own conventions. Read the docs and understand the environment variables they provide.

Challenge 2: Understanding RAG + FGA 🔐

The most powerful pattern is combining vector search with real-time authorization checks. This ensures:

Semantic search finds relevant documents
Authorization filters ensure users only see what they're allowed to
No data leakage even if vector embeddings are compromised

Implementation Pattern:

// 1. Vector search (fast, finds relevant docs)
const semanticResults = await vectorDB.search(query)

// 2. Authorization filter (secure, enforces access)
const authorized = await Promise.all(
  semanticResults.map(async (doc) => {
    const hasAccess = await fga.check(userId, doc.id, 'read')
    return hasAccess ? doc : null
  })
).then(results => results.filter(Boolean))

Lesson: Security and AI don't have to be at odds. With the right architecture, you can have both powerful AI capabilities and strong security guarantees.

Key Takeaways

Auth0 for AI Agents is Production-Ready: The platform handles complex scenarios like role-based RAG, token management, and approval workflows with elegant APIs.
Start with Security: Building security in from the start is easier than retrofitting it. Auth0's FGA model made it straightforward to implement fine-grained access control.
Test with Multiple Roles: The ability to switch roles with a single account made development much faster. This is crucial for testing access control logic.
Document Ownership Matters: Users should always see their own documents regardless of role. This is both intuitive and practical for real-world usage.
CIBA is Underrated: Human-in-the-loop approval is essential for enterprise AI applications. It's the difference between a demo and a production-ready system.
Vector Search + FGA = Magic: Combining semantic search with real-time authorization creates a powerful, secure knowledge retrieval system.
Claude is Excellent for Research: Claude 3.5 Sonnet's long context and reasoning capabilities make it ideal for academic applications. The citations and structured responses are very good.

Try It Yourself!

🚀 Live Demo: https://researchhub-ai.vercel.app

Sign in with Google or email
Try asking: "Find papers on AI and healthcare"
Upload a document in "My Documents"
Switch roles in Settings to see access control in action
Try different document types and visibility settings

📖 Full Documentation: See SETUP_GUIDE.md to run it locally

Final Thoughts

Building ResearchHub AI was an incredible learning experience. Auth0 for AI Agents provides the essential building blocks for secure AI applications: authentication, authorization, and human oversight. The platform handles complex scenarios elegantly, allowing developers to focus on building great AI experiences rather than reinventing security infrastructure.

The combination of AI capabilities (Claude, vector search) with enterprise-grade security (Auth0 FGA, CIBA) creates a system that's both powerful and trustworthy - exactly what's needed for sensitive domains like academic research.

I'm excited to see how Auth0 for AI Agents evolves and how other developers use it to build secure, intelligent applications!

Project Stats:

All 3 Auth0 pillars + CIBA implemented
5-tier role hierarchy
Document-level access control
LangChain agent with 6+ tools
RAG with FGA-filtered vector search
Sub-3s agent responses
Deployed on Vercel with 99.9% uptime

GitHub: @hulyak
Demo: researchhub-ai.vercel.app

SEO-Optimized HTML: How to Structure Your Web Pages for Maximum Visibility

Hulya — Tue, 13 Aug 2024 15:36:30 +0000

Learn how to structure your web pages to capture both user interest and search engine visibility.

In the vast world of the internet, having a beautifully designed website is only half the battle. If your site isn't easily discoverable by search engines, it's like throwing a party without sending out any invitations.

That's where SEO (Search Engine Optimization) comes into play, and it all starts with how you structure your HTML.
Whether you're a seasoned developer or just dipping your toes into web design, understanding how to optimize your HTML for SEO is crucial for driving organic traffic to your site.

In this guide, we'll break down the key elements of SEO-optimized HTML, ensuring that your pages are not only attractive to users but also to search engines.

1. Start with a Strong Title Tag

Your title tag is the first thing both users and search engines see, making it one of the most critical elements for SEO. It should be:

Descriptive: Clearly reflect the content of the page.
Keyword-Rich: Include the primary keyword you want to rank for.
Concise: Keep it under 60 characters to ensure it displays properly in search results.

Example:

<title>SEO-Optimized HTML: Tips for Maximum Visibility</title>

2. Craft a Compelling Meta Description

While meta descriptions don’t directly affect rankings, they do influence click-through rates. A well-written meta description should:

Be Engaging: Encourage users to click through to your site.
Include Keywords: Naturally integrate your target keywords.
Stay Within 160 Characters: Longer descriptions might get cut off. Example:

<meta name="description" content="Learn how to structure your HTML for SEO success. Discover tips and tricks for maximizing your web page's visibility in search engines.">

3. Use Headings Wisely

Headings (H1, H2, H3, etc.) help structure your content, making it easier for both users and search engines to understand.

Here’s how to optimize them:

H1 for the Main Topic: Each page should have one H1 tag that reflects the primary focus.
H2 and H3 for Subtopics: Use these to break down content into digestible sections, incorporating relevant keywords.

Example:

<h1>SEO-Optimized HTML: A Complete Guide</h1>
<h2>Why HTML Structure Matters for SEO</h2>
<h3>Title Tags and Meta Descriptions</h3>

4. Leverage Alt Text for Images

Search engines can’t "see" images, but they can read the alt text. Properly describing your images with alt text not only helps with accessibility but also boosts SEO.

Be Descriptive: Explain what the image shows.
Include Keywords: If relevant, add keywords naturally. Example:

<img src="seo-optimized-html.png" alt="Diagram showing SEO-optimized HTML structure">

5. Optimize Your URL Structure

Clean, descriptive URLs help search engines and users understand what a page is about. Here’s how to craft SEO-friendly URLs:

Use Hyphens: Separate words with hyphens, not underscores.
Include Keywords: Reflect the page’s content and include relevant keywords.
Keep It Simple: Avoid long, complex URLs.

Example:

https://www.example.com/seo-optimized-html-guide

6. Internal Linking for Better Navigation

Internal links connect your content, guiding users through your site and helping search engines understand the relationship between pages. When adding internal links:

Use Descriptive Anchor Text: Make it clear what users can expect when they click.
Link to Relevant Pages: Keep the user journey in mind.

Example:

<a href="/html-seo-tips">Check out our detailed HTML SEO tips!</a>

7. Mobile-Friendliness and Responsive Design

With mobile searches surpassing desktop, ensuring your site is mobile-friendly is a must. Use responsive design techniques to make your HTML adaptable to different screen sizes.

Viewport Meta Tag: Add this to ensure proper scaling on mobile devices.
Test Your Site: Use Lighthouse to check how well your site performs on mobile devices.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1">

Wrapping Up

Optimizing your HTML for SEO is like laying the foundation of a house. With a solid structure in place, you’re setting your website up for success, making it easier for search engines to index your content and for users to find exactly what they’re looking for. By following these tips, you’ll be well on your way to maximizing your web pages’ visibility and driving more organic traffic to your site.

How to Convert HTML to PDF Using React

Hulya — Tue, 28 Nov 2023 18:30:05 +0000

In this tutorial, you’ll learn how to convert HTML into PDF using React, one of the most popular JavaScript libraries. To achieve this, you’ll use an open source package called jsPDF, which is a client-side library that doesn’t require any server-side processing. You’ll use the latest version, 2.5.1. jsPDF can be used to generate reports, invoices, and tickets.

What Can You Convert into PDF via jsPDF?

If you look at the live demo examples of jsPDF, you can see it’s possible to convert images, font faces, font sizes, circles, rectangles, triangles, tables, lines, languages, and more into PDF format. You can also convert HTML into multiple pages with page breaks and add password protection and annotations. It’s also possible to change the orientation of a page to landscape or portrait.

Setting Up a React Project

To get started, you'll use Create React App. This will create a new React project with all the necessary dependencies and configuration files:

npx create-react-app convert-html-to-pdf

Change to the newly created directory and install the jspdf package through npm or yarn:

cd convert-html-to-pdf

npm install jspdf

yarn add jspdf

Using the jsPDF Library

1.Now, open the App.js file and import the jspdf package:

import jsPDF from 'jspdf';

2.Initialize a new instance of jsPDF:

const doc = new jsPDF();

jsPDF provides some options to customize a PDF. By default, it’ll use A4 paper size, portrait orientation, and millimeters as a unit of measurement.

If you want to change any of these options, you can pass an object to the constructor:

const doc = new jsPDF({
    orientation: 'landscape',
    unit: 'in',
    format: [4, 2],
});

You can find all the available options in the jsPDF documentation.

Converting HTML to PDF

jsPDF provides a method called html() to convert HTML to PDF. It takes two arguments: the HTML element, and a callback function. Since you’re using React, to get a reference to the HTML element, use the useRef() hook.

The doc.save() method takes the name of the PDF file as an argument. It’ll download the PDF file to the user’s computer:

doc.html(html_element, {
    async callback(doc) {
        await doc.save('pdf_name');
    },
});

Adding the Markup

To convert HTML to PDF, you need to add the markup to the page. You’ll use a report template with a button. When the button is clicked, you’ll trigger an event to generate the PDF. The div element will contain the HTML that you want to convert to PDF.

Create a new file called ReportTemplate.js and add the following code:

const ReportTemplate = () => {
    const styles = {
        page: {
            marginLeft: '5rem',
            marginRight: '5rem',
            'page-break-after': 'always',
        },

        columnLayout: {
            display: 'flex',
            justifyContent: 'space-between',
            margin: '3rem 0 5rem 0',
            gap: '2rem',
        },

        column: {
            display: 'flex',
            flexDirection: 'column',
        },

        spacer2: {
            height: '2rem',
        },

        fullWidth: {
            width: '100%',
        },

        marginb0: {
            marginBottom: 0,
        },
    };
    return (
        <>
            <div style={styles.page}>
                <div>
                    <h1 style={styles.introText}>
                        Report Heading That Spans More Than Just One Line
                    </h1>
                </div>

                <div style={styles.spacer2}></div>

                <img style={styles.fullWidth} src="photo-2.png" />
            </div>

            <div style={styles.page}>
                <div>
                    <h2 style={styles.introText}>
                        Report Heading That Spans More Than Just One Line
                    </h2>
                </div>

                <div style={styles.columnLayout}>
                    <div style={styles.column}>
                        <img style={styles.fullWidth} src="photo-2.png" />
                        <h4 style={styles.marginb0}>Subtitle One</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>

                    <div style={styles.column}>
                        <img style={styles.fullWidth} src="photo-1.png" />
                        <h4 style={styles.marginb0}>Subtitle Two</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>
                </div>

                <div style={styles.columnLayout}>
                    <div style={styles.column}>
                        <img style={styles.fullWidth} src="photo-3.png" />
                        <h4 style={styles.marginb0}>Subtitle One</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>

                    <div style={styles.column}>
                        <img style={styles.fullWidth} src="photo-4.png" />
                        <h4 style={styles.marginb0}>Subtitle Two</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
        </>
    );
};

export default ReportTemplate;

Here, you added some filler images to the report template. You can replace them with your own images. As for the styling, you used inline styles because jsPDF doesn’t support external stylesheets.

Generating the PDF

Now that you have the JSX in place, you can handle the button click. You’ll use the onClick event handler to call the handlePDF function.

Go back to App.js and add the onClick event handler to the button. After that, import the useRef hook and the reference to the HTML element:

import { useRef } from 'react';
import jsPDF from 'jspdf';
import ReportTemplate from './ReportTemplate';

function App() {
    const reportTemplateRef = useRef(null);

    const handleGeneratePdf = () => {
        const doc = new jsPDF({
            format: 'a4',
            unit: 'px',
        });

        // Adding the fonts.
        doc.setFont('Inter-Regular', 'normal');

        doc.html(reportTemplateRef.current, {
            async callback(doc) {
                await doc.save('document');
            },
        });
    };

    return (
        <div>
            <button className="button" onClick={handleGeneratePdf}>
                Generate PDF
            </button>
            <div ref={reportTemplateRef}>
                <ReportTemplate />
            </div>
        </div>
    );
}

export default App;

The app is now ready to generate PDFs. You can run the app with npm start and click the button to generate the PDF.

Adding Custom Fonts

jsPDF has support for 14 standard PDF fonts. To add custom fonts, you need to use a font converter. Navigate to this font converter and upload .ttf files.

Click Choose Files to choose the fonts you want to add. After that, click Create to convert the fonts. You don’t need to modify fontName, fontStyle, or Module format.

The font converter will generate a JavaScript file with the provided .ttf file as a base64-encoded string and some code for the jsPDF. Add the generated JavaScript file to your project.

To activate the custom font, use the setFont() method:

doc.setFont('Inter-Regular', 'normal');

You can find the font name before you convert the font to JavaScript. If you’re using more than one font, you need to go through the same process for each font.

You can find the demo project on CodeSandbox. Feel free to fork it and play around with it. The fonts and images used in the demo project are in the public folder.

Disadvantages of Using the jsPDF Library

While jsPDF is a good library for generating PDF documents in client-side JavaScript, it has some disadvantages:

The provided documentation is somewhat hard to follow.
If you want to add custom fonts, you need to use a font converter.
The jsPDF repository seems to be a bit outdated.
The library doesn’t support external stylesheets.

Conclusion

In this tutorial, we looked at how to generate client-side PDFs from HTML/JSX using React. If you’re looking to add more robust PDF capabilities, PSPDFKit offers a commercial React PDF library that can easily be integrated into your web application. It comes with 30+ features that let you view, annotate, edit, and sign documents directly in your browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case.

You can also deploy our vanilla JavaScript PDF viewer or use one of our many web framework deployment options like React.js, Angular, and Vue.js. To see a list of all web frameworks, start your free trial. Or, launch our demo to see our viewer in action.

One more PR for Hactoberfest

Hulya — Sat, 02 Oct 2021 18:56:24 +0000

Hactoberfest is upon us and it may be hard to find a project to contribute to especially for beginners. I have created a project with React and Docusaurus and looking for new contributors. You can create a PR and get one step closer to finishing your Hactoberfest.

If you are new to Open Source, you can follow along with this guide and create your PR for the project.

You can find the Github link for the project.

How to create a Pull Request for A-Z Coding Resources

In this guide, we will learn how to make a pull request for A-Z Coding Resources. We will make the changes from the command line. But first, let’s make clear the difference between Git and Github.

Git is a version control software and Github is a collaboration platform that uses Git.

Now, we can start contributing to our project by installing Git on our computer.

1. Install Git

First, let's see if you have Git already installed on your computer. Type the command below in Terminal, PowerShell, or any terminal application. If you already have git installed, you can skip the next few steps.
If you don’t have git installed, go to https://git-scm.com/downloads.
Select your operating system and the installer will download.
Open the installer and follow the instructions. It should be fine to select all of the default options.
Restart your terminal, PowerShell, or Git Bash.
Run the git --version command again.

2. Configure Git

We want to configure our local environments so that the correct GitHub account is associated with our commits.

1.On GitHub, find your user name. You can find it by clicking your avatar in the upper right-hand corner. It will say "Signed in as"

2.Return to your command line or terminal. Replace hulyak with your username.

git config --global user.name "hulyak"

3.Use the command below to configure your email address as well.

git config --global user.email "your-email-address"

4.You can use the two commands below to double-check that you've set this up.

git config user.name

git config user.email

3. Fork the Repository

Navigate to the GitHub repo and click Fork in the upper right-hand corner, this will open up a dialog where you can click on your username to fork the repository.

This will create a local copy under your GitHub username. You need to fork the repo into your account because Github doesn't allow pushing code to repositories that you don't own, then you can make all your changes to the copied repository.

4. Clone the Repo

To clone the repository, go to your forked copy of the GitHub repo, and select the green 'Clone or download' menu button, then click on the icon shown in the screenshot to copy the repository URL that you will need to use:

Go to your terminal and navigate to the directory where you want to clone the project.

cd desktop

Then, to clone the remote repository to your computer, execute the git clone command with the link that you just copied:

git clone <github-repo-link>

This will create a new folder with the remote GitHub repository name and download all the project files and repository data into it.

Cd into the folder that was just created.

cd a-to-z-coding-resources

You should this something similar to the screenshot.

5. Check out the Contributing guideline

Before we make any changes in the code, we need to check out the Contributing Guidelines.

If you check out the Readme page, it will redirect you to the CONTRIBUTING.md file. File name is CONTRIBUTING.md.

Or, you can check out the Issues tab, and decide how to contribute to the project.

Adding a New Resource

Go to the docs folder and look at the resources.
All you need is to add a unique new resource to any of the markdown files. You only need to add one resource for the Pull Request.
Go to the end of the page and add a new resource.
Image of the resource is not necessary, if you want to add the image of the website, you can first load the image on Dev.to and paste the link from there.
You can add a short description after the heading. For the heading use ### for Heading level 3 and make sure it looks good.

If you need help writing markdown files, you can check out this website.

You can checkout this example:

### 1.[Reacti Flux](https://discord.com/invite/reactiflux)

Reacti Flux is the largest community of React developers (110,000+)!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at0opxihu02u0o2xvcq2.png)

Creating A New Resource Page and Adding New Resource

If you cannot find a new resource to add, you can just create a new page and a different category. It can be related to frontend, backend, cloud, blockchain, or mobile development. It can be whatever you want.

For that, create a new markdown file for a new category and add the resource there.

create the file name as <category>-<number>.md and add the resource to the file. For example, you can the file as free-websites-1.md. Then, go to the sidebars.js file in the root of the project and add the file name to the list.

module.exports = {
  someSidebar: {
    resources: [
      'free-websites-1',
      'free-media-3',
      'react-5',
      'css-2',
      // 'markdown-features',
      'javascript-4',
      'nextjs-6',
      'job-hunt-8',
      'career-9',
      'computer-science-7',
      // add the new file name
    ],
  },
}

MDX file starts with YAML front matter block declared as triple-dashed lines. Declare the title property.

---
title: "Free Images/Videos"
---

After the title, add your resource similar to this:

### 1.[Reacti Flux](https://discord.com/invite/reactiflux)

Reacti Flux is the largest community of React developers (110,000+)!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at0opxihu02u0o2xvcq2.png)

6. Pull the recent changes

Before you make any changes, it's good to check if there have been any changes from GitHub down to your local copy by using the command:

git pull

7. Make Your Changes

Make changes in any of the markdown files under the docs folder.

8. Review Your Changes

Use the git diff command to see the changes you’ve made. This will show your changes with the + sign. To quit the terminal, use the q key.

Run the project.

npm install
npm start

Make sure the page loads without any errors and you have added a new resource.

9. Stage, Commit and Push Your Changes

Next, you want to stage, commit, and push your changes to your fork. Staging means saving your changes so they are ready to be added to your branch.

git add .
git commit -m "type your commit message"

m is a flag for the message. That means that whatever comes after -m is a message explaining your commit. Your commit message doesn't have any effect on your code; it's like a comment.

git push

git push adds the changes on your computer to your GitHub repository.

10. Create a Pull Request

Navigate back to the original repo from which you forked, and you will see a prompt to open a new Pull Request from the branch you just pushed to.

Click Compare & pull request, add a description describing the changes you made.

Add a screenshot of the page with the added resource.

To submit your pull request, click the green 'Create pull request' button.

Well done, you have made your pull request! 🎉🎉🎉

11. Wait For Merge and Code Review

The owner of the repo can now review your changes and decide whether to approve and merge, request changes, or decline your pull request.

TIP: If you need to add more changes to this pull request, you don't need to create different pull requests. Just push your new changes to the same fork and it will automatically update the PR.

I hope you liked this guide on how to make a pull request for the project. If you would like to learn more about Open Source, you can check out these resources:

May the FOSS be with you!

Let's connect. You can follow me on Github and Twitter.

How to fix regeneratorRuntime is not defined?

Hulya — Wed, 16 Jun 2021 02:07:35 +0000

I have ran into a problem, the error is regeneratorRuntime is not defined while working with React and Parcel bundler.

The problem appeared after I added an async function and while searching the problem, I found a stack-overflow solution but it didn't work. So, don't use this method.

Solution

First, I found this solution:

add import "babel-polyfill"; at the top of the file that you are using the async function.

BUT

later learned that babel-polyfill is deprecated. So, to solve the regeneratorRuntime problem, do this:
Install regenerator-runtime
npm install --save regenerator-runtime
Update webpack file
entry: ["regenerator-runtime/runtime.js", "<your enter js file>"]
require import 'regenerator-runtime/runtime' at the top of the file that you're using async function

I didn't edit webpack, because I'm using Parcel, but just importing regenerator-runtime/runtime at the top of the file solved the problem.

Resources

BABEL/ReferenceError regeneratorRuntime is not defined #9849

Everything you need in One Repo

Hulya — Tue, 20 Apr 2021 08:05:59 +0000

Hello friends, after writing so many free resource posts, I decided to put them together on a website, you can check it out.

Github: https://github.com/hulyak/a-to-z-coding-resources
Website: https://a-to-z-coding-resources.vercel.app/docs/

For now, I have included:

Free resources for learning how to code
Free images/videos and tools
Free React.js resources
Free CSS Resources
Free Javascript resources
Free Next.js resources
Job hunting resources
BONUS: Career resources (Resume Builders, Linkedin tips, portfolio tips, career advice)

You can clone, fork, or download the code, and add your own resources. It is really handy with a good navigation system. I have used Docusaurus, I didn't want to write it on a Markdown page, because I find it hard to navigate.

I look forward to hearing your feedback and don't forget to give it a star ⭐️ so that other developers also can see it.

If you like this post, share it on your Twitter account to support me writing more, also you can support me by buying a coffee.

You can follow me on Twitter, and Github. We can connect with each other.

Job-Hunting Resources

Hulya — Sat, 17 Apr 2021 16:56:32 +0000

Hello, guys. In this post, you will find

remote job opportunities,
internship,
fellowship,
freelancing,
mentorship,
teaching,
volunteering,
apprenticeship resources.

Jobs

Software Engineer jobs at YC startups

With over 3,000 YC startups and hundreds more funded each year, YC startups are always hiring.

2.We Work Remotely

We Work Remotely is the largest remote work community in the world. With over 3M visitors, WWR is the number one destination to find and list incredible remote jobs.

3.Hired

You’re more than your resume. Create a free profile and let companies apply to interview you (with salary details upfront).

4.White Truffle

Let your dream job come to you.

5.Pangian

Find the best remote jobs at reputable companies.

6.Facebook Groups

10 Facebook Groups you can join for free to find your next remote job or project.

7.Remote Ok

8.Angel List

9.Relocate Me

Find tech jobs with relocation packages.

10.Arc()

Remote Junior Developer Jobs & Internships. Find the latest remote engineering jobs, internships, and entry-level opportunities in one place.

11.Remotive

Want to work from home?
Remotive hand-screens 1,871 live remote jobs from 1,169 remote companies.

12.Hiring without Whiteboards

13.JR Dev Jobs

Jobs for Bootcamp Grads and Junior Level Programmers.

14.Diversify Tech

A collection of resources for underrepresented people in tech.

Once a week, we’ll send you scholarships, events, job opportunities, and more.

15.Dice

A job search engine focused on tech.

16.Remote ML

Remote Machine Learning Jobs.

17.Flex Jobs

18.Skip the Drive

Companies that hire remotely. Some hire remotely exclusively, while others have a mix of onsite and remote opportunities. Many companies below are on the Fortune 500 list.

19.Idealist

Jobs, internships, and volunteer opportunities.

20.Remote Tech Jobs

Internship

1.Chegg

2.Remote OK Internships

3.Outreachy

Outreachy is a diversity initiative that provides paid, remote internships to people subject to systemic bias and impacted by underrepresentation in the technical industry where they are living. They provide $6,000 USD total internship stipend.

4.Intern Wise

Founded in October 2010, Internwise is on a mission to build a tool to help reduce the youth unemployment rates in the UK.

Internwise is an online job board platform for the niche of internship recruitment.

5.After College

Discover Entry-Level Jobs and Internships.
Get AI-powered job recommendations from our machine learning-driven engine.

Fellowship

1.Fellowship AI

We give aspiring machine learning engineers the chance to hone their skills by building real-world applications. The number one qualification employers look for when hiring an ML engineering candidate is previous experience.

2.Insight Fellows

A seven-week professional training fellowship designed to be your bridge to a thriving career.

3.Z Fellows

If you’re building a project that you’re passionate about, or have an idea or two that you haven’t been able to sit down and build yet, you should consider applying.

This program gives you one week to work on your project alongside some of the most successful founders in their 20s (and older successful people as well). You can think of this like a virtual hacker house. Instead of taking a one-week vacation from school or your job, you will get to work on your own ideas surrounded by mentors. You will get $10,000 to spend however you’d like as early funding.

Teaching

1.Take Lessons

Teach what you love with TakeLessons.

2.Wyzant

Volunteer Programs

1.Catch a Fire
Volunteer your skills &
make a difference

2.UN Volunteers

3.Taproot Foundation

We help nonprofits and social change organizations solve critical challenges in their communities with the support of skilled volunteers sharing their expertise pro bono.

Freelancing

1.Guru

2.Upwork

3.Toptal

Toptal is an exclusive network of the top freelance software developers, designers, finance experts, product managers, and project managers in the world. Top companies hire Toptal freelancers for their most important projects.

4.Freelancer

Millions of people use freelancer.com to turn their ideas into reality.

5.G2I

100% Remote. 100% JavaScript.

All of G2i's developers work fully remote from all corners of the world. This enables you to make your own schedule and to devote more time to the people and things that matter to you.

Apprenticeship

1.Launch Code

LaunchCode provides free education and job opportunities to help you launch your career in technology. You must be located in Saint Louis, Kansas City, or Philadelphia.

Mentorship Programs

1.Linux Foundation Mentorship

2.Open Mainframe Project Mentorship Program

Learn valuable mainframe skills to launch your career while helping improve the state of Linux and Open Source on Mainframe development community.

3.Code Mentor

Get paid while making an impact. Become a Codementor for the next wave of makers.

Wrapping Up

If you like this post, share it on your Twitter account to support me writing more, also you can support me by buying a coffee.

You can follow me on Twitter, and Github. We can connect with each other.

If you think, there are more resources, share them in the comments, I would be happy to check them out.

Until next time... 👋

Image credit: Nik on Unsplash

How to Set Environment Variables in Next.js

Hulya — Sat, 10 Apr 2021 02:12:43 +0000

Hello friends, today I was trying to use environment variables inside a Next.js project, and it is really easy to work with.

First of all, you don't need to download dotenv package anymore.

Steps to work with Environment Variables

Create a .env.local file inside the root of your project.
Put your private keys inside the file in this format:

// .env.local
API_KEY="...."

3.Save the file and add it to the .gitignore file.

// .gitignore
.env*.local

4.Access your keys with process.env. You can access your environment variables inside the pages directory or while you are fetching data with the getServerSideProps function.

export const getServerSideProps = async () => {
  console.log(process.env.API_KEY);

  const res = await fetch(`${server}/api/?key=${process.env.API_KEY}`)
  const articles = await res.json()

  return {
    props: {
      articles,
    },
  }
}

5.Add your environment variables in Vercel deployment.

You can store your environment variables on Vercel, shown in the picture.

Wrapping Up

I hope you will not have any trouble storing your environment variables in your Next.js projects. Whenever I try to use environment variables, something goes wrong; but Next.js worked perfectly.

If you like this post, share it on your Twitter account to support me writing more, also you can support me by buying a coffee.

You can follow me on Twitter, and Github. We can connect with each other. Also, you can check out my other posts. I have shared resources that can help you learn Next.js.