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

Veröffentlicht am: 14 November 2024
auf dem Kanal: freeCodeCamp.org

100,815

2.7k

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/flut...
AppPallete Class GitHub - https://github.com/RivaanRanawat/flut...
FastAPI Documentation - Dependencies with yield - https://fastapi.tiangolo.com/tutorial...
GitHub Assets - https://github.com/RivaanRanawat/flut...
Normalisation Principles - https://learn.microsoft.com/en-us/off...

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")
}
}
}
}
```

❤️ Try interactive Full Stack courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Full... (Made possible by a grant from our friends at Scrimba)

⭐️ 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

Auf dieser Seite können Sie das Online-Video Flutter Full Stack Tutorial – Spotify Clone w/ MVVM Architecture, Python, FastAPI, Riverpod mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer freeCodeCamp.org 14 November 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 100,815 Mal angesehen und es wurde von 2.7 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

54,509