Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/priest-2105/moodmix
A web application that generates personalized music playlists based on the user's current mood.
https://github.com/priest-2105/moodmix
Last synced: 1 day ago
JSON representation
A web application that generates personalized music playlists based on the user's current mood.
- Host: GitHub
- URL: https://github.com/priest-2105/moodmix
- Owner: priest-2105
- Created: 2024-09-19T03:24:31.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-09T00:13:29.000Z (14 days ago)
- Last Synced: 2025-01-09T00:37:34.915Z (14 days ago)
- Language: CSS
- Size: 607 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# MoodMix
MoodMix is a web application that integrates with Spotify to provide users with personalized playlists based on their moods. The application allows users to log in with their Spotify account, view their playlists, and explore new music.
## Features
- **User Authentication**: Log in with Spotify to access your playlists.
- **Playlist Management**: View, create, and manage your playlists.
- **Mood-Based Playlists**: Discover playlists curated based on different moods.
- **Responsive Design**: Optimized for both desktop and mobile devices.
- **Music Player**: Integrated music player to listen to tracks directly within the app.
## Getting Started
### Prerequisites
- Node.js and npm installed on your machine.
- A Spotify Developer account to obtain API credentials.
### Installation
1. Clone the repository:
```bash
git clone https://github.com/priest2105/moodmix.git
cd moodmix
```
2. Install dependencies:
```bash
npm installer
```
3. Create a `.env` file in the root directory and add your Spotify API credentials:
```env
SPOTIFY_APP_CLIENT_ID=your_spotify_client_id
SPOTIFY_APP_REDIRECT_URI=http://localhost:5500/
```
4. Start the development server:
```bash
npm start
```
5. Open your browser and navigate to `http://localhost:5500`.
## Project Structure
```
moodmix/
├── css/
│ ├── styles.css
│ ├── footer-player.css
│ ├── main.css
│ ├── navbar-styles.css
│ ├── sidebar-styles.css
│ ├── section-styles.css
│ ├── login.css
│ ├── signup.css
│ ├── forgotpassword.css
├── js/
│ ├── auth.js
│ ├── forgotpassword.js
│ ├── login.js
│ ├── signup.js
│ ├── playlist-loader.js
│ ├── slider.js
│ ├── basic-responsiveness.js
│ ├── index.js
├── assets/
│ ├── images/
│ ├── icons/
├── dist/
├── index.html
├── webpack.config.js
├── .env
└── README.md
```
## Goals
- **Port Configuration**: Ensure the application consistently uses port 5500 for development.
- **Style Implementation**: Fix issues with CSS not being applied correctly.
- **Error Handling**: Improve error handling for API requests and user authentication.
- **User Experience**: Enhance the user interface and experience, especially for mobile users.
## Contributing
We welcome contributions! Please fork the repository and submit pull requests for any improvements or bug fixes.
## License
This project is licensed under the MIT License.