podcastrnext Download - podcastrnext Source code download

podcastrnext

Website data

1.0.0

Download

The best for you to listen, always

? On

Podcastr

Podcastr is the project developed during the New Edition React Track of Next Level Week , an online event produced by Rocketseat .

This is a web application that allows users to listen to their favorite podcasts, see the latest releases, and get more information from the podcasts they are currently listening to.

Podcastr - Podcast detail page

This project was very interesting to develop, because for the development of the audio player, we used the HTML5 API to manipulate the audio being played by the user, as well as the events and states of the player. In addition, it was possible to learn more about Next.JS, which is a Framework React that allows the creation of web applications with SSR (Server Side Rendering).

Feature

List with the latest podcast releases
Selected podcast details
Current date display
Player with shuffle functions, repetition, previous, near and play/pause, as well as the progression of the episode
Responsive layout

Podcastr

Dark Mode / Light Mode (switch)

Technologies and tools used

This project was developed with the following technologies and tools:

React : An open source JavaScript library focused on creating user interfaces on web pages. It is maintained by Facebook, Instagram, other companies and a community of individual developers. It is used on Netflix, Imgur, Feedly, Airbnb, Seatgeek, Hellosign, Walmart and others;
Next.js : A front-end web development framework that adds new features to the react, such as Server-Side Rendering (SSR) and SSG (Static Site Generation). We use this tool thinking of performance optimization and better indexing in search engines (SEO - Search Engine Optimization).
TypeScript : A super set of JavaScript language that provides classes, interfaces and optional static typing. Used in conjunction with react on the web frontand;
SASS : A CSS pre-processor that extends the conventional CSS syntax, giving us a more professional and dynamic control to style leaves;
Axios : It is an HTTP client based on promises to make requests.
GIT : The most widely used open source control system;
Visual Studio Code : A source code editor developed by Microsoft for Windows, Linux and MacOS, recommended for the development of web applications;

? Layout

The PodcastR application screens layout was developed by the RocketSeat team through the Figma Online tool, a prototyping software focused on UI Design (user interface design) . You can access the layout through this link: podcastr .

? Installation and Execution

To download the project source on your machine, you will first have to have installed Git .

With the git installed, on your terminal run the following command:

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

To install the premises and run the project you will have to have installed the Node.JS , which is accompanied by the NPM. With it installed:

Install the project facilities:

npm install

Run the project:

npm run dev

# ou

yarn dev

How to contribute

Make a fork of this repository;
Create a branch for your feature: git checkout -b minha-feature ;
Make a Commit with your changes: git commit -m 'feat: Minha nova feature' ;
Push for your branch: git push origin minha-feature ;
Pull Request with your feature;