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.
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
Learn about this app's functionalities and how they work:
- Font styling
Create Global Styles
- For
User authentication functionality
we usedNextAuth
, learn more here - State of the app using createContext(),
State Context
- Add and remove songs from playlist
Add and Remove functionality
Learn how the Backend works for this app:
- Requirement for making API request to Spotify API -
Request access token
- How to create a new playlist in the user's account -
Create a new playlist
- How to search for songs with Spotify API -
Search for song functionality
If you'd to like learn more about how we crafted the layout and various interface elements, see here:
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:
See the step by step to how to create a playlist with this app:
- Sign In with your Spotify account
- Search for any song with the
song-name
- Add songs to your new playlists and set it's name
- Save the playlist in your Spotify
See a video of how it works here
JavaScript
Next.js 13
NextAuth
- for user authenticationcreateContext()
anduseContext()
- for app's stateSpotify API
- for Spotify requests
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
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.