An online podcast player. Using SSG (Static Site Generation) through a Next server and dynamic rendering with ReactJS, a website was built to play podcasts. System created during the Rocketseat event known as NLW or New Level Week.
Technologies used in the project.
- Node version 14.16.1
- Typescript version 4.2.4
- Next version 10.2.0
- React version 17.0.2
- SCSS version 1.32.11
- Git
1º Clone the project and install dependencies (with YARN):
yarn
2º Once installed all dependencies, you will need json-server as the extension of development to run an artificial server.
yarn add json-server -D
After installing it, just run the following command as it is already configured in package.json. This is the API server which is located at the root of the project.
yarn server
3º With the API server running, now you need to run the react/next server with:
yarn dev
4º In your browser, refer to localhost/3000 to access the site.
1º On the home page without mystery you will have practically all the features. Just click the play button to play a podcast. With the auxiliary buttons, it is possible to pass and return audio, shuffle and repeat a specific podcast:
2º When you click on the title of a podcast, you will be redirected to its page that contains details about it and you will be able to play it:
- Suggestions:
- Make the site responsive
- Create a PWA to run locally
- Create desktop version with Electron
- Add the DARK theme
- Repository: https://github.com/Jackie098/nlw05-reactjs
- In case of doubts or suggestions, feel free to get in touch and/or request pull requests.
- Rocketseat: (https://github.com/Rocketseat)