podcastrnext

Lo mejor para que escuches, siempre

Acerca de | Características | Tecnologías y herramientas utilizadas | Diseño | Instalación y ejecución | Cómo contribuir | Contacto | Licencia

? En

Podcastr es el proyecto desarrollado durante la nueva pista React de la Semana Next Level , un evento en línea producido por Rocketteat .

Esta es una aplicación web que permite a los usuarios escuchar sus podcasts favoritos, ver los últimos lanzamientos y obtener más información de los podcasts que están escuchando actualmente.

Este proyecto fue muy interesante de desarrollar, porque para el desarrollo del reproductor de audio, utilizamos la API HTML5 para manipular el audio que el usuario reproduce, así como los eventos y estados del reproductor. Además, fue posible aprender más sobre Next.js, que es un marco React que permite la creación de aplicaciones web con SSR (representación del lado del servidor).

Característica

• Lista con los últimos lanzamientos de podcasts
• Detalles del podcast seleccionado
• Pantalla de fecha actual
• Jugador con funciones de Shuffle, repetición, anterior, cerca y juego/pausa, así como la progresión del episodio
• Diseño receptivo

• Modo oscuro / modo de luz (interruptor)

Tecnologías y herramientas utilizadas

Este proyecto se desarrolló con las siguientes tecnologías y herramientas:

• React : una biblioteca JavaScript de código abierto centrada en crear interfaces de usuario en páginas web. Es mantenido por Facebook, Instagram, otras compañías y una comunidad de desarrolladores individuales. Se usa en Netflix, Imgur, Feedly, Airbnb, Seatgeek, HelloSign, Walmart y otros;

• Next.js : un marco de desarrollo web front-end que agrega nuevas características al React, como la representación del lado del servidor (SSR) y SSG (generación de sitios estática). Utilizamos esta herramienta pensando en la optimización del rendimiento y una mejor indexación en los motores de búsqueda (SEO - Optimización del motor de búsqueda).

• TypeScript : un súper conjunto de lenguaje JavaScript que proporciona clases, interfaces y tipificación estática opcional. Utilizado junto con React en la red delantera y;

• Sass : un preprocesador CSS que extiende la sintaxis CSS convencional, dándonos un control más profesional y dinámico a las hojas de estilo;

• Axios : es un cliente HTTP basado en promesas para realizar solicitudes.

• Git : el sistema de control de código abierto más utilizado;

• Código Visual Studio : un editor de código fuente desarrollado por Microsoft para Windows, Linux y MacOS, recomendado para el desarrollo de aplicaciones web;

? Disposición

El diseño de pantallas de aplicaciones Podcastr fue desarrollada por el equipo de Rocketteat a través de la herramienta Figma Online, un software de creación de prototipos centrado en el diseño de la interfaz de usuario (diseño de interfaz de usuario) . Puede acceder al diseño a través de este enlace: Podcastr .

? Instalación y ejecución

Para descargar la fuente del proyecto en su máquina, primero tendrá que haber instalado GIT .

Con el git instalado, en su terminal ejecuta el siguiente comando:

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

Para instalar las instalaciones y ejecutar el proyecto, deberá haber instalado Node.js , que está acompañado por el NPM. Con él instalado:

Instale las instalaciones del proyecto:

npm install

Ejecute el proyecto:

npm run dev

# ou

yarn dev

Cómo contribuir

• Hacer una bifurcación de este repositorio;
• Cree una rama para su característica: git checkout -b minha-feature ;
• Comprométase con sus cambios: git commit -m 'feat: Minha nova feature' ;
• Push for Your Branch: git push origin minha-feature ;
• Solicite la solicitud con su característica;

Las solicitudes de extracción siempre son bienvenidas. Si tiene alguna pregunta o sugerencia, cree un problema o contácteme.

? Contacto

Contáctame por correo electrónico o mi LinkedIn:

Licencia

Este proyecto está bajo la licencia MIT . Consulte el archivo de licencia para obtener más detalles.

---

© 2021 - Matheus Ribeiro