ارفع أي ملف. احصل على رابط CDN.

تطبيق ويب مجاني لاستضافة الصور والفيديو، يرفع الوسائط إلى GitHub ويعيد روابط jsDelivr دائمة خلال ثوانٍ.

Next.jsTypeScriptCloudflare PagesGitHub APIjsDelivrTailwind

جرّبه

GitHub

استكشف الشاشات ابدأ مشروعاً

الصفحة الرئيسية لـ CloudSnap مع دعوة للرفع

الغاية

لماذا صُنع هذا المنتج.

رابط الصورة لا ينبغي أن يختفي، وCDN لا ينبغي أن يحتاج بطاقة ائتمان. CloudSnap يتيح للمطوّر إسقاط ملف، وامتلاك مستودع GitHub الذي يعيش فيه، والحصول على رابط jsDelivr مثبت على الـ commit يعمل حتى بعد حذف الملف.

من داخل المشروع

مدروس من البداية حتى النهاية.

5 نقاط بارزة

مسار GitHub كـ CDN: صمّمت تدفقاً يرفع الملفات إلى مستودع عام ويعيد روابط jsDelivr مثبتة على الـ commit تبقى متاحة للأبد.

متصفح ملفات كامل: بنيت رفعاً بالسحب والإفلات لعدة ملفات، وإدارة مجلدات، ومعاينة صور/فيديو، ونسخاً بنقرة لروابط CDN والـ raw.

واجهة مطوّرين: طرحت نقاط REST عامة وخاصة للرفع والقائمة والحذف وإنشاء المجلدات — قابلة للاستخدام من cURL أو JS أو Python.

نشر على الحافة: صُمم لـ Cloudflare Pages مع تسجيل PIN ومفتاح API ودعم صور حتى 100MB وفيديو حتى 500MB.

UI/UX: بنيت واجهة neo-brutalism صفراء وسوداء تركّز على السرعة والوضوح للمطوّرين الذين يستضيفون وسائط دون CDN مدفوع.

التحديات

القيود التي بنيت الحل حولها.

ما يبدو بسيطاً في الواجهة كان أصعب ما في التنفيذ.

01
روابط تعيش بعد الملف
المشكلة
روابط CDN المبنية على الفرع تنكسر فور حذف الأصل أو استبداله. Imgur وأشباهه تختفي لاحقاً.
كيف بنيت الحل
ثبّت كل رفع على الـ commit. رابط jsDelivr يشير إلى SHA في git، فتبقى البايتات على الحافة حتى لو تغيّر المستودع.
02
GitHub ليس مكتبة وسائط
المشكلة
واجهة GitHub تتحدث بالـ commits والـ blobs — لا بالمجلدات والمعاينات ونسخ روابط CDN.
كيف بنيت الحل
بنيت متصفح ملفات كاملاً: سحب وإفلات، إعادة تسمية، مجلدات، معاينة صور وفيديو، ونسخ بنقرة لروابط CDN والـ raw.
03
واجهة للبشر وAPI للسكربتات
المشكلة
رافع جميل بلا أتمتة عديم الفائدة، وAPI خام بلا واجهة عديم الفائدة إن كنت على الهاتف.
كيف بنيت الحل
طرحت نقاط REST عامة (بمفتاحك) وخاصة (بمفتاح API) بجانب واجهة Cloudflare Pages محمية بـ PIN — صور حتى 100MB وفيديو حتى 500MB بلا خادم أصل.