VibetoArnold is a Next.js application that allows a user to search and enjoy a curated music collection including lyrics, videos, and audio snippets. The project uses Next.js, TypeScript, MDX, and styled using Tailwind CSS. Application content comes from MDX files hosted on GitHub. One cool feature about the web app is autocomplete search powered by Algolia Search.

vibetoarnold music blog live site

Tech Stack

  • Next.js
  • TypeScript
  • Tailwind CSS
  • MDX
  • Contentlayer
  • Prisma
  • PlanetScale
  • Cloudinary
  • Algolia

Purpose and Goal

I built this project as side project to showcase my growth as a software engineer and my love for hiphop music. The task was to create a website where users can get new music updates and personal curated recommendations.

The website had to meet the following technical requirements:

  • The website must use Next.js with TypeScript💓
  • The website must use MDX for content needs (MDX & Contentlayer).
  • Allow searching through the music catalog (Algolia Search).
  • The website must be mobile-friendly (responsive on all screens).
  • The site must include Google Analytics for website traffic stats.
  • Use Cloudinary for image hosting & optimization needs.
  • Every post must record the amount of times it has been visited (views) (API Routes).
  • Store views data in a database (PlanetScale & Prisma)

Upcoming features

  • A like button for every post to drive more engangement on the posts
  • A commenting system.