Flutter Full Stack Tutorial – Spotify Clone w/ MVVM Architecture, Python, FastAPI, Riverpod

Post Content

​ Learn to build a full stack music streaming app very similar to Spotify using the MVVM Architecture. In this course, @RivaanRanawat uses Flutter for the app’s frontend, FastAPI for the backend, PostgreSQL for the database, Hive for local data storage and Riverpod (Generators) for state management.

Project Source Code – https://github.com/RivaanRanawat/flutter-spotify-clone-tutorial
AppPallete Class GitHub – https://github.com/RivaanRanawat/flutter-spotify-clone-tutorial/blob/master/client/lib/core/theme/app_pallete.dart
FastAPI Documentation – Dependencies with yield – https://fastapi.tiangolo.com/tutorial/dependencies/dependencies-with-yield/
GitHub Assets – https://github.com/RivaanRanawat/flutter-spotify-clone-tutorial/tree/master/client/assets/images
Normalisation Principles – https://learn.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description

Android Manifest XML Audio Wave Code:
“`
configurations.all {
resolutionStrategy {
eachDependency {
if ((requested.group == “org.jetbrains.kotlin”) && (requested.name.startsWith(“kotlin-stdlib”))) {
useVersion(“1.8.0”)
}
}
}
}
“`

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction & Prerequisites
⌨️ (0:01:42) Project Installation
⌨️ (0:03:15) Flutter Installation & Boilerplate Code
⌨️ (0:04:21) MVVM Architecture + Feature-wise Development
⌨️ (0:10:25) Signup Page UI, Theming & Form
⌨️ (0:48:32) Login Page UI
⌨️ (0:53:29) Virtual environment, FastAPI Setup, Exploring FastAPI, Docs
⌨️ (1:13:44) Signup API Route, PostgreSQL Setup & SQLAlchemy
⌨️ (1:54:55) Code Refactoring – Signup API
⌨️ (2:10:49) Login API Route
⌨️ (2:21:08) Psycopg2 error!
⌨️ (2:21:42) Client Side Login & Signup Route Integration
⌨️ (3:13:23) Auth View Model – Introducing Riverpod Generators, Lint!
⌨️ (3:53:35) Running on Android Emulator
⌨️ (3:56:00) Persisting Auth State & Getting User Data – JWT
⌨️ (4:59:44) Upload Song Page UI, Picking Color, Audio & Image Files
⌨️ (5:27:00) Testing on Android, Audio Wave UI
⌨️ (5:41:41) Uploading Song Data – PostgreSQL, Cloudinary
⌨️ (6:15:24) Song ViewModel – Upload Song
⌨️ (6:33:12) Home Page Bottom NavBar
⌨️ (6:43:28) Fetching & Displaying All Songs
⌨️ (7:14:07) Playing Songs in Flutter (from anywhere in the app)
⌨️ (7:26:01) Music Slab UI
⌨️ (7:41:31) Music Slab Functionalities – Play/Pause Music, Display Song Progress
⌨️ (7:56:55) Music Player UI & Functionalities
⌨️ (8:40:51) Storing, Fetching & Displaying Recently Played Music – Hive
⌨️ (9:04:53) Playing Background Music in Flutter
⌨️ (9:10:03) Favorite Music – Backend, Frontend (Displaying Fav Music)
⌨️ (10:04:05) Conclusion

🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual

—

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news   Read More freeCodeCamp.org 

#programming #freecodecamp #learn #learncode #learncoding