diff --git a/README.md b/README.md index 85187fa..d97ab9e 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,11 @@ A beautiful and interactive **Spotify Clone** built using Flutter. Show some โค ###### Contact for work, email: chunhthanhde.dev@gmail.com -spotify logo +
+ +spotify logo + +
![GitHub stars](https://img.shields.io/github/stars/Flutter-Journey/Spotify-With-Flutter?style=social) ![GitHub forks](https://img.shields.io/github/forks/Flutter-Journey/Spotify-With-Flutter?style=social) @@ -18,24 +22,40 @@ A beautiful and interactive **Spotify Clone** built using Flutter. Show some โค ## ๐ŸŽต Overview -**Spotify With Flutter** is a music streaming app inspired by Spotify, featuring a smooth user interface and core functionalities like song playback, playlists, and browsing music. Developed using Flutter, it is available on Android, iOS, and web platforms. +**Spotify With Flutter** is a demo music streaming app inspired by Spotify, featuring a smooth user interface and basic functionalities like firebase login, play music, and favorites song screen. Developed using Flutter, it is available on Android, iOS + +> Note: This project uses mock data and is not affiliated with or integrated with Spotifyโ€™s official API. + +## ๐Ÿ–ฅ๏ธ Screens and Features + +- **Home Screen**: Displays playlists and recommended songs. +- **Playlist Screen**: View and manage your playlists. +- **Song Player Screen**: Play songs with full controls. +- **Profile Screen**: View user information and favorite tracks. -## ๐ŸŒŸ Features +## ๐ŸŽจ Figma Design -- **Music Streaming**: Stream your favorite songs seamlessly. -- **Beautiful UI**: A modern and sleek design similar to the original Spotify app. -- **Playlist Management**: Create and manage your playlists with ease. -- **Search Functionality**: Search for your favorite songs, artists, and albums. -- **Cross-Platform**: Available on Android, iOS, and web. +- [Light Mode Design](https://www.figma.com/community/file/1166665330965959412/spotify-redesign-free-ui-kit-light) +- [Dark Mode Design](https://www.figma.com/community/file/1172466818809176172/spotify-redesign-free-ui-kit-dark-mode) ## ๐ŸŽฎ Demo -Check out how the app looks in action! You can view a demo [here](https://www.youtube.com/watch?v=demo_link). +Check out how the app looks in action! You can view a demo [here](https://www.youtube.com/shorts/aEHOczCZQ00). - - + + + +
+ +## ๐Ÿ Screen + + + + + +
@@ -43,14 +63,9 @@ Check out how the app looks in action! You can view a demo [here](https://www.yo - **Flutter**: Framework for building natively compiled applications. - **Dart**: The programming language used for Flutter development. -- **Spotify API**: Integration with Spotify's API for fetching music data. -- **Animations**: Smooth animations for enhancing the user experience. - -## ๐Ÿ“š References - -- [Official Flutter Documentation](https://flutter.dev/docs) -- [Dart Documentation](https://dart.dev/guides) -- [Spotify API Documentation](https://developer.spotify.com/documentation/web-api/) +- **Firebase**: Backend as a Service for authentication, storage, and database. +- **BLoC (Business Logic Component)**: For state management. +- **Clean Architecture**: For scalable and maintainable code. ## ๐ŸŒŸ Conclusion @@ -65,3 +80,10 @@ Check out how the app looks in action! You can view a demo [here](https://www.yo Star History Chart + +
+ +#### Made by Flutter with Love โค๏ธ | Developed by [ChunhThanhDe](https://github.com/chunhthanhde) + +
+ diff --git a/media/gif/spotify_dark.gif b/media/gif/spotify_dark.gif new file mode 100644 index 0000000..fcbc3b2 Binary files /dev/null and b/media/gif/spotify_dark.gif differ diff --git a/media/gif/spotify_light.gif b/media/gif/spotify_light.gif new file mode 100644 index 0000000..4c10475 Binary files /dev/null and b/media/gif/spotify_light.gif differ diff --git a/media/image/choose_mode_screen.png b/media/image/choose_mode_screen.png new file mode 100644 index 0000000..a119532 Binary files /dev/null and b/media/image/choose_mode_screen.png differ diff --git a/media/image/home_screen.png b/media/image/home_screen.png new file mode 100644 index 0000000..4618cac Binary files /dev/null and b/media/image/home_screen.png differ diff --git a/media/image/login_screen.png b/media/image/login_screen.png new file mode 100644 index 0000000..2ad9707 Binary files /dev/null and b/media/image/login_screen.png differ