podcastrnext Download - podcastrnext Source Code Download

podcastrnext

Données du site Web

1.0.0

Télécharger

Le meilleur à écouter, toujours

? Sur

Podcastr

PodCastr est le projet développé lors de la nouvelle édition React de la Semaine Next Level , un événement en ligne produit par RocketsEat .

Il s'agit d'une application Web qui permet aux utilisateurs d'écouter leurs podcasts préférés, de voir les dernières versions et d'obtenir plus d'informations à partir des podcasts qu'ils écoutent actuellement.

PodCastr - Podcast Detail Page

Ce projet était très intéressant à développer, car pour le développement du lecteur audio, nous avons utilisé l'API HTML5 pour manipuler l'audio joué par l'utilisateur, ainsi que les événements et les états du joueur. De plus, il a été possible d'en savoir plus sur Next.js, qui est une réaction de framework qui permet la création d'applications Web avec SSR (rendu côté serveur).

Fonctionnalité

Liste avec les derniers versions du podcast
Détails du podcast sélectionnés
Affichage de la date actuelle
Joueur avec fonctions Shuffle, répétition, précédente, proche et jeu / pause, ainsi que la progression de l'épisode
Disposition réactive

Podcastr

Mode sombre / mode clair (commutateur)

Technologies et outils utilisés

Ce projet a été développé avec les technologies et les outils suivants:

React : Une bibliothèque JavaScript open source s'est concentrée sur la création d'interfaces utilisateur sur les pages Web. Il est maintenu par Facebook, Instagram, d'autres entreprises et une communauté de développeurs individuels. Il est utilisé sur Netflix, Imgur, Feedly, Airbnb, SeatGeek, Hellosign, Walmart et autres;
Next.js : un cadre de développement Web frontal qui ajoute de nouvelles fonctionnalités à la react, telles que le rendu côté serveur (SSR) et le SSG (génération de site statique). Nous utilisons cet outil en pensant à l'optimisation des performances et à une meilleure indexation dans les moteurs de recherche (SEO - Optimisation des moteurs de recherche).
TypeScript : un super ensemble de langues JavaScript qui fournit des classes, des interfaces et un typage statique en option. Utilisé en conjonction avec React sur le Frontand Web;
SASS : un pré-processeur CSS qui étend la syntaxe CSS conventionnelle, nous donnant un contrôle plus professionnel et dynamique aux feuilles de style;
Axios : Il s'agit d'un client HTTP basé sur les promesses de faire des demandes.
GIT : le système de contrôle open source le plus utilisé;
Code Visual Studio : un éditeur de code source développé par Microsoft pour Windows, Linux et MacOS, recommandé pour le développement d'applications Web;

? Mise en page

La disposition des écrans d'application PodCastr a été développée par l'équipe RocketsEat via l'outil FIGMA Online, un logiciel de prototypage axé sur la conception de l'interface utilisateur (conception de l'interface utilisateur) . Vous pouvez accéder à la mise en page via ce lien: PodCastr .

? Installation et exécution

Pour télécharger la source du projet sur votre machine, vous devrez d'abord avoir installé Git .

Avec le GIT installé, sur votre terminal, exécutez la commande suivante:

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

Pour installer les locaux et exécuter le projet, vous devrez avoir installé le Node.js , qui est accompagné du NPM. Avec il installé:

Installez les installations du projet:

npm install

Exécutez le projet:

npm run dev

# ou

yarn dev

Comment contribuer

Faire une fourche de ce référentiel;
Créez une branche pour votre fonctionnalité: git checkout -b minha-feature ;
Faites un engagement avec vos modifications: git commit -m 'feat: Minha nova feature' ;
Poussez pour votre branche: git push origin minha-feature ;
Tirez la demande avec votre fonctionnalité;