Kodlamağı öyrənmədən Pixel Icon Library Veb saytını necə kodladım (Təşəkkürlər, kursor AI!)

Bir dizayner olaraq, mən həmişə dizayn və texnologiyanın kəsişməsindən valeh olmuşam. Dizayner və tərtibatçı arasındakı boşluq məni həmişə maraqlandırıb - mən heç vaxt bu qədər tez keçəcəyimi gözləmirdim.

HackerNoon tərəfindən Pixel Icon Library, HackerNoon-un dizayn dilinin nostalji mahiyyətini əks etdirən pikselli nişanlar yaratmaq üçün əyləncəli dizayn layihəsi kimi başladı, lakin Figma Design faylını özüm tam funksional veb-sayta çevirdim? Kursor AI-ni kəşf edənə qədər bu, 2025-ci ildə kartımda deyildi. GitHub, xFigma və NPM vasitəsilə açıq mənbəli kitabxanaya sahib olmaqla biz həmişə bu nişanları cəmiyyət üçün daha əlçatan etmək istəyirdik. İdeya sadə idi: gəlin dizaynerlərin və tərtibatçıların öz layihələri üçün bu nişanları nəzərdən keçirə, axtara və yükləyə biləcəyi bir veb sayt yaradaq.

Problem? Kodlaşdırma ilə sözün əsl mənasında sıfır təcrübəm var idi.💀

Bu səyahət boyu tez mənim mentorum və bələdçimə çevrilən AI ilə işləyən kod redaktoru olan Cursor AI-ə daxil olun. Budur, mən süni intellekt yardımı və bəzi ciddi vibe kodlaşdırması ilə dizayndan tam staka qədər limitlərimi necə keçdim.

Sıfırdan başlayaraq

İlk addım qurmaq istədiklərimi müəyyənləşdirmək və artıq əldə etdiklərimi hesablamaq idi:

• SVG formatında piksel nişanlarının kitabxanası.
• Veb sayt üçün Figma dizaynı.
• Saytda istədiyim funksiyaların siyahısı.
• Bunu necə həyata keçirmək barədə heç bir fikrim yoxdur.

Pixel Icon Library GitHub Repository -də veb-sayt filialı qurmaqla başladım. Sonra Kursor AI quraşdırdım və işə başlamaq təəccüblü dərəcədə sadə oldu.

Kursor AI ilə layihənin qurulması

Kursor UI

Kursoru quraşdırdıqdan sonra növbəti şey yoxlamaq idi:

• GIT - versiyaya nəzarət üçün
• Node.js - NPM paketi üçün

Əsas əşyalar quraşdırıldıqdan sonra əllərimi çirkləndirməyin vaxtı gəldi. Repo-nu sistemimə klonladım, Kursor AI-də layihə qovluğunu açdım və daxili AI köməkçisi ilə söhbətə başladım.

Kursor Söhbət Pəncərəsi

Claude ilə möhkəm təcrübəm olub, prosesdə mənə rəhbərlik etmək üçün Agent rejimində Claude 3.7 Sonneti seçdim.

İlk sorğu ilə mən nəyi qurmaq istədiyimi qısaca izah etdim və layihənin əsas strukturu ilə birlikdə tələb olunan xüsusiyyətləri sadaladım, hansı çərçivə(lər)in səmərəlilik və sürətə üstünlük verməsi ilə bağlı təkliflər istədim. Kursor lazımi qovluq strukturunda kömək etdi və mənə layihə üçün HTML və Tailwind-dən yapışmağı təklif etdi. Hətta layihəyə başlamaq üçün lazım olan faylları yaratdı. Qovluq strukturunun bundan sonra necə göründüyü budur:

├── index.html

├── src/

│ ├── style.css

│ ├── output.css

├── assets/

├── fonts/

├── scripts/

Növbəti addım Tailwind-i qurmaq və UI ilə başlamaq idi.

Tailwind CSS-nin qurulması və UI-nin qurulması

Məni təəccübləndirən odur ki, Kursor Tailwind quraşdırmasını qarışdırdı və Tailwind v3.4 və v4.0-dan əmrləri qarışdırdı. Beləliklə, mənim addım atmağım vaxtı gəldi! Tailwindcss Quraşdırma Sənədlərinə keçdim və bu addımları izlədim:

• Tailwind quraşdırmaq üçün terminalı açın və işə salın:

  npm install tailwindcss @tailwindcss/cli

• Tailwind-i src/style.css faylına idxal edin:

  @import "tailwindcss";

• Quraşdırma Prosesini qurmaq üçün çalıştırın:

  npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch

• HTML-də Tailwind istifadə etməyə başlayın:

  <link href="/src/output.css" rel="stylesheet">

Tailwind quraşdırıldıqdan və siniflər istifadəyə hazır olduqdan sonra, Figma Dizaynıma uyğun olaraq daha mürəkkəb molekullar, orqanizmlər və səhifələr yaratmazdan əvvəl AI agenti üçün rəngləri, şriftləri və digər atomları təyin etməyə başladım.

Sonra layihədəki nişanlardan istifadə etmək üçün Pixel Icon Library NPM Paketini quraşdırdım. NPM Paketini quraşdırmaq üçün addımlar bunlardır:

• Paketi quraşdırın:

  npm i @hackernoon/pixel-icon-library

• HTML-də CSS-i idxal edin

  (Mən giriş asanlığı üçün bütün lazımi ikon şrift fayllarını /fonts qovluğuna köçürdüm.)

  <link href="/fonts/iconfont.css" rel="stylesheet">

• Simgeni göstərmək üçün əlavə edin

  <i class="hn hn-icon-name"></i>

UI üçün hər şeyi nizamlı saxlamaq və lazım olduqda əvvəlki iterasiyaya qayıtmağı asanlaşdırmaq üçün element-element yanaşmasını tətbiq etdim.

Budur sifariş:

• Nav bar
• Altbilgi
• Qəhrəman bölməsi
• Axtarış paneli
• Icon Cards & Grid
• Fərdi Nişan Modalı

Mən hover və klik vəziyyətlərini əlavə edərkən bütün bu elementlər üçün paddings, haşiyələr, sərhəd radiusu, rənglər və ölçüləri müəyyən etməyə əmin oldum. CSS xassələrinə əlavə olaraq, göstərişlərə cavab verən davranış və qarşılıqlı əlaqələri də daxil etdim.

Canlı Server Genişlənməsi

Icon Data Challenge & Axtarış Funksionallığının həyata keçirilməsi

UI Elementləri yerində olduqda, əsl çətinliyin vaxtı gəldi: hamar axtarış funksionallığını təmin edərkən bütün nişanları onların təfərrüatları ilə - Nişan Adı, Nişan Tipi Tag və SVG Kodu ilə göstərmək. Bunun aradan qaldırılması üçün Kursor strukturlaşdırılmış yanaşma təklif etdi:

• Simge metadata və SVG kodu ilə JSON faylının yaradılması
• Effektiv şəkildə göstərmək üçün JSON-dan məlumat yüklənir.
• İkon adı əsasında axtarışı həyata keçirin.
• İkon tipli teqlərə əsaslanan axtarış filtrləri əlavə edin - möhkəm, adi, brendlər/sosial media nişanları, purrcats

Bu prosesi daha da avtomatlaşdırmaq üçün Kursordan bütün ikon məlumatlarını /data/icons.json faylına əlavə etmək üçün skript yaratmağı xahiş etdim.

icons.json faylı

İndi axtarış işlədiyi halda, axtarış filtrləri yerində və ikon modalı nəzərdə tutulduğu kimi işlədiyindən, yalnız UI-yə qalan qarşılıqlı əlaqələri əlavə etmək, hərtərəfli sınaqdan keçirmək və yerləşdirmək qalırdı!

Yerləşdirmə və Beyond

UI-dən razı qaldıqdan və hər bir funksionallığı hərtərəfli sınaqdan keçirdikdən sonra növbəti çağırışın vaxtı gəldi - Yerləşdirmə!!!

Layihə statik bir sayt olduğu üçün mənə sürətli, pulsuz və asan saxlanılan hosting həllinə ehtiyacım var idi. GitHub Səhifələri ağılsız idi! Təklif etdi:

• GitHub repo ilə problemsiz inteqrasiya, yerləşdirməni asanlaşdırır.
• İstifadəsi pulsuzdur və bu kimi statik layihələr üçün ən uyğundur.
• Yeniləmələr çox asandır - sizə lazım olan tək şey öhdəlikdir!

Ancaq bütün kodumu depoya itələmədən və GitHub Səhifələri vasitəsilə yerləşdirmədən əvvəl kodu təmizləməli və istehsal problemlərini yoxlamalıydım. Kursor ilə sürətlə irəli-geri hərəkət etdikdən və bir neçə düzəlişdən sonra hər şey işə salınmağa hazır idi!

Layihənizi GitHub Səhifələri vasitəsilə yerləşdirmək üçün etməli olduğunuz hər şey budur:

• Bütün kodunuzu GitHub repo-ya köçürün və onun ictimai olduğundan əmin olun
• Repo üçün GitHub səhifələrinin aktivləşdirilməsi
  • Parametrlərə keçin
  • Səhifələr üzərinə klikləyin
  • Filialı “ Vebsayt ” olaraq təyin edin (Kodunuzun olduğu filial. Mənim vəziyyətimdə o, vebsayt filialında idi)
  • Saxla klikləyin
• Könüllü:
  • Fərdi domeninizi əlavə edin (istifadə etdiyim kimi: pixeliconlibrary.com)
  • DNS-i konfiqurasiya edin (Bununla bağlı mənə kömək etdiyi üçün Riçarda təşəkkürlər)
• Bir neçə dəqiqə gözləyin və veb saytınız CANLI olacaq!

PIXELICONLIBRARY

Pixel Icon Library | Open-Source Pixelated Icons By HackerNoon

HackerNoon's Pixel Icon Library is an open-source collection of meticulously designed pixelated icons. Crafted on a 24px grid for perfect alignment, inspired by HackerNoon's retro design vibes, these icons capture the essence of internet's golden days.

GitHub Səhifələri Parametrlər Səhifəsi

Qürur Ediləcək Məhsul

Piksel-art ikonlarının dizaynından tutmuş tam funksional sayta daxil olmaq üçün vibe-kodlaşdırmaya qədər bu layihə məni rahatlıq zonamdan ən yaxşı şəkildə kənara çıxardı. Geriyə nəzər saldıqda, bu, sadəcə veb-sayt yaratmaqdan daha çox şey idi - bu, mənim yaradıcı üfüqlərimi genişləndirmək və süni intellekt ilə dizayn və inkişaf arasındakı xəttin həmişəkindən daha tez bulandığını başa düşməkdən ibarət idi. Və mənə elə gəlir ki, gözümün önündə sonsuz bir yol açılıb.

Veb saytın arxasındakı koda nəzər salmaq istəyirsiniz? GitHub repo-nu yoxlayın!