Embark on an auditory journey where your cherished tunes await at the tap of a screen. Indulge in your preferred melodies, unrestricted by time or place.
This full stack comprehensive platform mirrors the sophistication of the esteemed music service, Spotify. Users can securely register and curate their personal playlists while delving into a diverse array of music shared by others.
The option to subscribe to a premium membership presents itself, offering the flexibility of hassle-free cancellation at any moment.
Note: All the requirements of the project are listed in the package.json file with their required versions in package-lock.json.
-
-
Clone the repository locally.
-
Install all the dependencies using npm. Command to run:
npm i. This will fetch the dependencies from package.json file, and install them. -
Setup
.env.localfile with the following content:Ensure to enter your own Supabase and Stripe keys and url. For more information, please refer this video.
NEXT_PUBLIC_SUPABASE_URL= NEXT_PUBLIC_SUPABASE_ANON_KEY= SUPABASE_SERVICE_ROLE_KEY= NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY= STRIPE_SECRET_KEY= STRIPE_WEBHOOK_SECRET= -
Add required databases. You can use the database.sql file in the repository for this.
-
Start the application by using the command
npm run dev. This will run the server on port3000, and the website can be accessed by going tohttp://localhost:3000/. -
If credentials of a registered user are available, use them, else register a new user to interact with application.
-
-
Try the following troubleshooting steps. If none of them work, contact the repository owner/file an issue.
- Since the application is build using TypeScript, Next.js, and React, check for console logs under developer tools to identify any failures.
- Consider installing and using React developer tools to track the request through the system.
- Check console logs on the server to check for any errors.
.
├── actions # Folder for actions
| ├── getActiveProductsWithPrices.ts # Action to get current active products with prices for the premium subscription
| ├── getLikedSongs.ts # Action to get songs liked by a user
| ├── getSongs.ts # Action to get all songs
| ├── getSongsByTitle.ts # Action to get songs based on input title for searching
| ├── getSongsByUserId.ts # Action to get songs uploaded by a user
├── app # Folder for the app router of Next.js
| ├── (site) # Default folder for "/"
| | ├── components # Folder for UI components for "/"
| | | ├── PageContent.tsx # Main page UI component
| | ├── error.tsx # Error page for "/"
| | ├── loading.tsx # Loading page for "/"
| | ├── page.tsx # Landing page for "/"
| ├── account # Folder for "/account"
| | ├── components # Folder for UI components for "/account"
| | | ├── AccountContent.tsx # Accounts page UI component
| | ├── error.tsx # Error page for "/account"
| | ├── loading.tsx # Loading page for "/account"
| | ├── page.tsx # Landing page for "/account"
| ├── api # API routes for the UI
| | ├── create-checkout-session # Stripe checkout API routes
| | | ├── route.ts # File for stripe checkout API routes
| | ├── create-portal-link # Stripe customer portal API routes
| | | ├── route.ts # File for stripe customer portal API routes
| | ├── webhooks # Stripe webhooks API routes
| | | ├── route.ts # File for stripe webhook API routes
| ├── liked # Folder for "/liked"
| | ├── components # Folder for UI components for "/liked"
| | | ├── LikedContent.tsx # Liked songs page UI component
| | ├── error.tsx # Error page for "/liked"
| | ├── loading.tsx # Loading page for "/liked"
| | ├── page.tsx # Landing page for "/liked"
| ├── search # Folder for "/search"
| | ├── components # Folder for UI components for "/search"
| | | ├── SearchContent.tsx # Search page UI component
| | ├── error.tsx # Error page for "/search"
| | ├── loading.tsx # Loading page for "/search"
| | ├── page.tsx # Landing page for "/search"
| ├── favicon.ico # Favicon for the application
| ├── globals.css # Tailwind CSS configuration with custom CSS
| ├── layout.tsx # Main layout for the Next.js application
├── components # Folder with UI helper components
| ├── AuthModal.tsx # Modal component holding auth form
| ├── Box.tsx # Box helper component
| ├── Button.tsx # Button helper component
| ├── Header.tsx # Component for the header across application
| ├── Input.tsx # Input helper component
| ├── Library.tsx # Library component for sidebar to show and upload music
| ├── LikeButton.tsx # Like button helper component
| ├── ListItem.tsx # Helper component for liked songs box on main screen
| ├── MediaItem.tsx # Component for displaying a song
| ├── Modal.tsx # Modal helper component
| ├── PlayButton.tsx # Component for music player play button
| ├── Player.tsx # Component for music player
| ├── PlayerContent.tsx # Component for details on the player
| ├── SearchInput.tsx # Component to search for a song
| ├── Sidebar.tsx # Component for the sidebar
| ├── SidebarItem.tsx # Component to display each song in the sidebar
| ├── Slider.tsx # Music volume slider component
| ├── SongItem.tsx # Component to display each song on the main page
| ├── SubscribeModal.tsx # Modal component for subscription option
| ├── UploadModal.tsx # Modal component for song upload option
├── hooks # Hooks used by the application
| ├── useAuthModal.ts # Hook to open/close the authentication modal component
| ├── useDebounce.ts # Hook at add some debounce to delay search after input
| ├── useGetSongById.ts # Hook to get the selected song using its id
| ├── useLoadImages.ts # Hook to get image for the uploaded song
| ├── useLoadSong.ts # Hook to get the uploaded song
| ├── useOnPlay.ts # Hook to play a song
| ├── usePlayer.ts # Hook to initialize the music player
| ├── useSubscribeModal.ts # Hook to open/close the premium subscription modal
| ├── useUploadModal.ts # Hook to open/close song upload modal
| ├── useUser.ts # Hook to get currently logged-in user details
├── libs # Helper functions for Stripe and Supabase
| ├── helpers.ts # General helper functions
| ├── stripe.ts # Helper function for Stripe
| ├── stripeClient.ts # Helper function for Stripe client
| ├── supabaseAdmin.ts # Helper function for Supabase admin
├── provider # Providers for the application
| ├── ModalProvider.tsx # Provides authentication, song upload, and premium subscription modals
| ├── SubabaseProvider.tsx # Provides session to connect with Supabase
| ├── ToasterProvider.tsx # Provides toast for success/error messages
| ├── UserProvider.tsx # Provides user context
├── public # Folder for public assets
| ├── images # Public images
| | ├── liked.png # Liked songs icon
| ├── next.svg # Next.js icon
| ├── vercel.svg # Vercel icon
├── .eslintrc.json # Eslint configuration
├── .gitignore # Ignore files for git
├── database.sql # Sample database file to get started with the project
├── global.d.ts # Global types to overcome dependency issues
├── middleware.ts # Middleware for authentication
├── next.config.js # Configuration for Next.js
├── package-lock.json # Locked dependencies with specific version which worked
├── package.json # Required dependencies for the project
├── postcss.config.js # Plugin information for CSS
├── README.md # Readme file for the application
├── tailwind.config.ts # Configuration for Tailwind CSS
├── tsconfig.json # Configuration for TypeScript
├── types_db.ts # Automated file generated for types in Database
└── types.ts # Defined types for Stripe
The releases for the application can be found here.
I will do my best to answer all tickets in a timely manner, but sometimes the backlog gets accumulated, and may take awhile to respond. Please be patient—I will get back to you as soon as I can!
Thanks goes to these wonderful people.
- A special thanks goes to Code With Antonio youtube channel to guide me through the development of this project.