گیت سیتی، پروفایلت بهشکلِ ساختمانِ سهبعدی
فرانتاند
ریاکتخلاصهٔ کاملتر
گیت سیتی (Git City) یه پروژهٔ تفریحیه که هر پروفایلِ گیتهاب رو به یه ساختمانِ پیکسلآرت تو یه شهرِ سهبعدی و تعاملی تبدیل میکنه. به گفتهٔ سازنده هرچی بیشتر مشارکت کنی ساختمانت بلندتر میشه؛ میتونی بینِ ساختمونها پرواز کنی، سراغِ هرکدوم بری و توسعهدهندههای سراسرِ دنیا رو کشف کنی.
منطقِ کارش سادهست: ارتفاعِ ساختمان به تعدادِ کامیتها بستگی داره، عرضِ پایهش به تعدادِ ریپوهای عمومی، و روشناییِ پنجرهها به تعدادِ ستارهها؛ الگوی پنجرهها هم از فعالیتِ اخیر میآد. برای اینکه حتی با کلی ساختمان روون بمونه، از instanced mesh و سیستمِ LOD استفاده کرده؛ یعنی ساختمونای نزدیک با جزئیاتِ کامل و دورها با هندسهٔ سادهتر رندر میشن.
کنارِ خودِ شهر، هر توسعهدهنده یه صفحهٔ پروفایلِ اختصاصی با آمار و ریپوهای برتر داره. سیستمِ دستاورد (achievement)، سفارشیسازیِ ساختمان با آیتمهای فروشگاهی مثلِ تاج و هاله و افکتِ سقف، فرستادنِ kudos و هدیه به بقیه، حالتِ مقایسهٔ دو نفر کنارِ هم و کارتهای اشتراکگذاریِ قابلِ دانلود هم بهش اضافه شده.
از نظرِ فنی روی Next.js 16 با App Router و Turbopack سواره، بخشِ سهبعدیش با Three.js و react-three-fiber و drei کار میکنه، دیتابیس و احرازِ هویتش Supabase (پستگرس، GitHub OAuth و RLS) هست و پرداختش هم با Stripe انجام میشه. استایلش Tailwind v4 با یه فونتِ پیکسلیه و روی Vercel میزبانی میشه.
پروژه با لایسنسِ AGPL-3.0 متنبازه؛ یعنی میتونی استفاده و تغییرش بدی، ولی هر استقرارِ عمومی باید سورسش رو هم به اشتراک بذاره. نکتهٔ جالبش اینه که حتی میشه کلِ بکاندش رو با Supabase بهصورتِ لوکال بالا آورد و بدونِ حسابِ ابری امتحانش کرد.
نکات کلیدی:
- پروفایلِ گیتهاب بهشکلِ ساختمانِ پیکسلآرتِ سهبعدی تو یه شهرِ قابلِ پرواز
- ارتفاع = کامیتها، عرض = ریپوها، روشناییِ پنجرهها = ستارهها
- استفاده از instanced mesh و LOD برای رندرِ روونِ کلِ شهر
- دستاوردها، سفارشیسازیِ ساختمان، مقایسهٔ دو نفره و کارتِ اشتراکگذاری
- ساختهشده با Next.js، Three.js و Supabase؛ متنبازِ AGPL-3.0
