Andrej Srna

Ako som vytvoril web DnBDoctor.com

Ako som vytvoril web DnBDoctor.com

1. Použité technológie a dôvody ich výberu

Next.js

Pri výbere frameworku som sa rozhodol pre Next.js, pretože ponúka server-side rendering (SSR), čo výrazne pomáha s výkonom a SEO. Okrem toho Next.js podporuje automatické code splitting, čím sa stránka načítava rýchlejšie, a má natívnu podporu pre optimalizáciu obrázkov cez next/image, čo som využil na rôznych podstránkach.

TypeScript

Použil som TypeScript, pretože zabezpečuje lepšiu typovú kontrolu, čím minimalizuje chyby a zlepšuje udržiavateľnosť kódu. Pri rozsiahlejších projektoch to výrazne uľahčuje spoluprácu a refaktorovanie kódu.

Framer Motion

Pre animácie a prechody medzi stránkami som použil Framer Motion. Tento knižničný balík umožňuje jednoduchú implementáciu plynulých animácií, ktoré zlepšujú celkový UX webu.

SWR

Na data fetching a caching som využil SWR. Tento nástroj umožňuje automatické obnovenie dát a zlepšuje celkový výkon aplikácie.

next/font

Pre optimalizáciu fontov som použil next/font, ktorý umožňuje priame načítanie fontov a tým znižuje počet externých requestov.

2. Optimalizácia pre SEO

Metadata

Každá stránka obsahuje optimalizované metaúdaje, vrátane title, description a keywords, aby bola čo najlepšie indexovaná vyhľadávačmi.

Schema.org

Implementoval som Schema.org štruktúrované dáta, ktoré pomáhajú vyhľadávačom lepšie porozumieť obsahu stránky.

Robots.txt a Canonical URLs

Použil som robots.txt na kontrolu indexovania stránok a canonical URLs, aby som zabránil duplikovaniu obsahu vo vyhľadávačoch.

export async function generateMetadata(
  { params }: LayoutProps
): Promise<Metadata> {
  const { slug } = await params
  
  try {
    const response = await fetch(
      'https://admin.dnbdoctor.com/wp-json/wp/v2/posts?' + new URLSearchParams({
        slug,
        _embed: '1'
      }),
      { next: { revalidate: 3600 } }
    )
    const data = await response.json()
    const release = data[0]

    const title = release?.title?.rendered || 'Music Release'
    const description = release?.excerpt?.rendered?.replace(/<[^>]*>/g, '') || 'Check out this release on DnB Doctor'
    const releaseUrl = `https://dnbdoctor.com/music/${slug}`
    const imageUrl = release?._embedded?.['wp:featuredmedia']?.[0]?.source_url

    return {
      title: `${title} | DnB Doctor`,
      description,
      openGraph: {
        title: `${title} | DnB Doctor`,
        description,
        url: releaseUrl,
        siteName: 'DnB Doctor',
        images: imageUrl ? [
          {
            url: imageUrl,
            width: 1200,
            height: 630,
          }
        ] : [],
      },
      robots: {
        index: true,
        follow: true,
      },
    }
  } catch (error) {
    console.error('Error fetching release data:', error)
    return {
      title: 'Music Release | DnB Doctor',
      description: 'Check out our latest releases on DnB Doctor.',
    }
  }
}

3. Výkon a optimalizácia

Code Splitting

Next.js automaticky rozdeľuje kód na menšie časti, čím sa načítava len to, čo je potrebné.

Lazy Loading

Použil som lazy loading pre komponenty a obrázky, aby som zrýchlil načítanie stránky.

Caching

Na zlepšenie výkonu som implementoval caching na strane klienta (SWR) a revalidate interval na strane servera.

Optimalizácia obrázkov

Vďaka next/image som zabezpečil automatické škálovanie a optimalizáciu obrázkov.

4. Používateľská skúsenosť (UX)

Responzívny dizajn

Stránka je plne responzívna a optimalizovaná pre rôzne zariadenia.

Animácie a prechody

Použitím Framer Motion som vytvoril plynulé animácie, ktoré zlepšujú UX.

Prístupnosť

Dbal som na prístupnosť webu, aby bol použiteľný aj pre ľudí so zdravotným postihnutím.

5. Integrácia s externými službami

Facebook Pixel

Na sledovanie konverzií a remarketing som integroval Facebook Pixel.

Google Analytics

Použil som Google Analytics na sledovanie návštevnosti a správania používateľov.

SoundCloud

Stránka podporuje SoundCloud prehrávače, aby používatelia mohli priamo prehrávať hudbu.

Turnstile

Na ochranu formulárov som nasadil Turnstile.

6. Riešenie problémov a výziev

API integrácia

Najväčšou výzvou bola integrácia s WordPress API. Musel som riešiť problémy s CORS politikou a optimalizovať načítavanie dát.

Výkon

Riešil som dlhé načítavanie stránok, ktoré som optimalizoval cez caching, lazy loading a code splitting.

SEO

Pre zlepšenie SEO som optimalizoval metaúdaje a implementoval Schema.org dáta.

7. Zaujímavosti z vývoja

Vlastné hooks

Vytvoril som vlastné hooks, napríklad useLatestPosts, useMultipleMediaPreviews a useCategories, ktoré zjednodušujú správu dát.

Komponenty

Použil som znovupoužiteľné komponenty, ako napríklad AudioPreview, SocialShare a SubscribeCTA.

Dynamické metaúdaje

Metaúdaje pre hudbu a články sa generujú dynamicky na základe obsahu.

8. Budúce plány

Ďalšie optimalizácie

Plánujem ďalšie vylepšenia výkonu a zlepšenie UX.

Nové funkcie

Chcem pridať viac interaktívnych prvkov a podporu pre viac hudobných platforiem.

Komunita

Snažím sa budovať aktívnu komunitu okolo DnB Doctor a podporovať začínajúcich producentov.

9. Bezpečnosť a ochrana údajov

HTTPS a SSL

Implementoval som SSL certifikát a HTTPS protokol pre bezpečnú komunikáciu medzi používateľom a serverom.

Ochrana formulárov

Pre ochranu pred spamom a automatizovanými útokmi som použil Cloudflare Turnstile, ktorý je menej invazívny ako tradičná CAPTCHA.

GDPR Compliance

Implementoval som komplexné GDPR riešenie vrátane správy cookies a možnosti exportu/vymazania používateľských údajov.

10. Technické detaily implementácie

Custom Hooks

Vytvoril som niekoľko vlastných hooks pre lepšiu organizáciu kódu:

  • useAudioPlayer – pre správu prehrávania hudby
  • useInfiniteScroll – pre nekonečné načítavanie obsahu
  • useLocalStorage – pre perzistentnú state management

State Management

Pre správu stavu aplikácie som použil kombináciu React Context API a SWR, čo umožňuje efektívnu prácu s dátami a ich automatickú synchronizáciu.

API Integrácie

Implementoval som vlastné API endpointy pre:

  • Správu newslettera
  • Spracovanie demo submisií
  • Integráciu pre automatické odosielanie “Promo” skladieb pre špecifický list v newsletteri
  • Celý newsletter je vlastný plugin v headless WordPress časti webu
  • Odosielanie newslettera funguje cez Brevo SMTP
  useEffect(() => {
    const fetchTrackInfo = async () => {
      try {
        // Support both track and track_id parameters
        const trackId = searchParams.get('track_id') || searchParams.get('track')
        const token = searchParams.get('token')

        if (!trackId) {
          throw new Error('Missing track ID parameter. Use track_id or track in URL.')
        }

        const info = await feedbackApi.getTrackInfo(parseInt(trackId), token || undefined)
        if (!info) {
          throw new Error('Track information not found')
        }
        
        setTrackInfo(info)
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load track information')
        console.error('Feedback form error:', err)
      } finally {
        setLoading(false)
      }
    }

    fetchTrackInfo()
  }, [searchParams])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!trackInfo || rating === 0) return
    
    const trackId = searchParams.get('track_id') || searchParams.get('track')
    const token = searchParams.get('token')
    
    if (!trackId) {
      setError('Missing track ID')
      return
    }

    try {
      setSubmitting(true)
      await feedbackApi.submitFeedback({
        track_id: parseInt(trackId),
        token: token || undefined,
        rating,
        feedback,
        name
      })
      setSuccess(true)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to submit feedback')
      console.error('Feedback submission error:', err)
    } finally {
      setSubmitting(false)
    }
  }

11. Monitoring a analytika

Error Tracking

Implementoval som error tracking systém pre monitorovanie a rýchle riešenie problémov v produkcii.

Performance Monitoring

Používam Web Vitals a Lighthouse pre sledovanie výkonu a optimalizáciu používateľskej skúsenosti.

User Analytics

Kombinujem dáta z Google Analytics a Facebook Pixel pre lepšie pochopenie správania používateľov.

12. Automatizácia a CI/CD

Deployment Pipeline

Vytvoril som automatizovaný deployment pipeline s testovaním a kontrolou kvality kódu.

Content Management

Automatizoval som proces publikovania obsahu a jeho distribúcie cez sociálne siete.

14. Záver a ponaučenia

Hlavné výzvy

Najväčšie výzvy zahŕňali optimalizáciu výkonu, integráciu rôznych API a zabezpečenie konzistentného používateľského zážitku.

Ponaučenia

Projekt ma naučil dôležitosť:

  • Dôkladného plánovania architektúry
  • Pravidelného testovania a monitoringu
  • Flexibilného prístupu k riešeniu problémov

Budúce vylepšenia

V budúcnosti plánujem:

  • Implementovať AI-powered odporúčací systém
  • Rozšíriť podporu pre viac streamovacích platforiem
  • Vytvoriť mobilnú aplikáciu