Giter Site home page Giter Site logo

podcastr's Introduction

GitHub language count GitHub last commit Repository size status Feito por Caio Fuccio License


Podcastr


SobreFuncionalidadesLayoutComo executarTecnologiasAutorLicença


🚧 Em construção (melhorias) 🚧



💻 Sobre

O Podcastr é um web app para ancoragem de episódios de podcast com um player embutido, onde você pode ouvir seus episódios favoritos.

Essa aplicação foi feita utilizando React, Next.js, Typescript, Sass e o servidor utilizado é do tipo Fake API com JSON Server.

Ela foi construída durante a quinta edição do Next Level Week, oferecido pela Rocketseat, na trilha de React.



⚙️ Funcionalidades

A aplicação é do tipo Single Page Application (SPA) e conta com uma página home onde podem ser vistos os últimos episódios lançados, todos os episódios e conta com um player para reproduzir os episódios. Ao clicar em qualquer episódio você será redirecionado(a) à página de detalhes, que conta com a descrição detalhada do mesmo.

Na página Home você pode:

  • Visualizar e selecionar episódios para ouvir
  • Entrar na página dos episódios
  • Ver informações como duração, participantes e data de publicação.

Na página de cada episódio você pode:

  • Ver todas as informações apresentadas na home e a descrição do episódio em detalhes
  • Reproduzir o episódios

No player, que sempre estará visível, você pode:

  • Visualizar qual episódio está sendo reproduzido
  • Dar play, pausar, avançar para o próximo episódio ou retroceder
  • Alterar o tempo de reprodução a partir do Slider
  • Selecionar o modo aleatório
  • Selecionar a repetição do episódio


🖼️ Layout


Tela Home

Tela Home com player tocando episódio

Tela do episódio



Gif com demonstração de uso da aplicação



🧰 Como executar

# Clone o repositório
$ git clone [email protected]:caiofuccio/podcastr.git

# Instale as dependências
$ yarn

# Inicie a Fake API com JSON Server
$ yarn server

# Execute a aplicação
$ yarn start

# A aplicação será aberta na porta:3000 - acesse https://localhost:3000


🚀 Tecnologias

HTML5 CSS3
JavaScript TypeScript
React Next JS SASS



👨‍💻 Autor

Caio Fuccio
Caio Fuccio
Front-End Developer | ReactJS

Linkedin badge Linkedin badge



⚖️ Licença

Este projeto está sob a licença MIT.

Acesse o arquivo de LICENSE para mais informações.

podcastr's People

Contributors

caiofuccio avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.