Hive: Getting Started with Web Development - 2024

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

This is v2.0 based on the 2023 presentation. This is also a version that uses full client side rendering for pretty much the same end result.

We will be using Next.js React framework and it's App Router version. App Router differs from "traditional" React in a way that all the content is rendered on server unless you explicitly say that you want to render content in browser using use client on top of a component. Here is short Introduction to App Router.

How to run the project

• Install Node if you don't have it already

  • You should install Node through node version manager (nvm)
  • nvm allows you to later on easily change the used Node version. This is important especially if you work on different projects simultaneously, as they probably need different version of Node and you want to be able to change the used version easily.
  • Installing node without nvm will probably end up you having messy installation and problems later on

• Run npm install to install dependencies

• Add environment variables to .env. You can look for .env.example for what there should be

• Start with npm run dev

Steps done before the presentation

Here is the list of steps one needs to complete to get to same point as I was before the presentation:

• Create project with npx create-next-app@latest projectnamehere
  • Choose the following:
    • Typescript: Yes
      • You can read more about What is Typescript? article
    • Eslint: Yes
    • Tailwind CSS: Yes
    • src/ directory: No
    • App Router: Yes
    • customise import alias: No
• Install eslint and prettier
  • Read more about eslint from Why (and how) to use eslint article
  • Read more about prettier from 3 reasons to use prettier article
  • Install all needed packages for nice configuration
    • npm install --save @babel/eslint-parser
    • npn install --save-dev eslint-config-airbnb
    • npm install --save-dev eslint-plugin-prettier
    • npm install --save-dev @next/eslint-plugin-next
    • npm install --save-dev eslint-config-prettier
    • npm install --save-dev eslint-plugin-react
    • npm install --save-dev @typescript-eslint/parser
    • npm install --save-dev @typescript-eslint/eslint-plugin
• Copy nice eslint and prettier rules to .eslintrc.js and .prettierrc.js
  • I took these from my previous projects so there is no source to be shared. Feel free copy these rules to your future projects as well.

Steps in live coding

Here is list of things that were done in the live coding session.

• Remove Vercel's placeholder content from page.tsx
• Implement search field to homepage with basic Button and Input components
• Create application to Spotify for Developers
• Install Clerk
  • Remember to use custom scopes when adding Spotify SSO (list below)
  • Create .env file and add ENV variables based on .env.example
  • Create Login/Logout functionality with Clerk
• Install spotify-web-api-node
  • npm install --save spotify-web-api-node
  • npm install --save-dev @types/spotify-web-api-node
• Implement search so it uses Spotify API
• Deploy the application on Vercel.com

Spotify Scopes

Here is quite comprehensive list of Spotify scopes that allow us to do pretty much everything with account.

ugc-image-upload
user-read-playback-state
user-modify-playback-state
user-read-currently-playing
app-remote-control
streaming
playlist-read-private
playlist-read-collaborative
playlist-modify-private
playlist-modify-public
user-read-playback-position
user-top-read
user-read-recently-played
user-library-modify
user-library-read
user-read-email
user-read-private

Main Tools

• Next.js as framework
• TypeScript so you can use typing if you want
• Tailwind CSS for styles
• Flowbite for Tailwind component styles
• Spotify Web API through spotify-web-api-node
• Clerk to authenticate with Spotify
  • If you want to do auth without 3rd party service, you can use Auth.js instead
• VS Code for coding
  • My Extensions
    • ESLint
    • GitHub Copilot
    • Prettier - Code formatter
    • Tailwind CSS IntelliSense

Other notes

• Advanced search: Instant Search Params
• If I'd add a database to this project, I would use:
  • Neon Postgres for hosting
  • drizzle ORM to connect to the database