{"id":25855571,"url":"https://github.com/mathrb22/podcastrnext","last_synced_at":"2025-03-01T17:19:11.817Z","repository":{"id":43776936,"uuid":"360192163","full_name":"mathrb22/podcastrnext","owner":"mathrb22","description":"Podcastr é uma aplicação web desenvolvida durante a 5ª edição do evento Next Level Week da @rocketseat 🚀🎙️","archived":false,"fork":false,"pushed_at":"2022-10-07T02:05:07.000Z","size":20327,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-05-23T02:36:28.301Z","etag":null,"topics":["frontend","nextjs","podcast","podcast-player","reactjs","sass","ssg","ssr","typescript","web-application"],"latest_commit_sha":null,"homepage":"https://mathrb22-podcastrnext.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mathrb22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-21T14:03:20.000Z","updated_at":"2023-04-05T05:18:33.000Z","dependencies_parsed_at":"2023-01-19T14:45:23.741Z","dependency_job_id":null,"html_url":"https://github.com/mathrb22/podcastrnext","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2Fpodcastrnext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2Fpodcastrnext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2Fpodcastrnext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathrb22%2Fpodcastrnext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathrb22","download_url":"https://codeload.github.com/mathrb22/podcastrnext/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241396932,"owners_count":19956447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","nextjs","podcast","podcast-player","reactjs","sass","ssg","ssr","typescript","web-application"],"created_at":"2025-03-01T17:19:11.219Z","updated_at":"2025-03-01T17:19:11.811Z","avatar_url":"https://github.com/mathrb22.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n   \u003cimg alt=\"podcastr\" src=\".github/podcastr.svg\" width=\"40%\"/\u003e\n   \u003ch3\u003eO melhor para você ouvir, sempre\u003c/h3\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003e\n   \u003ca href=\"https://github.com/mathrb22\"\u003e\n      \u003cimg alt=\"Made by mathrb22\" src=\"https://img.shields.io/badge/made%20by-mathrb22-yellow\"\u003e\n   \u003c/a\u003e\n\n   \u003cimg alt=\"GitHub Repo Size\" src=\"https://img.shields.io/github/repo-size/mathrb22/podcastrnext\"\u003e\n\n   \u003cimg alt=\"GitHub Language Count\" src=\"https://img.shields.io/github/languages/count/mathrb22/podcastrnext\"\u003e\n\n   \u003ca aria-label=\"React Version\" href=\"https://github.com/facebook/react/blob/master/CHANGELOG.md#1702-march-22-2021\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/react-17.0.2-informational?logo=react\"\u003e\u003c/img\u003e\n   \u003c/a\u003e\n\n   \u003ca href=\"https://github.com/mathrb22/podcastrnext/commits/main\"\u003e\n      \u003cimg alt=\"GitHub Last Commit\" src=\"https://img.shields.io/github/last-commit/mathrb22/podcastrnext\"\u003e\n   \u003c/a\u003e\n\n   \u003ca href=\"https://github.com/mathrb22/podcastrnext/issues\"\u003e\n      \u003cimg alt=\"GitHub Issues\" src=\"https://img.shields.io/github/issues/mathrb22/podcastrnext\"\u003e\n   \u003c/a\u003e\n\n   \u003ca href=\"https://github.com/mathrb22/podcastrnext/pulls\"\u003e\n      \u003cimg alt=\"Pull Requests Welcome\" src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\"\u003e\n   \u003c/a\u003e\n\n   \u003ca href=\"https://github.com/mathrb22/podcastrnext/blob/main/LICENSE.md\"\u003e\n      \u003cimg alt=\"GitHub License\" src=\"https://img.shields.io/github/license/mathrb22/podcastrnext\"\u003e\n   \u003c/a\u003e\n   \u003c/br\u003e\n   \u003c/br\u003e\n   \u003ca href=\"#-tecnologias-utilizadas\"\u003e\n      \u003cimg alt=\"React\" src=\"https://img.shields.io/badge/react%20-%2320232a.svg?\u0026style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB\"\u003e\n      \u003cimg alt=\"Next\" src=\"https://img.shields.io/badge/next%20js%20-%23000000.svg?\u0026style=for-the-badge\u0026logo=next.js\u0026logoColor=white\"\u003e\n      \u003cimg alt=\"TypeScript\" src=\"https://img.shields.io/badge/typescript%20-%23007ACC.svg?\u0026style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"\u003e\n      \u003cimg alt=\"SASS\" src=\"https://img.shields.io/badge/SASS%20-hotpink.svg?\u0026style=for-the-badge\u0026logo=SASS\u0026logoColor=white\"/\u003e\n   \u003c/a\u003e\n\u003c/div\u003e\n\n\u003c/br\u003e\n\u003cdiv align=\"center\"\u003e\n\n[**Sobre**](#-sobre) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Features**](#-features) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Tecnologias e ferramentas utilizadas**](#-tecnologias-e-ferramentas-utilizadas) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Layout**](#-layout) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Instalação e execução**](#-instalação-e-execução) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Como contribuir**](#-como-contribuir) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Contato**](#-contato) \u0026nbsp;\u0026nbsp;**|**\u0026nbsp;\u0026nbsp;\n[**Licença**](#-licença)\n\n\u003c/div\u003e\n\n## 📃 Sobre\n\n\u003cimg src=\".github/podcastr-playing-dark.png\" alt=\"Podcastr\" /\u003e\n\n**Podcastr** é o projeto desenvolvido durante a trilha de React da quinta edição da **Next Level Week**, um evento online produzido pela [**Rocketseat**](https://github.com/Rocketseat).\n\nEsta é uma aplicação web que permite os usuários ouvirem seus podcasts favoritos, ver os últimos lançamentos e obter mais informações dos podcasts que estiverem ouvindo no momento.\n\n\u003cimg src=\".github/podcastr-details-dark.png\" alt=\"Podcastr - Página de detalhes do podcast\" /\u003e\n\n\u003cbr/\u003e\n\n\u003e Este projeto foi muito interessante de desenvolver, pois para o desenvolvimento do player de áudio, utilizamos a API do HTML5 para manipular o áudio sendo tocado pelo usuário, assim como os eventos e estados do player. Além disso, foi possível aprender mais sobre o Next.js, que é um framework React que permite a criação de aplicações web com SSR (Server Side Rendering).\n\n## ✨ Features\n\n- [x] Lista com os últimos lançamentos de podcasts\n- [x] Detalhes do podcast selecionado\n- [x] Exibição da data atual\n- [x] Player com funções de shuffle, repetição, anterior, próximo e play/pause, além da progressão do episódio\n- [x] Layout responsivo\n\n\u003cimg src=\".github/podcastr-mobile-screens.png\" alt=\"Podcastr\" /\u003e\n\n- [x] Dark mode / Light mode (Switch)\n\n## 🚀 Tecnologias e ferramentas utilizadas\n\nEste projeto foi desenvolvido com as seguintes tecnologias e ferramentas:\n\n- [**React**](https://reactjs.org/): uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário (frontend) em páginas web. É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. É utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros;\n\n- [**Next.js**](https://nextjs.org/): um framework de desenvolvimento web front-end que adiciona novas funcionalidades ao React, como SSR (Server-side Rendering) e SSG (Static Site Generation). Utilizamos esta ferramenta pensando na otimização de performance e uma melhor indexação em mecanismos de busca (SEO - Search Engine Optimization).\n\n- [**TypeScript**](https://www.typescriptlang.org/): um super conjunto da linguagem JavaScript que fornece classes, interfaces e tipagem estática opcional. Utilizado em conjunto com React no frontend web;\n\n- [**Sass**](https://sass-lang.com/): um pré-processador CSS que estende a sintaxe do CSS convencional, nos dando um controle mais profissional e dinâmico às folhas de estilo (stylesheets);\n\n- [**Axios**](https://axios-http.com/): é um cliente HTTP baseado em Promises para fazer requisições.\n\n- [**Git**](https://git-scm.com/downloads): o sistema de controle de versão distribuído de código aberto mais utilizado;\n\n- [**Visual Studio Code**](https://code.visualstudio.com/): um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS, recomendado para o desenvolvimento de aplicações web;\n\n## 📟 Layout\n\nO layout das telas da aplicação **Podcastr** foi desenvolvido pela equipe da **Rocketseat** através da ferramenta online [**Figma**](https://www.figma.com), um software de prototipação voltado para **UI Design (design de interfaces de usuário)**.\nVocê pode acessar o layout através deste link: [**Podcastr**](https://www.figma.com/file/UwFEntsHpHYJlHNQAQr4gA/Podcastr/duplicate).\n\n## 🔧 Instalação e execução\n\nPara baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o [**Git**](https://git-scm.com/).\n\nCom o Git instalado, em seu terminal execute o seguinte comando:\n\n```bash\ngit clone https://github.com/mathrb22/podcastrnext.git\n```\n\nPara instalar as dependências e executar o projeto terá que ter instalado em sua máquina o [**Node.js**](https://nodejs.org/en/), que vem acompanhado do NPM. Com ele instalado:\n\nInstale as dependências do projeto:\n\n```bash\nnpm install\n```\n\nExecute o projeto:\n\n```bash\nnpm run dev\n\n# ou\n\nyarn dev\n\n```\n\n## 💡 Como contribuir\n\n- Faça um **_fork_** desse repositório;\n- Crie um **branch** para a sua feature: `git checkout -b minha-feature`;\n- Faça um **commit** com suas alterações: `git commit -m 'feat: Minha nova feature'`;\n- Faça um **push** para o seu branch: `git push origin minha-feature`;\n- Faça um **pull request** com sua feature;\n\nPull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma _**issue**_ ou entre em contato comigo.\n\n## 📲 Contato\n\nEntre em contato comigo por e-mail ou pelo meu LinkedIn:\n\n\u003ca href=\"mailto:math.ribeiro.dev@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/Gmail-D14836?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" alt=\"Gmail\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/matheus-ribeiro-dev/\"\u003e\u003cimg src=\"https://img.shields.io/badge/linkedin%20-%230077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn\"/\u003e\u003c/a\u003e\n\n## 📝 Licença\n\n\u003ca href=\"https://github.com/mathrb22/podcastrnext/blob/main/LICENSE.md\"\u003e\n    \u003cimg alt=\"GitHub License\" src=\"https://img.shields.io/github/license/mathrb22/podcastrnext\"\u003e\n\u003c/a\u003e\n\nEsse projeto está sob a licença **MIT**. Veja o arquivo _**LICENSE**_ para mais detalhes.\n\n---\n\n\u003ch5 align=\"center\"\u003e\n  \u0026copy;2021 - \u003ca href=\"https://github.com/mathrb22/\"\u003eMatheus Ribeiro\u003c/a\u003e\n\u003c/h5\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathrb22%2Fpodcastrnext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathrb22%2Fpodcastrnext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathrb22%2Fpodcastrnext/lists"}