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.
You can find our original project, in wich we use JavaScript
, 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:
Learn also about the way we create commits here convencional-commits
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:
Thank you for showing interest in contributing to our Jamming project! Your help is greatly appreciated. To get started, please follow these steps:
-
Find a Task: Browse our project's issues and identify a task you'd like to work on. This helps maintain a clear and organized development process.
-
Express Your Interest: Leave a comment on the chosen task with your name and a clear statement indicating your intent to contribute. This helps us track who's working on what.
-
Task Assignment: The first contributor to express interest in a task will be assigned to it, provided they confirm their readiness within 24 hours. This ensures efficient task allocation.
-
Single Contributor per Task: To ensure focused development, only one contributor may work on a task at a time. However, we welcome feedback and suggestions from everyone.
-
Time Commitment: Once a task is assigned to you, coordinate a suitable development timeline with the project's owner or lead developer. Please honor this commitment, as other contributors and project timelines depend on it.
-
Code Review: Prior to merging any code, the project owner or lead developer will review your changes to ensure alignment with project standards and objectives.
In cases where you need guidance, don't hesitate to ask for help or refer to relevant resources.
By following these steps and communicating clearly, you can make valuable contributions to our project while keeping the development process organized and collaborative. Happy coding! π¨π»βπ»
We encourage contributors to feature their Jamming project contributions in their portfolios and resumes. This helps you demonstrate your skills and experience to potential employers or collaborators. Here's how:
-
List Your Contributions: In your portfolio, create a section for your Jamming project contributions. Provide a brief description of each contribution and its impact.
-
Link to the Repository: Include a direct link to the Jamming repository, allowing others to explore your code and the overall project.
-
Highlight Achievements: Spotlight specific challenges you tackled, improvements you made, or unique solutions you implemented.
-
Share Your Experience: Discuss the valuable experience you gained while working on the project, including collaboration with the development team, adherence to coding standards, and real-world problem-solving.
-
Connect with Us: Let us know when you've added your Jamming contributions to your portfolio. We'd love to celebrate your success and promote your work within our community.
Your contributions are a testament to your skills and dedication. We're thrilled to have you as part of our project. Share your portfolio with us, and let's continue to grow and learn together! π
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
TypeScript
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.