Sahid Afridi-Developer

React.js

SPA Architecture, Hooks, Custom Components, Context API, and Complex State Management.

                            import { useState, useEffect, useCallback } from 'react';
import { Card, ReactLogo, DataGrid } from '@/components';
import { useAuth } from '@/hooks/useAuth';

export default function DashboardApp() {
  const [glow, setGlow] = useState(true);
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const { user } = useAuth();

  const loadData = useCallback(async () => {
    try {
      setIsLoading(true);
      const result = await fetchUserData(user.id);
      setData(result);
    } catch (error) {
      console.error('Failed to fetch data', error);
    } finally {
      setIsLoading(false);
    }
  }, [user]);

  useEffect(() => {
    if (user) loadData();
  }, [user, loadData]);

  if (isLoading) return <LoadingSpinner />;

  return (
    <Card className="glass-panel w-full h-full p-8">
      <header className="flex justify-between items-center">
        <ReactLogo active={glow} size="lg" />
        <UserProfile user={user} />
      </header>
      <main className="grid grid-cols-12 gap-4 mt-6">
        <MetricsPanel data={data} className="col-span-4" />
        <DataGrid items={data} className="col-span-8" />
      </main>
    </Card>
  );
}
                            
                            import { useState, useEffect, useCallback } from 'react';
import { Card, ReactLogo, DataGrid } from '@/components';
import { useAuth } from '@/hooks/useAuth';

export default function DashboardApp() {
  const [glow, setGlow] = useState(true);
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const { user } = useAuth();

  const loadData = useCallback(async () => {
    try {
      setIsLoading(true);
      const result = await fetchUserData(user.id);
      setData(result);
    } catch (error) {
      console.error('Failed to fetch data', error);
    } finally {
      setIsLoading(false);
    }
  }, [user]);

  useEffect(() => {
    if (user) loadData();
  }, [user, loadData]);

  if (isLoading) return <LoadingSpinner />;

  return (
    <Card className="glass-panel w-full h-full p-8">
      <header className="flex justify-between items-center">
        <ReactLogo active={glow} size="lg" />
        <UserProfile user={user} />
      </header>
      <main className="grid grid-cols-12 gap-4 mt-6">
        <MetricsPanel data={data} className="col-span-4" />
        <DataGrid items={data} className="col-span-8" />
      </main>
    </Card>
  );
}
                        

JavaScript (ES6+)

Asynchronous JS, Promises, DOM Manipulation, and modern syntax.

                            class VirtualDOM {
  constructor() {
    this.nodes = new Map();
    this.isRendering = false;
  }

  async update(component, state) {
    const oldNode = this.nodes.get(component.id);
    const newNode = await component.render(state);
    
    const patches = this.diff(oldNode, newNode);
    requestAnimationFrame(() => {
      this.apply(component.element, patches);
      this.nodes.set(component.id, newNode);
    });
  }
}
                            class VirtualDOM {
  constructor() {
    this.nodes = new Map();
    this.isRendering = false;
  }

  async update(component, state) {
    const oldNode = this.nodes.get(component.id);
    const newNode = await component.render(state);
    
    const patches = this.diff(oldNode, newNode);
    requestAnimationFrame(() => {
      this.apply(component.element, patches);
      this.nodes.set(component.id, newNode);
    });
  }
}
                        

Tailwind CSS

Utility-First Design, Responsive Layouts.

                            <div className="min-h-screen bg-slate-900 text-white p-8">
  <div className="max-w-md w-full bg-slate-800 rounded-2xl shadow-2xl">
    <div className="p-8">
      <div className="flex items-center space-x-4 mb-6">
        <div className="shrink-0 relative">
          <img className="h-16 w-16 rounded-full border-2 border-emerald-500" />
          <div className="absolute bottom-0 right-0 w-4 h-4 bg-emerald-500 rounded-full"></div>
        </div>
        <div>
          <div className="text-2xl font-bold text-white tracking-tight">
            ChitChat UI
          </div>
          <p className="text-emerald-400 font-medium mt-1">Online</p>
        </div>
      </div>
      <div className="space-y-4">
        <div className="bg-slate-700 p-4 rounded-xl inline-block">
          <p className="text-slate-200">Hey! New Tailwind classes?</p>
        </div>
        <div className="bg-emerald-600 p-4 rounded-xl inline-block ml-auto block">
          <p className="text-white">Yeah, they are insane! 🚀</p>
        </div>
      </div>
    </div>
    <div className="bg-slate-900 p-4 border-t flex gap-3">
      <input type="text" className="flex-1 bg-slate-800 rounded-lg px-4" />
      <button className="bg-emerald-500 text-white px-4 py-2 rounded-lg">Send</button>
    </div>
  </div>
</div>
                            
                            <div className="min-h-screen bg-slate-900 text-white p-8">
  <div className="max-w-md w-full bg-slate-800 rounded-2xl shadow-2xl">
    <div className="p-8">
      <div className="flex items-center space-x-4 mb-6">
        <div className="shrink-0 relative">
          <img className="h-16 w-16 rounded-full border-2 border-emerald-500" />
          <div className="absolute bottom-0 right-0 w-4 h-4 bg-emerald-500 rounded-full"></div>
        </div>
        <div>
          <div className="text-2xl font-bold text-white tracking-tight">
            ChitChat UI
          </div>
          <p className="text-emerald-400 font-medium mt-1">Online</p>
        </div>
      </div>
      <div className="space-y-4">
        <div className="bg-slate-700 p-4 rounded-xl inline-block">
          <p className="text-slate-200">Hey! New Tailwind classes?</p>
        </div>
        <div className="bg-emerald-600 p-4 rounded-xl inline-block ml-auto block">
          <p className="text-white">Yeah, they are insane! 🚀</p>
        </div>
      </div>
    </div>
    <div className="bg-slate-900 p-4 border-t flex gap-3">
      <input type="text" className="flex-1 bg-slate-800 rounded-lg px-4" />
      <button className="bg-emerald-500 text-white px-4 py-2 rounded-lg">Send</button>
    </div>
  </div>
</div>
                        

CSS3

Flexbox, Grid, Animations.

                            @keyframes neonGlow {
  0% {
    box-shadow: 0 0 5px #fff,
                0 0 10px #fff,
                0 0 20px #0fa,
                0 0 40px #0fa;
  }
  100% {
    box-shadow: 0 0 2px #fff,
                0 0 5px #fff,
                0 0 10px #0fa,
                0 0 20px #0fa;
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}
                            @keyframes neonGlow {
  0% {
    box-shadow: 0 0 5px #fff,
                0 0 10px #fff,
                0 0 20px #0fa,
                0 0 40px #0fa;
  }
  100% {
    box-shadow: 0 0 2px #fff,
                0 0 5px #fff,
                0 0 10px #0fa,
                0 0 20px #0fa;
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}
                        

React Native

Cross-platform mobile app development.

                            import { View, Text, StyleSheet, Animated } from 'react-native';
import { useRef, useEffect } from 'react';

export default function SwipeCard() {
  const pan = useRef(new Animated.ValueXY()).current;
  
  useEffect(() => {
    Animated.spring(pan, {
      toValue: { x: 0, y: 0 },
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View
      style={{
        transform: [{ translateX: pan.x }, { translateY: pan.y }]
      }}
    >
      <Text style={styles.title}>Swipe Me</Text>
    </Animated.View>
  );
}
                            import { View, Text, StyleSheet, Animated } from 'react-native';
import { useRef, useEffect } from 'react';

export default function SwipeCard() {
  const pan = useRef(new Animated.ValueXY()).current;
  
  useEffect(() => {
    Animated.spring(pan, {
      toValue: { x: 0, y: 0 },
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View
      style={{
        transform: [{ translateX: pan.x }, { translateY: pan.y }]
      }}
    >
      <Text style={styles.title}>Swipe Me</Text>
    </Animated.View>
  );
}
                        

Supabase

PostgreSQL Databases, Realtime Sync, Auth Rules.

                            import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseKey = process.env.SUPABASE_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);

async function getRealtimeUpdates() {
  const channel = supabase
    .channel('schema-db-changes')
    .on(
      'postgres_changes',
      { event: '*', schema: 'public', table: 'messages' },
      (payload) => console.log(payload)
    )
    .subscribe();
    
  return channel;
}

const { data, error } = await supabase
  .from('users')
  .select('id, name, avatar_url')
  .eq('status', 'ONLINE');
                            import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseKey = process.env.SUPABASE_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);

async function getRealtimeUpdates() {
  const channel = supabase
    .channel('schema-db-changes')
    .on(
      'postgres_changes',
      { event: '*', schema: 'public', table: 'messages' },
      (payload) => console.log(payload)
    )
    .subscribe();
    
  return channel;
}

const { data, error } = await supabase
  .from('users')
  .select('id, name, avatar_url')
  .eq('status', 'ONLINE');
                        

HTML5

                            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Semantic HTML5</title>
</head>
<body>
  <header>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h1>Semantic Web</h1>
      <p>Accessibility first.</p>
    </article>
  </main>
</body>
</html>
                            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Semantic HTML5</title>
</head>
<body>
  <header>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h1>Semantic Web</h1>
      <p>Accessibility first.</p>
    </article>
  </main>
</body>
</html>
                        

XML

                            <?xml version="1.0"?>
<data>
  <user id="1">
    <name>John</name>
    <role>Dev</role>
  </user>
  <user id="2">
    <name>Jane</name>
    <role>Designer</role>
  </user>
</data>
                            <?xml version="1.0"?>
<data>
  <user id="1">
    <name>John</name>
    <role>Dev</role>
  </user>
  <user id="2">
    <name>Jane</name>
    <role>Designer</role>
  </user>
</data>
                        

Git

                            $ git commit -m "Fix async bugs"
[main 7f3a1b2] Fix async bugs
 3 files changed, 45 insertions(+), 12 deletions(-)

$ git push origin main
Enumerating objects: 11, done.
Counting objects: 100% (11/11), done.
Delta compression using up to 10 threads
Compressing objects: 100% (6/6), done.
Writing objects: 100% (6/6), 842 bytes
Total 6 (delta 4), reused 0 (delta 0)
To github.com:sahidafridi/portfolio.git
   d8f3e2a..7f3a1b2  main -> main

$ git status
On branch main
Your branch is up to date with 'origin/main'.
nothing to commit, working tree clean
                            $ git commit -m "Fix async bugs"
[main 7f3a1b2] Fix async bugs
 3 files changed, 45 insertions(+), 12 deletions(-)

$ git push origin main
Enumerating objects: 11, done.
Counting objects: 100% (11/11), done.
Delta compression using up to 10 threads
Compressing objects: 100% (6/6), done.
Writing objects: 100% (6/6), 842 bytes
Total 6 (delta 4), reused 0 (delta 0)
To github.com:sahidafridi/portfolio.git
   d8f3e2a..7f3a1b2  main -> main

$ git status
On branch main
Your branch is up to date with 'origin/main'.
nothing to commit, working tree clean
                        

GitHub

                            name: CI/CD Pipeline

on:
  push:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18.x'
    - run: npm ci
    - run: npm run build
    - run: npm test
                            name: CI/CD Pipeline

on:
  push:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18.x'
    - run: npm ci
    - run: npm run build
    - run: npm test
                        

FormSubmit

Serverless form endpoints and backend form routing.

                            <form action="https://formsubmit.co/your@email.com" method="POST">
  <input type="hidden" name="_subject" value="New Message!">
  <input type="hidden" name="_next" value="https://yourdomain.co/thanks">
  <input type="hidden" name="_captcha" value="false">
  
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" required>
  </div>
  
  <div class="form-group">
    <label>Message</label>
    <textarea name="message" required></textarea>
  </div>
  
  <button type="submit">Send</button>
</form>
                            <form action="https://formsubmit.co/your@email.com" method="POST">
  <input type="hidden" name="_subject" value="New Message!">
  <input type="hidden" name="_next" value="https://yourdomain.co/thanks">
  <input type="hidden" name="_captcha" value="false">
  
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" required>
  </div>
  
  <div class="form-group">
    <label>Message</label>
    <textarea name="message" required></textarea>
  </div>
  
  <button type="submit">Send</button>
</form>
                        

Hostinger

                            $ ssh user@hostinger-vps.com
Welcome to Ubuntu 22.04 LTS

user@vps:~$ systemctl status nginx
● nginx.service - A high performance web server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled)
   Active: active (running)
     Docs: man:nginx(8)

user@vps:~$ cat /etc/nginx/sites-available/portfolio
server {
    listen 80;
    server_name sahidafridi.com;
    
    location / {
        root /var/www/portfolio/html;
        index index.html;
        try_files $uri $uri/ =404;
    }
}
                            $ ssh user@hostinger-vps.com
Welcome to Ubuntu 22.04 LTS

user@vps:~$ systemctl status nginx
● nginx.service - A high performance web server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled)
   Active: active (running)
     Docs: man:nginx(8)

user@vps:~$ cat /etc/nginx/sites-available/portfolio
server {
    listen 80;
    server_name sahidafridi.com;
    
    location / {
        root /var/www/portfolio/html;
        index index.html;
        try_files $uri $uri/ =404;
    }
}
                        