Hive: Getting started with Web Development (2023)

This is from my presentation in 2023

This is project was created for a live coding session at Hive Helsinki. Goal of the session was to showcase how to get started with Web Development using React, Next.js, Tailwind CSS, and Spotify APIs.

Live at hive-spotify.vercel.app.

How to run the project

• Run npm install to install dependencies
• Add environment variables to .env. You can look for .env.example for examples
  • For this you will need to create Spotify application on their dashboard
  • NEXTAUTH_SECRET can be generated with openssl rand -base64 32
• Start with npm run dev

Step to re-proroduce the project

Here is the list of steps one needs to complete to achieve somewhat the same end result that the showcased project has. As these were written before the live presentation, there might be a step or two missing, or the steps might in a different order.

Preparation

These steps were done before the presentation to speed up the start. Here is a full list what was done before.

• Create project with npx create-next-app@latest from Next.js
  • If this fails, it probably means that you don't have Node installed on your machine.
  • If you don't have Node, you should install it through node version manager (nvm). nvm allows you to later on easily change the used Node version and is the preferred way to install Node. Installing node without nvm might end up in messy installation at the end of the day.
• Install eslint rules
  • Read more about eslint from Why (and how) to use eslint article
  • Commands to run
    • npm install --save @babel/eslint-parser
    • npx install-peerdeps --dev eslint-config-airbnb from eslint-config-airbnb
    • npm install --save-dev eslint-plugin-prettier from eslint-plugin-prettier
    • npm install --save-dev eslint-config-next from eslint-config-next
    • npm install --save-dev @next/eslint-plugin-next from @next/eslint-plugin-next
    • npm install --save-dev eslint-config-prettier from eslint-config-prettier
    • npm install eslint eslint-plugin-react --save-dev from eslint-plugin-react
• Copy nice rules from my previous projects to .eslintrc.js and .prettierrc.js
  • You can see the end result on these files as there is no source to be shared
• Reseting styles & moving used font to _app.js for global usage

"Actual" coding

Here are the things which are part of the live coding session.

• Empty index.js from Vercel's placeholder
• Create basic components like Button and Input
• Implement basic search functionality to homepage
• Install Tailwind
• Create application to Spotify for Developers
• Install spotify-web-api-node
• Install NextAuth.js
  • Custom scopes
  • Custom callbacks for session and jwt
• Create .env file
  • JWT_SECRET
    • Created using jose newkey -s 512 -t oct -a HS512
  • NEXTAUTH_URL
    • http://localhost:3000
• Create login/logout button which takes into account if you are logged in or not
• Create endpoint to api folder and list songs on homepage
• Deploy the application on Vercel.com

Fixing the project after presentation

It seems that the NextAuth Secret was incorrectly set. How it was fixed:

• Renamed the variable as the default one with key NEXTAUTH_SECRET
• Created this with the suggested command of openssl rand -base64 32
• Set the value from the command above to Vercel Environment Variables as NEXTAUTH_SECRET
• Changed getSession to getServerSession in the /api/spotify/search/[keyword] as it seems that the newest NextAuth works differently than what I was used to

In addition to the fixes, I improved the UI a bit and added a separate page for single Spotify tracks.

Main Tools

• Next.js as framework
• Tailwind CSS for styles
• Flowbite for Tailwind component styles
• Spotify Web API through spotify-web-api-node
• NextAuth.js to authenticate with Spotify

Notes

While working on this, I came across this amazing tutorial: 🔴 Let's build Spotify 2.0 with NEXT.JS 12.0!. If you are interested on expanding this small app, the video is definitely worth checking out.