Podcastr

Lessons Learned   |    Technologies   |    Environment Setup   |    Features

Application developed during fifth edition of Next Level Week, delivered by RocketSeat. 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!

🏆 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;

🚀 Technologies & Resources

Frontend:

• React.js
• Next.js
• axios

Frontend/Backend:

• Next.js
• JSON Server

Development:

• Visual Studio Code
• Node.js routines with NPM
• TypeScript
• ESlint

🔨 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:

# 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:

$ 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.

⚡ 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. 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.

• Create project using create-next-app;
• And support to TypeScript;
• And support to SASS;
• Understand Next key functionalities and folders structure;
• Define custom fonts based on Figma mock-ups;
• Define base HTML document configuration in a Next app;
• Create key React components;
• Define routes and how to pass params through them;
• Make use of Next component-level CSS modules;
• Create React Context to handle podcasts playing (Player Context);
• Create a REST API for available podcasts with JSON Server;
• Configure Next to generate static pages that refreshes automatically within an interval;
• Configure Next to generate static pages that contain dynamic data to be displayed;
• Work with HTML audio tag and React useRef hook to play podcasts;
• Configure controls to play, pause, play previous, play next, repeat and shuffle playlists;
• Worked with a slider component;
• 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, NLW #3, NLW #4 and NLW #6.