Melodify is a front-end application built using Angular that interacts with the Melodify backend services to provide a seamless music management experience. It features user authentication, song and artist information, and music recommendations, all with a sleek and responsive design powered by TailwindCSS and DaisyUI.
To set up the Melodify frontend, follow these steps:
- Clone the repository:
git clone https://github.com/jardo5/melodify-frontend.git cd melodify-frontend - Install dependencies:
npm install
- Run the project
npm start
Once the application is running, you can navigate through the user interface to explore features like song search, artist information, and user-specific recommendations. Ensure that the backend service is running and properly configured to allow seamless API integration.
- User Authentication: Securely log in and manage your account using JWT.
- Song Search: Find songs by title and artist.
- Artist Information: View detailed artist profiles.
- Music Recommendations: Receive personalized song recommendations based on your preferences.
- Like/Dislike/Save Songs: Personalize music recommendations with a detailed like and dislike system.
- Responsive Design: Fully responsive user interface built with TailwindCSS and DaisyUI.
Melodify relies on the following key dependencies:
Core:
- Angular (animations, common, compiler, core, forms, platform-browser, platform-browser-dynamic, router)
UI/UX:
- TailwindCSS
- DaisyUI
- Material Symbols
- Swiper
Backend Integration:
- Express
- JWT-decode
Development Tools:
- Angular CLI
- TypeScript
- Karma (test runner)
- Jasmine (testing framework)
- PostCSS & Autoprefixer (CSS processing)
If needed, edit the angular.json or files under src/environments:
API rate limits:
Be aware of the rate limits imposed by external APIs (Spotify, Genius, OpenAI, Lyricsovh). If connected to Melodify back-end.
This project is licensed under the MIT License. See the LICENSE file for more details.