Website can be found here.
Forked from the incredible Tailwind-Nextjs-Starter-Blog by Tim Lrx.
Check out the starter documentation or fork this project and start building your own blog!
I was inspired by the Tailwind-Nextjs-Starter-Blog and decided to fork it to build my own blog. While working on my own personal blog, I remembered my good friend, Reuben Hardern was starting his own podcast. I offered to build him a small website to get his podcast started.
As a 8-month, self-taught developer, I thought this would be a great introduction to Next.js and Tailwind.
I took inspiration from the other blogs linked in the README.md of the Tailwind-Nextjs-Starter-Blog to help me with design principles and styling.
YoutubeEmbed components is a simple way of embedding a YouTube video into a page. It accepts a YouTube video ID and renders the video.
YoutubeDescription component returns the description of a YouTube video in a <p> tag. The google API returns a string containing multiple \n characters, which renders in a strange way. This component splits on the \n characters and maps over each item, returning the item in a <p> tag.
latestVideo component returns the latest video from the channel. It uses the getDescription function to get the relevant text from the YouTube video description.
detailedYoutubeIDFetch function gets specific details for a given YouTube video ID. This information is not available in the general list search API.
Buzzsprout is a podcasting website. It has a RSS feed for each of its channels. This is where I used the RSS feed to get the latest episode from each channel and display a playable component for each episode.
I used React Audio Player to display the audio player.
Customization of this component can be found in the EpisodeList component.
- Created sticky navbar, becomes transparent when scrolling down.
- Social media and audio platform icons change to their brand colors when hovered.
- Homepage posts are displayed in a grid. Each card contains a thumbnail, title, description, tags, and a link to the post.
Run npm start to start the development server. Navigate to the localhost:3000 URL to view the site.
Run node ./scripts/compose.js to bootstrap a new post.