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:
Create Global Styles
User authentication functionality
we used NextAuth
, learn more hereState Context
Add and Remove functionality
Learn how the Backend works for this app:
Request access token
Create a new playlist
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:
song-name
See a video of how it works here
JavaScript
Next.js 13
NextAuth
- for user authenticationcreateContext()
and useContext()
- for app's stateSpotify API
- for Spotify requestsTo learn more about Next.js, take a look at the following resources:
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.