Matdweb / Jamming

This project allows you 👥 to create and customize 🎨 playlists 🎼 and send them to your Spotify account using API technology.

Jamming

This project allows authenticated users 👥 to create and customize 🎨 playlists 🎼 and send them to their Spotify account using API technologies. The app helps users search 🔎 their favorites songs 🎧 and group them into a new playlist, always having the chance to modify it the way they want 😎.
Take a look to the design solution in Figma here.

Getting Started

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font

Features

Learn about this app's functionalities and how they work:

1. Font styling Create Global Styles
2. For User authentication functionality we used NextAuth, learn more here
3. State of the app using createContext(), State Context
4. Add and remove songs from playlist Add and Remove functionality

API requests

Learn how the Backend works for this app:

1. Requirement for making API request to Spotify API - Request access token
2. How to create a new playlist in the user's account - Create a new playlist
3. How to search for songs with Spotify API - Search for song functionality

Development Insights

If you'd to like learn more about how we crafted the layout and various interface elements, see here:

• Main page
• Background color changer
• Button animations
• Error page

Experimental code

Before the development process began, three GitHub repositories were set up to contain experimental code for testing the functionalities of this app. Exploring these repositories can be highly beneficial if you wish to gain a deeper understanding of the API requests, Next.js best practices, Next.js endpoints, and other elements used in this application:

• Spotify Playlist Retriever v12
• Spotify Playlist Retriever
• Album Searcher

How to use this app

See the step by step to how to create a playlist with this app:

1. Sign In with your Spotify account
   
2. Search for any song with the song-name
   
3. Add songs to your new playlists and set it's name
   
4. Save the playlist in your Spotify
   

See a video of how it works here

Tecnologies

• JavaScript
• Next.js 13
• NextAuth - for user authentication
• createContext() and useContext() - for app's state
• Spotify API - for Spotify requests

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Spotify API documentation - learn about the API we used
• useContext() for state - learn how we created this app's state

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.