Building a Music Streaming Web Application with Next.js, React, Supabase, and TypeScript

In this blog post, I'll share my experience building a music streaming web application using Next.js, React, Supabase, and TypeScript.

Introduction

I recently built a music streaming web application using Next.js, React, Supabase, and TypeScript. The goal of the project was to create a fully functional music streaming application that users can use to play their favorite songs. I chose Next.js for its server-side rendering capabilities, React for its component-based architecture, Supabase for its easy-to-use backend services, and TypeScript for its static typing features.

Key Features

• User Authentication: The application includes an AuthModal component for user authentication. This component integrates with GitHub and Google authentication services to provide a seamless sign-in experience for users.

• Music Library: Users can view their music library in the Library component. This component fetches data from the PostgreSQL database provided by Supabase and displays the list of songs in a user-friendly format.

• Song Search: Users can search for songs using the getSongsByTitle action. This action fetches data from the database based on the user's search query and updates the state of the application accordingly.

• Song Liking: Users can like songs using the LikeButton component. This component updates the state of the application and the database when a user likes a song.

Project Structure

The project is organized into several directories:

• actions: This directory contains TypeScript files for various actions, such as fetching songs by title or ID, and fetching liked songs. These actions are used to interact with the backend services provided by Supabase.

• app: This directory contains the main application components, including error handling, global styles, and page layouts. The error handling component provides a user-friendly way to display errors, while the global styles and page layouts ensure a consistent look and feel across the application.

• components: This directory contains reusable React components, such as buttons, headers, and input fields. These components are used throughout the application to build the user interface.

• hooks: This directory contains custom React hooks for managing state and side effects. For example, the usePlayer hook provides functions for playing, pausing, and skipping songs, as well as adjusting the volume and progress.

• providers: This directory contains context providers for state management. These providers use the Context API to provide a global state that can be accessed from any component in the application.

• public: This directory contains public assets like images and fonts. These assets are used to enhance the visual appearance of the application.

• types: This directory contains TypeScript type definitions used throughout the project. These type definitions provide a way to ensure type safety and improve developer productivity.

Project Setup

Setting up the project involved several steps. First, I created a new Next.js app using the create-next-app command. Then, I set up TypeScript by adding a tsconfig.json file to the project root and installing the necessary dependencies. I also configured ESLint and Prettier to enforce code quality and consistency. Finally, I set up Tailwind CSS with PostCSS for styling the application.

Building the User Interface

Building the user interface was a fun and challenging process. I used React to create reusable components and Tailwind CSS for styling. Some of the main components I created include a Box component for displaying content in a box layout, a Button component for user interactions, and an AuthModal component for handling user authentication.

State Management

Managing state in the application was done using custom hooks. These hooks helped manage complex states such as volume control and song progress. For example, I created a usePlayer hook that provides functions for playing, pausing, and skipping songs, as well as adjusting the volume and progress.

Integrating with Supabase

Supabase was used for backend services. I created several actions such as getSongs, getSongById, and getLikedSongs to fetch data from the PostgreSQL database provided by Supabase. These actions were used in various parts of the application to display the list of songs, show the details of a specific song, and display the user's liked songs.

Authentication and User Profiles

Authentication was handled using the AuthModal component. Users can sign in using their Google or GitHub accounts. Once signed in, users can view their profile, which includes their liked songs and personal details.

Conclusion

Building this music streaming web application was a challenging and rewarding experience. I learned a lot about Next.js, React, Supabase, and TypeScript, and I'm excited to apply these skills to future projects.

I hope you found this post helpful. If you have any questions or feedback, feel free to message me through the contact email below, LinkedIn or GitHub.