Modernizing the Name.am Website

During my tenure at Name.am, I spearheaded the comprehensive transformation of the existing website, delivering a fully modernized frontend platform. My efforts focused on significantly enhancing the UI/UX, optimizing performance and SEO, adopting robust coding practices, and integrating an advanced AI-driven domain suggestion tool.

The goal was clear: transform Name.am into a highly intuitive, fast, and SEO-optimized platform, underpinned by sustainable, maintainable, and scalable code. I took responsibility for every aspect—from redesigning the user interface to developing new features and establishing modern engineering practices to ensure maintainability and future growth.

Leveraged React.js and Bootstrap to create responsive and accessible layouts optimized across all devices, implementing the BEM methodology for maintainable styles.

Example: Advanced Responsive Component Structure

import { Container, Row, Col } from 'react-bootstrap';

const DomainPricingSection = () => (
  <section className="pricing-section py-5">
    <Container>
      <Row className="justify-content-center">
        <Col md={4}>
          <PricingCard title="Standard" price="$9.99" features={standardFeatures} />
        </Col>
        <Col md={4}>
          <PricingCardFeatured title="Professional" price="$49" features={proFeatures} />
        </Col>
        <Col md={4}>
          <PricingCard title="Business" price="$99" features={businessFeatures} />
        </Col>
      </Row>
    </Container>
  </section>
);

Implemented performance-driven solutions, including optimized assets, image compression, lazy loading with dynamic imports, and precise meta-tagging for enhanced SEO visibility.

Example: Lazy Loading with Dynamic Imports

import { lazy, Suspense } from 'react';

const LazyDomainChecker = React.lazy(() => import('./components/DomainChecker'));

export const HomePage = () => (
  <Suspense fallback={<Loader />}>
    <LazyDomainChecker />
  </Suspense>
);

Structured Data Implementation

Improved search ranking and visibility through structured JSON-LD schema integration:

import { Helmet } from 'react-helmet';

const structuredData = {
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Domain Registration",
  "description": "Register your ideal domain effortlessly at Name.am",
  "brand": { "@type": "Brand", "name": "Name.am" }
};

Refactored entire frontend architecture into TypeScript, using modular components, reusable hooks, and robust testing practices.

Reusable Custom Hook Example (React Query)

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

export const useDomainAvailability = (domain: string) => {
  return useQuery(['domainAvailability', domain], async () => {
    const response = await axios.get(`/api/check-domain?domain=${domain}`);
    return response.data;
  });
};

Implemented comprehensive automated testing, ensuring reliable deployments and improved code stability.

Testing Component Interaction Example

import { render, screen, fireEvent } from '@testing-library/react';
import DomainSearch from './DomainSearch';

test('executes domain search correctly', () => {
  const mockSearch = jest.fn();
  render(<DomainSearch onSearch={mockSearch} />);
  
  fireEvent.change(screen.getByPlaceholderText('Search domain...'), { target: { value: 'test.am' } });
  fireEvent.click(screen.getByText('Search'));

  expect(mockSearch).toHaveBeenCalledWith('example.am');
});

Developed and integrated an innovative AI-powered domain suggestion feature using OpenAI's API, allowing users to find available domains effortlessly.

Example: AI Integration for Domain Suggestions

import OpenAI from 'openai';

export const getDomainSuggestions = async (query: string) => {
  const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

  const prompt = `Suggest creative and SEO-friendly domain names related to "${query}"`;

  const response = await openai.chat.completions.create({
    model: "gpt-4",
    messages: [{ role: "user", content: prompt }],
    max_tokens: 150,
  });

  return response.choices[0].message.content.split('\n').filter(Boolean);
};

Established secure practices and automated continuous integration/deployment (CI/CD) pipelines, streamlining and protecting the development-to-deployment lifecycle.

Example: CI/CD Pipeline (GitHub Actions)

name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test
      - name: Build project
        run: npm run build
      - name: Deploy to server
        uses: easingthemes/ssh-deploy@v2
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: ./build
          target: /var/www/name.am

• Enhanced User Engagement: Significant improvement in user retention, session duration, and overall satisfaction due to modernized UX.
• SEO Performance: Noticeable increase in organic search rankings and traffic through meticulous optimization.
• Sustainable Growth: Robust architecture and automated testing enabled seamless updates, scalability, and faster feature implementation.

My work at Name.am exemplifies my commitment to delivering impactful frontend solutions—demonstrating mastery of React.js, SEO best practices, and modern web development. The addition of AI integration highlighted my ability to innovate, making Name.am not only technologically advanced but also strategically positioned for future growth.