Code With Gionatha
Code With Gionatha
  • 8
  • 210 751
Build a Music Player app with React Native, Expo, Typescript and Zustand
🌱 Source Code: www.codewithgionatha.com/repo/public/music-player
💬 Discord: discord.gg/mN8WD6M4dR
📚 Resources
Expo development build: docs.expo.dev/develop/development-builds/create-a-build/
Expo Router: docs.expo.dev/router/installation/#prerequisites
React Native Track Player: rntp.dev/docs/basics/installation
In this project, we are going to build a native music player application (inspired by Apple Music design) with many core functionalities such as playing, pausing, seeking, and skipping tracks, along with managing playlists and queues of songs and even a search functionality. We will use React Native, Expo, Typescript, Zustand, and many more technologies.
Timestamps
00:00:00 Intro
00:04:07 Project setup (Expo App)
00:25:36 App navigation (Expo router)
00:43:56 App style (dark mode)
00:57:54 Songs Screen
01:38:16 Adding the Track Player (react-native-track-player)
02:01:10 Floating Player
02:27:57 Adding animated icons
02:38:31 Animated song title
02:52:15 Track Player Screen
03:57:46 Favorites Screen
04:04:38 Adding Zustand (state manager)
04:17:15 Queue management (list of songs1)
04:52:48 Artists Screen
05:21:33 Playlist Screen
05:54:30 Shortcuts (add to playlist, add to favorites)
06:18:27 Track player favorites button
06:27:33 Add to playlist feature
06:42:38 Player remote controls (lock screen, control center)
06:51:22 Outro
zhlédnutí: 52 890

Video

How to create a scalable codebase architecture with Nx, Typescript, Prettier and Eslint
zhlédnutí 2,8KPřed 6 měsíci
🌱 Source Code: www.codewithgionatha.com/repo/public/nx-playground 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources Nx: nx.dev/ Prettier: prettier.io/ Eslint: eslint.org/ In this video, we will learn how to create a modern scalable codebase architecture by using Nx, Typescript, Prettier, and Eslint (monorepo pattern). Timestamps 00:00:00 Intro 00:01:56 Creating an Nx workspace 00:03:32 Exploring the...
Build a Markdown Notes app with Electron, React, Typescript, Tailwind and Jotai
zhlédnutí 78KPřed 6 měsíci
🌱 Source Code: www.codewithgionatha.com/repo/public/NoteMark 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources electron-vite: electron-vite.org/ In this video, we are going to build a Markdown Notes desktop application using Electron, React, Typescript, Tailwind, and Jotai. Timestamps 00:00:00 Intro 00:02:16 Creating an Electron Project 00:09:38 Codebase configuration (Prettier, eslint, tsconfig) 00...
Build a UI Library with React, Typescript, TailwindCSS and Storybook
zhlédnutí 29KPřed 7 měsíci
🌱 Source Code: www.codewithgionatha.com/repo/public/simple-ui 💬 Discord: discord.gg/mN8WD6M4dR In this video, we are going to build a basic React UI Library by using React, TailwindCSS, Typescript, and Storybook. Timestamps 00:00 Intro 01:07 Project setup 06:17 Tailwind setup 08:18 Storybook setup 11:34 Creating our first story 15:39 Explaining how styling works 18:23 The cn function 19:37 Addi...
Making Minecraft in ThreeJS
zhlédnutí 4,9KPřed rokem
🕹️ Demo: three-craft.vercel.app/ (recommended Chrome) 🌱 Source Code: github.com/gionny96/ThreeCraft 📚 Resources three.js: threejs.org/ I'm going to share with you my journey recreating Minecraft on the web by using Typescript and three.js. CREDITS Voxel Geometry Article: threejs.org/manual/#en/voxel-geometry Minecraft Terrain Generation in a Nutshell: czcams.com/video/CSa5O6knuwI/video.html Thi...
Build a Twitch Chat Clone with React, Typescript, TailwindCSS and Socket.io
zhlédnutí 2,5KPřed rokem
👀 Demo: twitch-chat-clone.vercel.app/ 🌱 Source Code: www.codewithgionatha.com/repo/public/twitch-chat-clone 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources Socket.io: socket.io/docs/v4/ Vite: vitejs.dev/guide/ Typescript Hooks: github.com/juliencrn/usehooks-ts In this video, we are going to build a real-time Twitch Chat clone by using React, Tailwind, Typescript, and Socket.io. Timestamps 00:00 In...
Build a draggable Kanban Board with React, Chakra UI and LocalStorage
zhlédnutí 34KPřed rokem
👀 Demo: dnd-kanban-board.vercel.app/ 🌱 Source Code: www.codewithgionatha.com/repo/public/dnd-kanban-board 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources Vite: vitejs.dev/guide/ ChakraUI: chakra-ui.com/getting-started React-DnD: react-dnd.github.io/react-dnd/about Autoresizable Textarea: www.npmjs.com/package/react-textarea-autosize Typescript Hooks: github.com/juliencrn/usehooks-ts In this video,...
Build a Typing Speed App with React, Typescript, TailwindCSS & Framer Motion
zhlédnutí 8KPřed 2 lety
👀 Demo: speed-typing-ten.vercel.app/ 🌱 Source Code: www.codewithgionatha.com/repo/public/speed-typing 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources TailwindCSS: tailwindcss.com/docs/guides/create-react-app Framer Motion: www.npmjs.com/package/framer-motion Classnames: www.npmjs.com/package/classnames React icons: www.npmjs.com/package/react-icons In this video, we are going to build a Typing Spe...

Komentáře

  • @ranjithmuthu
    @ranjithmuthu Před 13 hodinami

    after page refresh disappears favorites song help me please sir

  • @TheRonron1994
    @TheRonron1994 Před 2 dny

    I'm getting this error when trying to build. Any idea? error during build: [vite:dts] Internal Error: Unable to determine module for: C:/<project-folder>/dist/index.d.ts You have encountered a software defect. Please consider reporting the issue to the mnpm\@micraintainers of this application. lib\analy at ExportAnalyzer._getModuleSymbolFromSourceFile (C:\PROD\vee-ui ode_modules\.pnpm\@microsoft+api-extractor@7.47.4_@types+node@22.1.0 ode_modules\@microsoft\api-em\@microsxtractor\lib\analyzer\ExportAnalyzer.js:169:15) b\analyze at ExportAnalyzer.fetchAstModuleFromSourceFile (C:\PROD\vee-ui ode_modules\.pnpm\@microsoft+api-extractor@7.47.4_@types+node@22.1.0 ode_modules\@microsoft\api-ext.pnpm\@miractor\lib\analyzer\ExportAnalyzer.js:70:35) Any idea?

  • @acousticmunda6400
    @acousticmunda6400 Před 3 dny

    Nice tutorial bro,,,,,,,,,,,,, just 1 suggestion - You could have used native-wind Ui library for styling

  • @nicetech2237
    @nicetech2237 Před 3 dny

    Is it only for IOS alone

  • @aygunbayir
    @aygunbayir Před 5 dny

    As a beginner it is hard to understand but thank you

  • @njorogekamau3820
    @njorogekamau3820 Před 5 dny

    I want to be you when I grow up.

  • @juanlosauro
    @juanlosauro Před 9 dny

    Hey, what is your vscode theme?

  • @huakun
    @huakun Před 11 dny

    Is the library tree shakable?

  • @YuyangXing-h7x
    @YuyangXing-h7x Před 14 dny

    actually I think there is no need to use such a lot of useCallback, which is confusing for others to understand and the app can still work even without those.

  • @Iras_Mark
    @Iras_Mark Před 15 dny

    34:50 day1 1:13:13 day2

  • @nanoceballostorres
    @nanoceballostorres Před 16 dny

    Many thanks

  • @anhdev99
    @anhdev99 Před 19 dny

    Thanks for sharing!

  • @muthuranjith7856
    @muthuranjith7856 Před 19 dny

    "Unchaught Error' cannot read property 'CAPABILITY_PLAY' of null Can you help me please kindly

    • @ConsoleLearn
      @ConsoleLearn Před 19 dny

      i had this same error havent solved it yet

  • @mrcelix
    @mrcelix Před 20 dny

    What is your VS Code Theme?,, very nice...

  • @confidenceclinton8366

    How am I just seeing your channel. Bro you're too good. Please make more react native projects, if possible with clerk, supabase or appwrite.

  • @chukwudinweze191
    @chukwudinweze191 Před 25 dny

    I encountered this error and have been unable to resolve it. ERROR Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.

  • @ujjwalbhandarii
    @ujjwalbhandarii Před 25 dny

    Thanks a lot for this video! really helpful

  • @alexanderp7521
    @alexanderp7521 Před 26 dny

    How to store order within a column in the database? Cause you just storing the entire sorted array of items which is useless for real projects

  • @SoapCS2
    @SoapCS2 Před 27 dny

    Please make more React Native Projects

  • @SoapCS2
    @SoapCS2 Před 27 dny

    Great Video!

  • @user-yn9yr8hq8v
    @user-yn9yr8hq8v Před 28 dny

    Thank for this video 🙏🙏

  • @cristiannerylozada4713
    @cristiannerylozada4713 Před měsícem

    I follow all the steps and when I tried to install my library (after publishing to npm package) in a nextapp with tailwind, the styles are now shown :CCC, can someone help me?

  • @alzearafat
    @alzearafat Před měsícem

    Very helpful. Thanks!

  • @web_Dev_XP
    @web_Dev_XP Před měsícem

    Your voice is like Code with Antonio 😅

  • @aankie
    @aankie Před měsícem

    Can you suggest me for what is perquisites to understand this tutorial logically

  • @Spud_254
    @Spud_254 Před měsícem

    What about it working in an android not only the iphone

  • @liam.wahlberg
    @liam.wahlberg Před měsícem

    what extension are you using to sort the import modules order

    • @gionatha
      @gionatha Před měsícem

      It's a VScode setting feature (settings.json file) "editor.codeActionsOnSave": { "source.organizeImports": "always", },

  • @andrejkling3886
    @andrejkling3886 Před měsícem

    Finally I found right channel… Excellent explanation and amazing coding with your teaching style. Definitely one of best tutorials which I seen… Thank you so very much for your kind efforts and self giving 🔥💯 please keep it up 👍 more projects with React Native 🙏

  • @user-ew1dl4dh3e
    @user-ew1dl4dh3e Před měsícem

    dude can we get some more electronjs projects?

  • @mycloudvip
    @mycloudvip Před měsícem

    Hello! Awesome working example! Is it possible for you to polish up the Android version of the App? I ran it with EAS as a development build and it works great, but some elements need formatting on the Android side of the App. Thanks!

  • @zrxmax_
    @zrxmax_ Před měsícem

    I think it's better to create css class draggable, instead of apply it to header .draggable { -webkit-app-region: drag; } also you can apply no-drag to all body to make sure no other element will be draggable. What do you think?

    • @gionatha
      @gionatha Před měsícem

      If only the header is supposed to be draggable I don't really see the point of making the entire window draggable and then disabling it with no drag 🤔 Anyway both ways are valid IMHO.

  • @zrxmax_
    @zrxmax_ Před měsícem

    38:54 HOW?

  • @idrisspempeme1946
    @idrisspempeme1946 Před měsícem

    Does in work on Android ?

  • @user-bu2tr9bn9t
    @user-bu2tr9bn9t Před měsícem

    I have created a child window above the parent window. how can i display componet on it

  • @musiclive2821
    @musiclive2821 Před měsícem

    Hello, sir I'm creating a online music player app , but I'm facing a issue that I'm not able to play music in background/while app was minimized and while screen of . How do I do I please help me it is my college project.

    • @gionatha
      @gionatha Před měsícem

      Take a look here: rntp.dev/docs/basics/background-mode

  • @kirubakaran8478
    @kirubakaran8478 Před měsícem

    Thank you so much, Extremely useful video

  • @oaksoekyaw2036
    @oaksoekyaw2036 Před měsícem

    Hello I'm having trouble following the instructions and I don't know how to fix it. I follow allow just like instruction and I am stucked at npx expo run:ios. The cocoapod installation keeps failing. Is it because I am on Mac? Due to that, building process always fail.

    • @gionatha
      @gionatha Před měsícem

      Discord: discord.com/invite/mN8WD6M4dR

  • @user-cp9df1mo4c
    @user-cp9df1mo4c Před měsícem

    Hey, i want to create the app using react native cli not expo, how should I go about this

    • @gionatha
      @gionatha Před měsícem

      Take a look here: reactnative.dev/docs/getting-started-without-a-framework

  • @benadams8998
    @benadams8998 Před měsícem

    Loved this video Gionatha! Would love to see more just like this one!

  • @thewalrusdragon9579
    @thewalrusdragon9579 Před měsícem

    For anyone planning doing this on a Windows PC and having some difficulty with certain aspects of it I’m going through this project now and building it with this tutorial. I will post the GitHub link to the finished project once I’m done. Only an hour in and have over 500 lines of notes in a well documented README that will be with the project. Of course, all credit goes to Gionatha for this great course, but I want to be able help out anyone struggling with doing this on Windows. Just come back hopefully in a few days and I’ll like the repo where I’ve done this project on my PC and gotten to work, made some styling changes for the buttons, and a few other tweaks.

  • @AbhishekTR-tb7ze
    @AbhishekTR-tb7ze Před 2 měsíci

    Hey bro! I'm getting the error 'capability_play of null' when I import the TrackPlayer package.

    • @gionatha
      @gionatha Před 2 měsíci

      Seem a known issue, take a look here: github.com/doublesymmetry/react-native-track-player/issues/2227

  • @MrCbutters
    @MrCbutters Před 2 měsíci

    One of the best tutorials i have watched. Great vid keep them coming! Cheers!

  • @darshanheble1844
    @darshanheble1844 Před 2 měsíci

    In electron vite using react, how do I pass data from main to renderer?

    • @RobertLugg
      @RobertLugg Před 20 dny

      I'm pretty sure you use the IPC functions to do that.

    • @darshanheble1844
      @darshanheble1844 Před 20 dny

      @@RobertLugg Yes I am using, but the problem is when I pass data from main to renderer, at that time the UI is still not loaded, so the data is not recieved in renderer. But I solved that problem.

  • @AdeoluSegun-fd2dx
    @AdeoluSegun-fd2dx Před 2 měsíci

    Great job. This is lovely.

  • @avocadoamongos
    @avocadoamongos Před 2 měsíci

    Very interesting project, just what I was looking for thanks!

  • @Aman_yadav1419
    @Aman_yadav1419 Před 2 měsíci

    Hey I got an error in storybook with node ..I don't why this is happening please help me

  • @KietPhan-wo4rb
    @KietPhan-wo4rb Před 2 měsíci

    How to embed ads in a song

  • @michaelariesmalaca8557
    @michaelariesmalaca8557 Před 2 měsíci

    Thanks for sharing this stuff.

  • @MaxViews24
    @MaxViews24 Před 2 měsíci

    How to build storybook static files for storybook deployment?

    • @gionatha
      @gionatha Před 2 měsíci

      you can run the script: "yarn build-storybook"

    • @MaxViews24
      @MaxViews24 Před 2 měsíci

      Gotcha! My problem is to publish both library and storybook to two different environments.

  • @control7004
    @control7004 Před 2 měsíci

    volume is just too low,