podcastrnext

الأفضل لك للاستماع ، دائمًا

حول | ميزات | التقنيات والأدوات المستخدمة | تخطيط | التثبيت والتنفيذ | كيفية المساهمة | الاتصال | رخصة

؟ على

Podcaster هو المشروع الذي تم تطويره خلال مسار React Edition الجديد في الأسبوع التالي ، وهو حدث عبر الإنترنت أنتجته Rocketseat .

هذا تطبيق ويب يتيح للمستخدمين الاستماع إلى البودكاست المفضل لديهم ، ومشاهدة أحدث الإصدارات ، والحصول على مزيد من المعلومات من البودكاست الذي يستمعون إليه حاليًا.

كان هذا المشروع مثيرًا للاهتمام للغاية ، لأنه بالنسبة لتطوير مشغل الصوت ، استخدمنا API HTML5 لمعالجة الصوت الذي يتم تشغيله من قبل المستخدم ، وكذلك أحداث وحالات اللاعب. بالإضافة إلى ذلك ، كان من الممكن معرفة المزيد حول Next.js ، وهو رد فعل إطار يسمح بإنشاء تطبيقات الويب باستخدام SSR (عرض جانب الخادم).

ميزة

• قائمة بأحدث إصدارات البودكاست
• تفاصيل البودكاست المختارة
• عرض التاريخ الحالي
• لاعب مع وظائف خلط ورق اللعب ، التكرار ، السابق ، بالقرب واللعب/توقف ، وكذلك تطور الحلقة
• تخطيط مستجيب

• الوضع المظلم / وضع الضوء (التبديل)

التقنيات والأدوات المستخدمة

تم تطوير هذا المشروع مع التقنيات والأدوات التالية:

• React : ركزت مكتبة JavaScript مفتوحة المصدر على إنشاء واجهات المستخدم على صفحات الويب. يتم الحفاظ عليه بواسطة Facebook و Instagram وشركات أخرى ومجتمع من المطورين الأفراد. يتم استخدامه على Netflix و Imgur و Feedly و Airbnb و Seatgeek و HelloSign و Walmart وغيرها ؛

• Next.js : إطار تطوير الويب الأمامي الذي يضيف ميزات جديدة إلى React ، مثل تقديم جانب الخادم (SSR) و SSG (توليد الموقع الثابت). نستخدم هذه الأداة التفكير في تحسين الأداء وفهرسة أفضل في محركات البحث (تحسين محركات البحث (SEO - محرك البحث).

• TypeScript : مجموعة رائعة من لغة JavaScript التي توفر الفصول والواجهات والكتابة الثابتة الاختيارية. يستخدم بالاقتران مع رد الفعل على مواجهة الويب.

• SASS : A CSS قبل المعالج الذي يمتد بناء جملة CSS التقليدية ، مما يمنحنا تحكمًا أكثر احترافية وديناميكية لأوراق الأناقة ؛

• Axios : إنه عميل HTTP يعتمد على وعود لتقديم الطلبات.

• GIT : نظام التحكم المفتوح المصدر الأكثر استخدامًا على نطاق واسع ؛

• رمز Visual Studio : محرر رمز المصدر الذي طورته Microsoft لنظام التشغيل Windows و Linux و MacOS ، موصى به لتطوير تطبيقات الويب ؛

؟ تَخطِيط

تم تطوير تخطيط شاشات تطبيق Podcastr من قبل فريق RocketSeat من خلال أداة Figma Online ، وهو برنامج النماذج الأولية يركز على تصميم واجهة المستخدم (تصميم واجهة المستخدم) . يمكنك الوصول إلى التصميم من خلال هذا الرابط: podcastr .

؟ التثبيت والتنفيذ

لتنزيل مصدر المشروع على جهازك ، سيتعين عليك أولاً تثبيت GIT .

مع تثبيت GIT ، على المحطة الخاصة بك ، قم بتشغيل الأمر التالي:

git clone https://github.com/mathrb22/podcastrnext.git

لتثبيت المباني وتشغيل المشروع ، سيتعين عليك تثبيت Node.js ، المصحوب بـ NPM. مع تثبيت:

تثبيت مرافق المشروع:

npm install

تشغيل المشروع:

npm run dev

# ou

yarn dev

كيفية المساهمة

• جعل شوكة من هذا المستودع.
• قم بإنشاء فرع لميزتك: git checkout -b minha-feature ؛
• ارتكب التزامًا بتغييراتك: git commit -m 'feat: Minha nova feature' ؛
• ادفع من أجل فرعك: git push origin minha-feature ؛
• سحب الطلب مع الميزة الخاصة بك ؛

طلبات السحب دائما موضع ترحيب. إذا كان لديك أي أسئلة أو اقتراحات ، فقم بإنشاء مشكلة أو اتصل بي.

؟ اتصال

اتصل بي عبر البريد الإلكتروني أو LinkedIn:

رخصة

هذا المشروع تحت رخصة معهد ماساتشوستس للتكنولوجيا . انظر ملف الترخيص لمزيد من التفاصيل.

---

© 2021 - Matheus Ribeiro