🎉 Aplicação finalizada! 🎉

👉 Sobre

👉 Funcionalidades

👉 Layout

👉 Demonstração

👉 Como executar

👉 Tecnologias

👉 Autor

👉 Licença

💻 Sobre o projeto

🎧 Projeto da NLW #05 da Rocketseat, uma aplicação para ouvir podcasts.

⚙️ Funcionalidades

• Header da aplicação;
• Player:
  • Tocar música se estiver selecionada;
  • Botão shuffle - para tocar os podcasts de forma aleatória;
  • Botão replay - para dar replay no podcast assim que acabar;
  • Botão next - ir para o próximo podcast;
  • Botão previous - voltar para o podcast anterior;
  • Barra deslizante - pode deslizar na barra para mudar o tempo do podcast.
• Página Home:
  • Listagem dos 2 últimos episódios lançados na plataforma;
  • Lista com todos os demais episódios;
  • Pode tocar o episódio tocando no player ao lado dele.
• Página de Episódio:
  • Descrição e informações adicionais sobre o episódio;
  • Pode tocar o episódio ao pressionar o botão direito de player ao lado da thumbnail;
  • Pode voltar para a tela Home ao pressionar o botão esquerdo ao lado da thumbnail.
• Tema inspirado no Omni/Dracula;
• Utilização do json-server para consumir uma fake API;
• Utilização de Context para admnistrar o contexto do player.

🎨 Layout

Página Home

Página de Episódio

🕹️ Demonstração

🚀 Como executar o projeto

Este projeto contém 2 partes:

1. Frontend
2. Fake-Backend - ACESSE AQUI

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
Git, Node.js, Yarn.
Além disto é bom ter um editor para trabalhar com o código como VSCode

Váriaveis de Ambiente

Veja o arquivo .env.sample

🧭 Rodando a aplicação web (Frontend)

# Clone este repositório
$ git clone https://github.com/grochavieira/podcastr.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd podcastr
# Instale as dependências
$ yarn install
# Execute a aplicação em modo de desenvolvimento
$ yarn dev
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

Website (React + TypeScript)

• next.js
• css-Modules
• sass
• date-fns
• rc-slider
• json-server

Veja o arquivo package.json

Utilitários

• Editor: Visual Studio Code
• Fontes: Lexend, Inter

🦸‍♂️ Autor

_{🌟 Guilherme Rocha Vieira 🌟}

📝 Licença

Este projeto esta sobe a licença MIT.

Feito com por Guilherme Rocha Vieira 👋🏽 Entre em contato!