This project is a music web player that incorporates ChatGPT, an AI language model, allowing users to interact with it and receive music recommendations based on their chat conversations. The application is built using Next.js 13, Tailwind CSS, and TypeScript.
To run this project locally, follow these steps:
- Clone the repository:
git clone <repository-url> - Install dependencies:
npm install - Start the development server:
npm run dev - Open your browser and navigate to
http://localhost:3000
To use the web player, create a .env file at the root level of the project and add the following environment variables:
OPENAI_API_KEY=your_openai_api_key
REDIS_URL=your_redis_url
REDIS_SECRET=your_redis_secret
You can obtain an OpenAI API key by signing up for an account on their website. For Redis, you can use a hosted service or run Redis locally.
To get the REDIS_URL and REDIS_SECRET, register on Upstash and create a new database.
Once you've completed the setup, you can interact with ChatGPT by typing in the chat input box. Ask for music recommendations based on genres, artists, or any other relevant queries. ChatGPT will process your query and provide you with personalized recommendations.
The following libraries were used in the development of this project:
- Tailwind CSS - A utility-first CSS framework for rapid UI development.
- Radix UI - A collection of high-quality React UI components.
- react-query by Tanstack - A library for managing remote data fetching and caching in React.
- upstash/ratelimit and redis
- axios - A popular JavaScript library for making HTTP requests.
- clsx - A tiny utility for constructing class names dynamically.
- nanoid - A small and secure library for generating unique IDs.
- sonner - An opinionated toast component for React.
- tailwind-merge - A Tailwind CSS plugin for merging variants.
- zod - A TypeScript-first schema validation library.
Please refer to the documentation for each library to understand how to use them effectively in your own projects.
Contributions to this project are welcome. Feel free to submit bug reports, feature requests, or pull requests on the project's GitHub repository.
This project was inspired by the tutorial series by Joschan on YouTube.