Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliolmuller/podcastr
Web application to share podcasts. Developed during the 5th edition of NLW, promoted by RocketSeat, using React, Next & TypeScript.
https://github.com/juliolmuller/podcastr
next-level-week nextjs nlw reactjs rocketseat typescript
Last synced: 24 days ago
JSON representation
Web application to share podcasts. Developed during the 5th edition of NLW, promoted by RocketSeat, using React, Next & TypeScript.
- Host: GitHub
- URL: https://github.com/juliolmuller/podcastr
- Owner: juliolmuller
- License: mit
- Created: 2021-04-20T02:12:25.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T03:04:30.000Z (over 1 year ago)
- Last Synced: 2024-11-15T01:34:08.706Z (3 months ago)
- Topics: next-level-week, nextjs, nlw, reactjs, rocketseat, typescript
- Language: TypeScript
- Homepage: https://jlm-podcastr.vercel.app/
- Size: 1.42 MB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Podcastr
Lessons Learned |
Technologies |
Environment Setup |
Features
Application developed during fifth edition of [Next Level Week](https://nextlevelweek.com/), delivered by [RocketSeat](https://rocketseat.com.br/). The objective was to build a frontend web application to share podcasts and listen to them. The project sought to implement the idea using **React.js** and the fantastic resources of **Next.js**.
[Check out the application running!](https://jlm-podcastr.vercel.app/)
## :trophy: Lessons Learned
- Building a **React** application on top of **Next**, using TypeScript and SASS;
- File-based routing delivered by **Next**;
- Taking advantage of **Server Side Rendering** (SSR);
- Configuring and taking advantage of the **Static Site Generation** (SSG) and the AMAZING **Incremental Static Regeneration** (ISR);
- Easily handling audio with HTML and React Hooks;
## :rocket: Technologies & Resources
**Frontend:**
- [React.js](https://reactjs.org)
- [Next.js](https://nextjs.org/)
- [axios](https://github.com/axios/axios)
**Frontend/Backend:**
- [Next.js](https://nextjs.org/)
- [JSON Server](https://github.com/typicode/json-server)
**Development:**
- [Visual Studio Code](https://code.visualstudio.com/)
- Node.js routines with NPM
- TypeScript
- ESlint
## :hammer: Setting up the Environment
Make sure to have **Node.js 14+** and **Yarn** (**NPM** will do the job as well) installed in your machine and its `node` and `yarn`/`npm` shortcuts available through the command line, then use the following command to install dependencies:
```bash
# using Yarn
$ yarn
# using NPM
$ npm install
```
This action should also create a `.env` file in the root of the project. If it was not created, use `.env.example` as reference to create it. This is only required to inform the backend URL where the REST API is running at.
When that's set, execute `npm start` to run **JSON Server** and then all the other routines can be run:
```bash
$ yarn dev # run Next development server in port 8080
$ yarn build # build Next project tp production
$ yarn prod # run Next server on built files (in port 8080)
```
If using **Yarn**, just replace `yarn` by `npm run` on the above commands.
## :zap: Features Implementations
The main idea of the project was developed during the week of the event and the result is the one found in [release v1.0](https://github.com/juliolmuller/Podcastr/releases/tag/v1.0). Afterwards, any incoming commits are intended to be incremental updates to improve the application, as proposed at the end of the event.
Besides, base project layout & design is available at **[Figma](https://www.figma.com/file/fDncpu5mCC4s3o4hHCpLZA/Podcastr)**.
- [x] Create project using `create-next-app`;
- [x] And support to TypeScript;
- [x] And support to SASS;
- [x] Understand *Next* key functionalities and folders structure;
- [x] Define custom fonts based on *Figma* mock-ups;
- [x] Define base HTML document configuration in a *Next* app;
- [x] Create key *React* components;
- [x] Define routes and how to pass params through them;
- [x] Make use of *Next* component-level CSS modules;
- [x] Create *React Context* to handle podcasts playing (Player Context);
- [x] Create a *REST API* for available podcasts with *JSON Server*;
- [x] Configure *Next* to generate static pages that refreshes automatically within an interval;
- [x] Configure *Next* to generate static pages that contain dynamic data to be displayed;
- [x] Work with *HTML audio tag* and *React **useRef** hook* to play podcasts;
- [x] Configure controls to play, pause, play previous, play next, repeat and shuffle playlists;
- [x] Worked with a *slider* component;
- [x] Deploy application to Vercel's server;
- [ ] Make application responsive;
- [ ] Add animations and transitions;
- [ ] Add functionality to rate/like a podcast;
- [ ] Add functionality to share a podcast on social media;
- [ ] Add counter for number of times a podcast was listened to;
- [ ] Convert application into a PWA;
---
Also checkout the project developed in [NLW #2](https://github.com/juliolmuller/proffy), [NLW #3](https://github.com/juliolmuller/happy), [NLW #4](https://github.com/juliolmuller/move.it) and [NLW #6](https://github.com/juliolmuller/letmeask).