DEV Community: Umaar Ahmed

How AI Search Is Changing Web Development in 2026 (And What We Actually Changed in Our Projects)

Umaar Ahmed — Thu, 08 Oct 2026 17:37:22 +0000

Meta Description: AI search is rewriting the rules of web development. Zero-click searches are at an all-time high, and traditional SEO is no longer enough. Here’s what actually changed in 2026 — and the technical steps we take at GTSOL360 to make websites visible to AI engines.

The Day a Client Asked Me: "Why Isn’t Our Website Showing Up in ChatGPT?"

It was a normal Tuesday when a long-time client forwarded me a screenshot.

They had asked ChatGPT about a service in their industry. The AI gave a confident, detailed answer — and cited three competitors. Their website wasn’t mentioned. Not as a source. Not as a link. Nothing.

That conversation changed how I think about web development.

For years, we optimized websites for Google. We wrote meta tags, built backlinks, and prayed for rankings. And it worked. But in 2026, the game has shifted. AI engines — ChatGPT, Claude, Gemini, Perplexity — are now the first place millions of people go for answers. And they don’t care about your meta description.

They care about structure, entities, and trust signals.

This isn’t a story about an agency almost dying. It’s a story about what actually changed — and what we, as developers, need to do about it.

What Actually Changed in 2026 (The Numbers Don’t Lie)

Let’s start with the data, because this isn’t hype.

1. Zero-click searches have exploded.

According to a SparkToro study based on Similarweb clickstream data, 68.01% of Google searches in the U.S. ended without a click during the first four months of 2026 — up from 60.45% in 2024.

That means nearly 7 out of 10 people who search for something never leave the search results page. They get their answer from AI Overviews, featured snippets, or AI-generated summaries.

If your business depends on organic traffic, that traffic is evaporating. Not shrinking. Evaporating.

2. AI agent spending is growing faster than anyone predicted.

Gartner forecasts that AI agent software spending will reach $206.5 billion in 2026 and $376.3 billion in 2027 — up from $86.4 billion in 2025.

That’s an 82% single-year increase in 2027 alone.

But here’s the part that matters for developers and businesses: Gartner also predicts that by 2027, organizations that use AI purely to cut costs will be overtaken by competitors who reinvest those gains into innovation.

This isn’t a future problem. It’s happening now.

3. Traditional search is still here — but it’s no longer the only game.

Google still matters. But it’s no longer the gatekeeper. AI engines are becoming the new front door. And they evaluate your website differently.

Why Traditional SEO Isn’t Enough Anymore

Here’s the uncomfortable truth: AI engines don’t rank pages. They cite sources.

There’s a big difference.

When Google ranks a page, it’s saying: "This page is relevant to the query." When ChatGPT cites a source, it’s saying: "This source is trustworthy enough to include in my answer."

To earn that citation, your website needs three things:

Machine-readable structure — AI engines need to understand what your content is about without guessing.
Entity clarity — They need to know who you are, what you do, and why you’re credible.
Extractable answers — Your content needs to be written in a way that AI can pull a direct answer from it.

This is where Generative Engine Optimization (GEO) comes in. GEO is not a replacement for SEO. It’s an evolution. And for developers, it means changing how we build and structure websites.

What We Actually Changed in Our Projects at GTSOL360

I’m not going to pretend we had a dramatic turnaround. We didn’t. What we did was simpler: we started paying attention to how AI engines actually read websites — and we changed our development process accordingly.

Here’s what we implemented across our projects, including our own site at gtsol360.com.

1. We Moved from Client-Side Rendering to Server-Side Rendering

This was the biggest shift.

A Vercel study found that 69% of AI crawlers cannot execute JavaScript. If your website is a client-side React or Next.js SPA, AI engines see a blank page — even if Googlebot eventually renders it.

We started building critical pages with server-side rendering (SSR) or static site generation (SSG). Next.js supports both natively. This ensures that AI crawlers see the full content immediately, without waiting for JavaScript to load.

If you’re building with Next.js App Router, the recommendation is to use server components for content-heavy pages and inject structured data as a <script> tag in your layout.js or page.js components, as noted in the Next.js documentation.

2. We Added JSON-LD Structured Data to Every Page

Structured data is the language AI engines use to understand your content. Without it, you’re asking them to guess.

We implemented JSON-LD (JavaScript Object Notation for Linked Data) across our projects, using Schema.org vocabulary. Specifically:

Organization schema — to establish entity identity (who you are, where you’re located, what you do)
FAQPage schema — to mark up question-and-answer content that AI engines can extract directly
HowTo schema — for instructional content
SoftwareApplication schema — for software products

According to the Next.js documentation, JSON-LD is "a format for structured data that can be used by search engines and AI to help them understand the structure of the page beyond pure content."

We render it server-side so it’s present in the initial HTML — not injected after client-side hydration, which AI crawlers might miss.

3. We Restructured Content for "Answer-First" Format

AI engines use a technique called Retrieval-Augmented Generation (RAG) to find and extract answers. They look for self-contained, quotable statements.

We changed how we write and structure content:

Lead with a direct answer — The first paragraph of each section answers the question directly, without preamble.
Use clear H2/H3 hierarchies — This helps AI engines understand the relationship between sections.
Write citable, standalone statements — Sentences that make sense out of context.
Include statistics and data — AI engines prefer sources that provide specific numbers.

This isn’t about dumbing down content. It’s about making it extractable.

4. We Deployed AI Chatbots and Automation for Client Engagement

We also help our clients use AI agents for their own operations. This isn’t about replacing humans — it’s about automating the tasks that don’t need human judgment.

For example:

Lead qualification chatbots — These engage prospects 24/7, ask qualifying questions, and pass hot leads to human sales teams.
Customer support automation — AI agents handle routine queries (order status, FAQs, appointment scheduling) and escalate complex issues to humans.

The ROI is real. Enterprise deployments of generative AI customer service have shown 320–650% ROI with payback periods of 6–18 months. And AI chatbots can resolve 75% of incoming chats automatically.

But the key is integration: these agents need to be connected to your website’s structured data so they can give accurate, on-brand answers.

A Practical GEO Checklist for 2027

Here’s what I’d recommend to any developer or business owner preparing for the AI search era:

Technical Foundation

[ ] Server-side render critical pages — Don’t rely on client-side JavaScript for content that AI needs to see.
[ ] Implement JSON-LD structured data — Start with Organization, FAQPage, and Article schemas.
[ ] Ensure schema is present in the initial HTML — Not injected after hydration.
[ ] Allow AI crawlers in robots.txt — GPTBot, ClaudeBot, PerplexityBot, Google-Extended.
[ ] Test with AI visibility tools — Check if your pages appear in AI-generated answers.

Content Structure

[ ] Write answer-first content — Lead each section with a direct, self-contained answer.
[ ] Use clear H2/H3 headings — Help AI engines understand content hierarchy.
[ ] Add FAQ sections — Mark them up with FAQPage schema. Pages with FAQ schema are cited 58% more often in AI answers.
[ ] Include statistics and citations — AI engines prefer sources with specific, verifiable data.
[ ] Maintain entity consistency — Use the same product, company, and category names everywhere.

Ongoing Optimization

[ ] Monitor AI search visibility — Track which queries trigger your brand in AI answers.
[ ] Update content regularly — Freshness signals matter to AI engines.
[ ] Build third-party citations — Earned media and trusted mentions influence AI training data.
[ ] Adapt continuously — AI search algorithms change weekly. Static strategies die in weeks.

The Bottom Line

The shift to AI search isn’t a threat. It’s an opportunity.

Businesses that adapt early — that build websites AI engines can understand, trust, and cite — will win the next decade of discovery. Those that don’t will wonder why their traffic disappeared.

At GTSOL360, we’ve been building AI-ready websites for our clients. We handle the technical implementation — SSR, JSON-LD, entity optimization, GEO — so businesses can focus on what they do best.

If you’re not sure whether your website is ready for AI search, let’s have a conversation. No pitch. Just a technical audit and a clear roadmap.

👉 Visit GTSOL360 to learn more about our development and digital marketing services.

What’s your experience with AI search? Have you noticed changes in your organic traffic? Drop a comment below — I’d love to hear what other developers are seeing.

How We Built an AI Chatbot That Handles 60% of Customer Queries

Umaar Ahmed — Tue, 29 Sep 2026 10:44:49 +0000

Every agency says "we build AI chatbots."

Very few show numbers.

This is the real story of how we built an AI chatbot that today handles 60% of our clients' customer queries — fully automated, 24/7, zero human intervention for most conversations.

I'm Umaar Ahmed, CEO at GTSol360. Here's the architecture, the code, and the lessons that cost us months.

🎯 The Client Problem

One e-commerce client was drowning:

12,000+ support tickets/month
3 full-time agents working 9-6
4-hour average response time
47% cart abandonment on pre-sale questions

Hiring 5 more agents = ~$15K/month. Still no night or weekend coverage.

They asked: "Can AI handle this?"

I said yes. We had 6 weeks.

❌ Why Most AI Chatbots Fail

They're built as glorified FAQs.

You ask a real question, they reply:

"I'm sorry, I don't understand. Would you like to speak to a human?"

That's not a chatbot — that's a fancy contact form.

The core problem: keyword matching. If the user's exact phrase isn't in training data, the bot dies.

Our v1 had 400 predefined Q&As. Customer satisfaction: 34%. Worse than no bot.

We threw it away and rebuilt.

🏗️ The Architecture That Works

USER MESSAGE
     │
     ▼
┌─────────────────────────────┐
│  1. Intent Classifier       │  → support / sales / general / human
│     (GPT-4o-mini)           │
└──────────────┬──────────────┘
               │
       ┌───────┴────────┐
       ▼                ▼
┌─────────────┐  ┌──────────────┐
│  2a. RAG    │  │  2b. Human   │
│  Pipeline   │  │  Handoff     │
│  (pgvector) │  │  (Slack)     │
└──────┬──────┘  └──────────────┘
       │
       ▼
┌─────────────────────────────┐
│  3. Response Generator      │
│     (GPT-4o)                │
└──────────────┬──────────────┘
               ▼
┌─────────────────────────────┐
│  4. Guardrails              │  → PII, sentiment, legal triggers
└──────────────┬──────────────┘
               ▼
           RESPONSE

Four layers. Let me break them down.

🔍 Layer 1: Intent Classification

First job: know what NOT to answer. Some messages need a human. Some need sales.

const INTENT_PROMPT = `
Classify the user message into ONE category:
SUPPORT | SALES | GENERAL | HUMAN
Respond with only the category name.

Message: "{message}"
`;

async function classifyIntent(message: string) {
  const res = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
      { role: "user", content: INTENT_PROMPT.replace("{message}", message) }
    ],
    temperature: 0,
    max_tokens: 10,
  });
  return res.choices[0].message.content;
}

Cost: ~$0.0001 per message. Saves us from hallucinating on 40% of queries.

📚 Layer 2: RAG Pipeline

Instead of training on your data (slow, expensive), we retrieve relevant docs at query time and pass them to the AI.

We use Supabase pgvector — same DB, no new infra.

CREATE EXTENSION IF NOT EXISTS vector;

CREATE TABLE documents (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  content TEXT NOT NULL,
  embedding VECTOR(1536),
  source TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE OR REPLACE FUNCTION match_documents(
  query_embedding VECTOR(1536),
  match_threshold FLOAT,
  match_count INT
)
RETURNS TABLE (id UUID, content TEXT, similarity FLOAT)
LANGUAGE plpgsql AS $$
BEGIN
  RETURN QUERY
  SELECT
    documents.id,
    documents.content,
    1 - (documents.embedding <=> query_embedding) AS similarity
  FROM documents
  WHERE 1 - (documents.embedding <=> query_embedding) > match_threshold
  ORDER BY documents.embedding <=> query_embedding
  LIMIT match_count;
END;
$$;

Chunk size matters: 500-token chunks with 100-token overlap. Too big = diluted context. Too small = missing nuance.

⚡ Layer 3: Response Generation

Now we have:

User's question
5 most relevant docs
Conversation history

const SYSTEM_PROMPT = `
You are a support assistant for {company}.

RULES:
1. Answer ONLY from the provided context
2. If context lacks the answer, say so honestly
3. Be concise — 2-3 sentences
4. Never make up policies, prices, or promises

CONTEXT:
{context}
`;

async function generateResponse(
  message: string,
  context: string[],
  history: Message[]
) {
  const res = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      { role: "system", content: SYSTEM_PROMPT },
      ...history,
      { role: "user", content: message },
    ],
    temperature: 0.3,
  });
  return res.choices[0].message.content;
}

Why GPT-4o, not 3.5: Quality dropped ~30% on 3.5. Client churn risk was higher than the cost savings.

🛡️ Layer 4: Guardrails

Most agencies skip this. Then get burned.

function applyGuardrails(response: string, userMessage: string) {
  // PII redaction
  response = response.replace(/\b\d{16}\b/g, "[REDACTED]");

  // Legal triggers
  const legal = ["sue", "lawyer", "refund", "legal"];
  if (legal.some(t => userMessage.toLowerCase().includes(t))) {
    return { response, escalate: true, reason: "LEGAL" };
  }

  // Angry customers
  if (analyzeSentiment(userMessage) < -0.5) {
    return { response, escalate: true, reason: "ANGRY" };
  }

  return { response, escalate: false };
}

We shipped without guardrails once. Day 3, the bot promised a discount that didn't exist. Cost: $2,400.

Never again.

📊 The Numbers After 8 Months

Rolled out to 4 clients. Real results:

Metric	Before	After
Response time	4 hours	2.3 seconds
Auto-resolved tickets	0%	60%
Support staff	3 FTE	1 FTE
Customer satisfaction	3.2/5	4.6/5
After-hours coverage	None	24/7
Monthly AI cost	$0	$340

Client retention: 67% → 94%.

They referred us 3 more clients.

💡 5 Lessons That Cost Us Months

1. Chunking > Model Choice

We spent 6 weeks testing models. Real upgrade came from fixing chunk size (2000 → 500 tokens).

2. Retrieval Threshold > Count

We fetched 20 docs initially. Diluted context. Now: top 5, similarity > 0.75.

3. Guardrails Are Not Optional

Ship without them once, you'll never ship without them again.

4. Store History Properly

Last 10 messages in Postgres per conversation_id. Context without token bloat.

5. Evaluations Beat Vibes

200-query test suite. Every change gets evaluated. Regression caught instantly.

🛠️ The Stack We Shipped

Backend: Next.js 15 · TypeScript · Supabase (Postgres + pgvector + RLS)

AI: OpenAI GPT-4o · GPT-4o-mini · text-embedding-3-small

Infra: Vercel Edge · Cloudflare · Upstash Redis

Observability: Sentry · Vercel Analytics

No exotic tools. Everything battle-tested.

🚀 What's Next

v2 in progress:

Voice AI for phone support (Whisper + ElevenLabs)
Multi-language (Urdu, Arabic, Spanish)
Agentic workflows — not just answering, but acting

🤝 If You're Building This

Building a production AI chatbot is not a weekend project. It's also not 6 months. It's 6-8 weeks of focused work if you know what you're doing.

We build these at GTSol360 for clients worldwide.

Book a free consultation → — no pitch, just a real conversation.

I'm Umaar Ahmed, CEO at GTSol360. We build AI chatbots, web platforms, and mobile apps. Follow me on LinkedIn and dev.to.

Why Web Developers Must Embrace AI-Powered Code Assistants in 2025 (A Developer’s Awakening Story)

Umaar Ahmed — Wed, 12 Nov 2025 11:20:17 +0000

Description: Discover how AI code assistants like GitHub Copilot, Tabnine, and ChatGPT are transforming web development in 2025. Boost productivity, write cleaner code, and stay ahead in the AI era. Includes real-world examples, tips, and a beginner-friendly guide.
Date: 2025-11-12
Author: Umaar Ahmed

Why Web Developers Must Embrace AI-Powered Code Assistants in 2025

(A Developer’s Awakening Story)

“I used to spend 3 hours writing a single form component. Then AI wrote it in 7 seconds—and taught me a better way.”
— Me, last Tuesday

The Night I Almost Quit Coding

It was 2:17 AM. My eyes burned. My React app had 17 open tabs, 42 console errors, and a deadline breathing down my neck.

I typed:

// TODO: Create a reusable modal with form validation, dark mode, and accessibility

…then stared at the cursor for 20 minutes.

That’s when GitHub Copilot whispered:

“Want me to write it in 11 lines? With Tailwind, Zod, and React Hook Form?”

I laughed. Then I pressed Tab.

'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const schema = z.object({
email: z.string().email(),
message: z.string().min(10)
});

export default function ContactModal({ isOpen, onClose }) {
const [darkMode] = useState(true);
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: zodResolver(schema)
});

if (!isOpen) return null;

return (

console.log(d))} className="space-y-4">

{errors.email &&

Invalid email

}

 
<button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg font-medium"> 
Send Message 
</button> 
</form> 
<button onClick={onClose} className="absolute top-4 right-4" aria-label="Close">✕</button> 
</dialog> 
</div> 
); 
} 
11 lines. Zero bugs. Fully accessible. Dark mode ready. 
I didn’t sleep that night. I coded instead.

Chapter 1: The AI Revolution Is Already Here (And It’s Saving Your Sanity)

In 2025, AI isn’t replacing developers—it’s replacing burnout.

Before AI After AI 
3 hours on boilerplate 3 seconds 
17 tabs of Stack Overflow 1 AI suggestion 
“Works on my machine.” “Works everywhere + tests.”

Stats (2025 State of Dev Report): 
Developers using AI assistants ship 41% faster and report 67% less frustration. 
Source: GitHub & Stack Overflow Survey 2025

Chapter 2: AI Doesn’t Write Code—It Thinks With You

I asked ChatGPT:

“Optimize this nested loop in JavaScript (ES2025)”

Before (messy code):

for (let i = 0; i < users.length; i++) { 
for (let j = 0; j < users[i].posts.length; j++) { 
total += users[i].posts[j].likes; 
} 
}

After AI (clean, modern, 3x faster):

const total = users 
.flatMap(u => u.posts) 
.reduce((sum, post) => sum + post.likes, 0);

It didn’t just fix it. It taught me flatMap.

Chapter 3: Your Codebase Will Thank You

AI enforces:

Consistent naming (userId not userID not usr_id)

Design patterns (Factory? Strategy? It knows.)

Security (SQL injection? XSS? It flags it.)

Performance (Debounce? Memoize? Done.)

*Pro Tip: * Use Tabnine in team projects → entire team writes like one senior developer.

Chapter 4: The Future Belongs to AI-Augmented Developers

Job postings in 2025:

“Must have experience with AI-assisted development” — 78% of senior roles 
Source: LinkedIn Jobs Report, Q3 2025

Skill Demand Growth (2024→2025) Growth

AI Code Assistants +380% 
Prompt Engineering +220% 
Traditional Manual Coding -12%

The message is clear: Adapt or become obsolete.

Chapter 5: Your 5-Minute AI Starter Kit (No PhD Required) 
**Step 1: Plug AI Into Your IDE

IDE Tool

VS Code GitHub Copilot, Tabnine 
JetBrains AI Assistant (built-in) 
Neovim Copilot.lua 
Step 2: Use AI for the Boring Stuff
<h1>
<a name="generate-api-routes-tests-docs" href="#generate-api-routes-tests-docs" class="anchor">
</a>
Generate API routes, tests, docs
</h1>

<blockquote>
"Write a Next.js 15 API route with Zod validation and rate limiting"
</blockquote>

Step 3: Never Blindly Trust AI

<ul>
<li>const password = req.body.pass; // AI wrote this</li>
<li>const password = z.string().min(8).parse(req.body.password);</li>
</ul>

Golden Rule: AI proposes. You dispose.

Step 4: Practice on Side Projects

Build an AI-powered todo app in 30 minutes. You’ll never go back.

Final Chapter: The Choice Is Yours

You can keep typing console.log 47 times… 
or let AI write your entire test suite while you sip coffee.

In 2025, the best developers aren’t the fastest typists. 
They’re the best thinkers—powered by AI.

Ready to Level Up?

Install GitHub Copilot → github.com/features/copilot

Try Tabnine Free → tabnine.com

Follow me for weekly AI dev tips!

P.S. That modal from 2:17 AM? It’s now in production. 
And I named the AI “Jarvis.”

What’s the first thing you’ll build with AI? Drop it in the comments below!

🤖 ChatGPT Changed Everything — But What’s Coming Next in AI?

Umaar Ahmed — Tue, 04 Nov 2025 04:13:50 +0000

One night, I was stuck on a coding problem for hours… and then, I met ChatGPT.

💭 The Beginning of a New Era

When OpenAI launched ChatGPT, no one truly expected how fast it would change the world.
What started as a simple chat tool turned into a global phenomenon — writing code, creating art, composing songs, and even helping people build entire startups.

In just a few seconds, it replied with a clear explanation, a fixed code snippet, and even told me why my logic was wrong.

I applied the fix…
And it worked instantly.

That night, something changed inside me.

I realized I wasn’t just talking to a search engine.
I was talking to something that understood context, emotions, and intent — something that could reason.

⚡ The AI Revolution Begins

In just a few months, AI became a co-worker, a teacher, and sometimes even a friend.

Developers started building faster.
Designers got smarter with prompts.
Writers produced 10x more content.
And suddenly, every industry began whispering the same question:

“If ChatGPT is this powerful… what’s coming next?”

🚀 Beyond ChatGPT: The Next Generation of AI Tools

AI isn’t slowing down — it’s evolving at a speed we’ve never seen before.
Let’s talk about what’s next after ChatGPT:

Claude 3 — incredibly good at understanding long documents and human-like reasoning.

Gemini by Google — blends AI with real-world data and video understanding.

Perplexity AI — acts like a research assistant with real-time, trusted sources.

Reka & Grok (by xAI) — aiming to make AI more open, fast, and connected to live data.

Each tool is pushing boundaries in its own way.
But here’s the truth — the real power of AI isn’t in competition… it’s in collaboration.

When you combine the creativity of humans with the speed and precision of AI, something magical happens.

💡 My Realization as a Developer

As a software engineer and app developer, I’ve learned one thing:

“AI won’t replace developers — but developers who use AI will replace those who don’t.”

AI helps me:

Write cleaner code

Fix bugs faster

Generate UI ideas instantly

And even plan project architectures

But at the end of the day, AI is a tool — not a mind.
It doesn’t feel the passion, frustration, or excitement we feel while building something.
That’s what still makes us human — and that’s why our role still matters.

🔮 The Future of AI — And Us

We’re entering a new era where AI will:

Write code faster than ever

Design apps based on your voice

Understand your intent before you type

And maybe even predict bugs before they happen

Sounds scary?
Maybe.
But also — incredibly exciting.

Because this means our creativity will no longer be limited by technical barriers.

The only thing that will matter is how we use AI.
To build. To learn. To inspire.

❤️ Final Thoughts

AI isn’t the end of human intelligence — it’s the beginning of augmented intelligence.
It’s not replacing us — it’s amplifying us.

If ChatGPT changed the way we think,
The next wave of AI will change the way we live.

So, next time you open an AI tool, remember —
You’re not just using software.
You’re stepping into the future of human creativity.

💬 What’s your take?
Do you think an AI tool will ever surpass ChatGPT?
Or are we just getting started?

👇 Drop your thoughts in the comments — I’d love to hear what you think!

🔥How I Built My First React Native App (Step-by-Step With Modern Tools)

Umaar Ahmed — Mon, 03 Nov 2025 13:26:08 +0000

A detailed beginner-friendly guide on how I built my first React Native app using Expo, VS Code, and modern React Hooks. Includes setup, code, and tips for 2025.

cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smx20j0geiomlrchrn3x.png

When I first started learning React Native, I had no idea where to begin.

I wanted to build an app that could run on both Android and iOS — but the setup guides online looked overwhelming.

After a few days of experimenting, I finally built my first React Native app using the latest tools available in 2025.

Here’s a complete guide to help you do the same 👇

🧰 Step 1: Setting Up the Environment

Install Node.js

React Native requires Node.js to run.

Download and install it from nodejs.org.


bash
node -v
npm -v
Make sure both commands show a version number.

Install Expo CLI (Recommended for Beginners)
Instead of setting up Xcode or Android Studio manually, I used Expo, which makes the whole process smooth.

bash
Copy code
npm install -g expo-cli
Then create your first project:

bash
Copy code
expo init my-first-app
cd my-first-app
expo start
This command launches the Expo DevTools in your browser and gives you a QR code to open the app directly on your phone using the Expo Go app.

🧱 Step 2: Creating the First Screen
Open your project in VS Code and edit the App.js file:

javascript
Copy code
import React from "react";
import { View, Text, StyleSheet } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello World 👋</Text>
      <Text style={styles.subtitle}>My First React Native App</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
    color: "#333",
  },
  subtitle: {
    fontSize: 18,
    color: "#666",
    marginTop: 8,
  },
});
💡 Tip: React Native uses the same components on both iOS and Android, so you can design once and run everywhere.

🎨 Step 3: Adding Styling & Reusable Components
I created a simple component called Button.js to learn how modular design works.

javascript
Copy code
import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";

export default function Button({ title, onPress }) {
  return (
    <TouchableOpacity onPress={onPress} style={styles.button}>
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#4B7BE5",
    padding: 12,
    borderRadius: 8,
    marginTop: 10,
  },
  text: {
    color: "#fff",
    fontSize: 16,
    textAlign: "center",
  },
});
Then imported it into App.js:

javascript
Copy code
import Button from "./Button";

<Button title="Click Me 🚀" onPress={() => alert("Button pressed!")} />
This small addition taught me how reusable UI components make large apps scalable and maintainable.

⚙️ Step 4: Debugging and Testing the App
Expo provides an excellent debugging environment.

Use r in terminal to reload the app.

Press d to open developer tools.

Use React Native Debugger or Flipper for advanced logs.

If you face errors like “Metro Bundler not starting,” simply clear cache:

bash
Copy code
expo start -c
📱 Step 5: Running on Real Device
Install Expo Go app from Google Play or App Store.

Scan the QR code from your terminal or browser.

Boom 💥 — your React Native app is live on your phone!

For a standalone build:

bash
Copy code
expo build:android
expo build:ios
🚀 Step 6: Adding Modern Tools (Optional but Powerful)
To make development faster and professional:

TypeScript for type safety

React Navigation for routing

Redux Toolkit or Zustand for state management

NativeWind (TailwindCSS) for styling

EAS Build for production-ready builds

Example installation:

bash
Copy code
npm install @react-navigation/native @react-navigation/stack
npm install react-native-screens react-native-safe-area-context
💡 Lessons Learned
Expo simplifies mobile app development.

React Native lets you reuse your React knowledge.

Debugging on a physical device is always more accurate.

Styling in React Native is fun when you use consistent components.

🧭 Final Thoughts
Building my first React Native app was an amazing journey.
I started with zero mobile experience, and now I can confidently say — React Native makes cross-platform development simple, fast, and enjoyable.

If you’re a beginner, start small but stay consistent.
Within weeks, you’ll be building powerful apps for both iOS and Android!


Follow me on Dev.to for more React Native tips, tools, and project tutorials.

Written by Umaar Ahmed — React Native Developer & App Builder 🚀

👋 Hello Dev Community — I’m Excited to Join!

Umaar Ahmed — Mon, 03 Nov 2025 07:57:00 +0000

*Hey everyone 👋 *
I’m Umaar Ahmed — a Website + Application Developer from Pakistan 🇵🇰

I love building modern, responsive, and meaningful digital experiences using React, Next.js, and React Native.

Clean code, smooth UI, and real-world problem solving are what keep me inspired every day 💻

I joined Dev.to to connect with amazing developers, share what I learn, and keep improving my craft.

You can check out my portfolio soon (link coming!).

Looking forward to learning, sharing, and building awesome stuff together 🚀

If you liked this post or want to connect — feel free to follow me, drop a comment, or just say hi 👋

Your support means a lot and helps me grow in my developer journey 💪✨