Flutter Spotify Clone - MVVM Architecture Full Course For Beginners | Python, FastAPI, Riverpod

Rivaan Ranawat

2024. 6. 12.

In this 10 hour tutorial, we'll be building a music streaming app very similar to Spotify using the MVVM Architecture. In this project, we'll be using 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. Prerequisites: Dart and Flutter Basics - https://youtu.be/CzRQ9mnmh44?feature=shared Riverpod basics (no need to know Riverpod generators) - https://youtu.be/pwflXIA-6YQ?feature=shared Python basics - https://youtu.be/c2zRCespYas?feature=shared HTTP basics - https://youtu.be/Hncp0mPfUvk?feature=shared Knowledge of MVVM, FastAPI, Hive, or PostgreSQL is NOT required. 📌 Discord Server - https://discord.gg/Q8Rx8YWFVF 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") } } } } ``` Timestamps: (00:00:00) Introduction & Prerequisites (00:00:56) Project Installation (00:02:29) Flutter Installation & Boilerplate Code (00:03:35) MVVM Architecture + Feature-wise Development (00:09:39) Signup Page UI, Theming & Form (00:47:46) Login Page UI (00:52:43) Virtual environment, FastAPI Setup, Exploring FastAPI, Docs (01:12:58) Signup API Route, PostgreSQL Setup & SQLAlchemy (01:54:09) Code Refactoring - Signup API (02:10:03) Login API Route (02:20:22) Psycopg2 error! (02:20:56) Client Side Login & Signup Route Integration (03:12:37) Auth View Model - Introducing Riverpod Generators, Lint! (03:52:49) Running on Android Emulator (03:55:14) Persisting Auth State & Getting User Data - JWT (04:58:58) Upload Song Page UI, Picking Color, Audio & Image Files (05:26:14) Testing on Android, Audio Wave UI (05:40:55) Uploading Song Data - PostgreSQL, Cloudinary (06:14:38) Song ViewModel - Upload Song (06:32:26) Home Page Bottom NavBar (06:42:42) Fetching & Displaying All Songs (07:13:21) Playing Songs in Flutter (from anywhere in the app) (07:25:15) Music Slab UI (07:40:45) Music Slab Functionalities - Play/Pause Music, Display Song Progress (07:56:09) Music Player UI & Functionalities (08:40:05) Storing, Fetching & Displaying Recently Played Music - Hive (09:04:07) Playing Background Music in Flutter (09:09:17) Favorite Music - Backend, Frontend (Displaying Fav Music) (10:03:19) Conclusion Connect With Me Here: GitHub: https://github.com/rivaanranawat Linkedin: https://www.linkedin.com/in/rivaan-ranawat Medium: https://namanrivaan.medium.com X: https://x.com/RanawatRivaan Instagram: https://instagram.com/optimalcoding

Recommanded Videos

How to build a smoothly animated table of contents (by a bonfire🔥)

▶ Check out my product: Inkdrop - Markdown note-taking app https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=4g26x6FzuBU ▶ Join the Inkdrop discord server https://docs.inkdrop.app/start-guide/join-discord-server?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=4g26x6FzuBU ▶ Side notes: https://www.devas.life/how-to-build-a-smoothly-animated-table-of-contents-with-framer-motion-and-kuma-ui/ ▶ Source code https://github.com/craftzdog/smooth-toc-example Info ▶ My equipment http://uses.craftz.dog/ ▶ My dotfiles https://github.com/craftzdog/dotfiles-public ▶ My wallpaper packs are now available🥳 Check out serene imagery from my coding tutorials here: https://www.craftz.dog/wallpapers Follow me online here: ▶ Subscribe to my newsletter https://www.devas.life/ ▶ 𝕏 https://x.com/inkdrop_app ▶ Instagram https://instagram.com/craftzdog ▶ My second channel https://www.youtube.com/@craftzdog 00:00 Intro 01:17 Project overview 05:00 Init project with Bun 06:04 Configure the git repository 06:45 Add required modules 08:11 Change dev and build commands to use Bun 08:40 Configure Prettier 09:35 Replace the default`useState` implementation with Zustand 12:02 Configure Kuma UI 13:57 Add some personal ESLint Preferences 15:11 Add some personal TypeScript preferences 16:30 Rename uppercase filenames 17:27 Configure Vite's resolve alias 18:31 Normalize CSS 19:28 Remove the default styles 20:13 Add the color palette tokens 21:11 Add basic styles 23:32 Create a Container component 26:58 Create a MainContent component 30:58 Add an example content 32:56 Moving to the next location, and start a bonfire 36:49 Implement a Markdown renderer 41:07 Add a content store 44:45 Render Markdown content 46:30 Add a page title 49:55 Style Markdown content 53:40 Extract headings from the mdast tree 57:46 Add firewood 58:07 toc store 59:59 Morning coffee 01:00:31 Fix import bug 01:02:10 Register headings 01:04:34 Add custom heading component 01:09:44 Get slugs to work 01:12:03 Preserve heading refs 01:13:00 Sidebar 01:15:57 Markdown outline view 01:24:17 Fix the outline left border 01:25:02 Store outline item refs in the toc store 01:27:40 Register refs to the store 01:29:25 Highlight active section 01:32:53 Detect visible headings 01:40:05 Animate the active section highlighting bar 01:43:37 It works! Yayy Credits: ▶ BGM - Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/ #CodeInNature #ReactJS #ASMR

2024. 9. 16.

🔴 Let’s build a Generative AI App with NEXT.JS 14! (OpenAI, Streaming, AI Agent, TS, GPTScript)

❗️ Get started with GPTScript Today: https://links.papareact.com/gptscript ❗️❗️ Get the 'story-book.gpt' script for FREE here: https://www.papareact.com/gptscript-opt-in-form 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🛠️ Looking for the Code for this build? (Plus over 50+ others!) https://links.papareact.com/github Join me as I show you how to build a StoryTeller AI App from scratch with the latest Next.js 14. You'll learn the following in this build: 👉 How to implement GPTScript to create an AI Agent assistant capable of chaining AI tasks together - we'll build a Storybook with beautiful text & images, completely built from the AI agent's initial single prompt! 👉 Ability to See a Real-Time Process of the Storybook Creation Process! (See the AI Agent in action!) 👉 Ability to Store All Previously Created Stories by writing to the server... in fact the AI Agent does this for us! 👉 How to build API routes using the app router Route Handler syntax 👉 How to implement streaming to stream in the AI Agent's processes in real-time from our API endpoint! 👉 How to utilise the power of caching in Next.js to create an optimal & efficient user experience! 👉 How to use Next.js Server Components & Client Components and when/where to use them! 👉 How to Integrate OpenAI into the Build 👉 Create a Beautiful UI & UX for our Frontend using the highly Popular Shadcn & Tailwind CSS 👉 How to use TypeScript to reduce the overall number of Bugs and Errors 👉 How to deploy the final build on Vercel 🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 🕐 TIMESTAMPS: 00:00 Introduction 01:10 Build Demo 09:08 Build Tech 12:52 Explaining GPTScript 19:00 Initialising the Build 26:00 Building the Header Component 33:36 Implementing Shadcn/ui 35:38 Building the Nav Icons for the Header Component 38:24 Building the Home Page 44:56 Building the Story Writer Component 58:15 Building the AI Terminal Viewer 1:10:21 Creating an API Endpoint (1/2) 1:11:54 Setting Up GPTScript 1:16:27 Creating an API Endpoint (2/2) 1:21:04 Implementing GPTScript 1:28:38 Implementing the Streaming Functionality 1:50:44 Explaining How the Streaming Functionality Works 1:57:29 Fetching All the Stories 2:13:52 Building the Stories Page 2:29:01 Building the Story Book Carousel View 2:39:03 Implementing Toast Notifications 2:43:11 Final Build Demo 2:50:17 Deploying to Vercel 2:54:22 Build Summary Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with OpenAI and/or any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes. #nextjs #nextjs15 #react #ai #chatgpt #reactjs #coding #javascript #tailwindcss #shadcn #openai #reactjstutorial #coding #tutorial #beginner #programming #machinelearning #story #aiagents

2024. 6. 21.

AI 얼굴 애니메이션 공개 🚀 딥페이크 게임체인저! 얼굴 표정부터 모션까지 완벽제어! LivePortrait | 오후다섯씨

#오후다섯씨 #liveportrait #aianimation #aiportrait #digitalhuman #gpt-4o #claude #llama #metaai #llama3 #aicoding #aidevelopment #ainews #ai #openai #chatgpt #gpt4 #인공지능 #llm #챗gpt https://liveportrait.github.io/ -------------------------- 오후다섯씨는 인공지능을 활용한 수준 높은 창작과 관련 기술 및 서비스를 소개하고 있습니다. 인공지능, 메타버스, 웹3, NFT 등의 기술 본질을 파악하여 미래를 선도하며, 개인과 기업의 성공을 위해 창의적인 방법으로 뉴미디어를 혁신합니다. 또한, 사람을 중심으로 예술, 기술, 그리고 비즈니스의 융합을 이야기하고 있습니다. 오후다섯씨 채널명은 어떤 뜻인가요? 🙌🏻 밤+낮, 몸+마음, 가상+현실, 예술+기술, 개인+사회 오후다섯씨는 밤과 낮이 융합되는 시공간입니다. 융합적인 시간 오후다섯시를 의미하는 5pm에 Mr.를 붙여 융합적인 사람 Mr.5pm 오후다섯씨라는 채널명을 만들었습니다. 여러가지 측면에서 융합적인 사람이 되는 것은 인생에서 할 수 있는 아름다운 일이라고 생각합니다. 예술적 상상력과 기술적 상상력의 조화를 이루며 우리 잠재력의 한계에 도달하는 길을 찾기 위해 이야기를 합니다. 오후다섯씨

2024. 7. 9.

End-to-End Machine Learning Project – AI, MLOps

This End-to-End Machine Learning course will help you with core concepts and advanced MLOps integration. You will learn how to: ✨ Conduct thorough EDA to craft compelling data narratives. ✨ Engineer features with a deep understanding of why and how. ✨ Implement a single model with rigorous testing and validation. ✨ Write scalable, defensive, and readable code using design patterns. ✨ Integrate MLOps with tools like ZenML & MLflow for experiment tracking and deployment. Before starting this project, read this initial doc: https://docs.google.com/document/d/108EMtdWOnXZp5UTKdHYrL9I95CUQf9FfABa1Wh-vEM8/edit You can buy the source code here: https://topmate.io/ayush_singh13/1192098 Course developed by @AyushSinghSh

2024. 9. 25.

Deploy a Next.js app to Deno Deploy

Learn more about how to deploy a Next.js app to Deno Deploy: https://github.com/nextjs/deploy-deno Deno is an all-in-one batteries included JavaScript and TypeScript toolchain. Website: https://deno.com GitHub: https://github.com/denoland Discord: https://discord.gg/deno Twitter: https:/twitter.com/deno_land

2024. 10. 24.

Flutter 배울까? Java 공부할까? 고민 그만하세요~ (무료 플러터 강의, 새싹 관악캠퍼스)

서울시산하 서울경제진흥원에서 운영하는 새싹 관안캠퍼스에 Flutter강의가 오픈했습니다. 서울시민대상 무료로 진행됩니다. 14명 모집!! 소수정예로 6개월간 달립니다!! 함께 열심히 하실 분을 모집합니다. 어느정도 레벨이 듣기 좋을까? : 지난번에 올린 강의 소개영상을 참고해 주세요. https://youtu.be/bIXSisGbHbk 강의신청 및 상세정보: https://sesac.seoul.kr/course/active/detail.do?courseActiveSeq=1766&srchCategoryTypeCd=&courseMasterSeq=422&currentMenuId=900002027 (사이트 로딩에 시간이 좀 걸립니다. )

2024. 7. 28.

로딩 중...