Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Flutter Full Stack Tutorial – Spotify Clone w/ MVVM Architecture, Python, FastAPI, Riverpod
Play lesson

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

5.0 (4)
41 learners

What you'll learn

This course includes

  • 13.3 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Full Transcript

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") } } } } ``` ❤️ Try interactive Full Stack courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Fullstack (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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere