![Code With Gionatha](/img/default-banner.jpg)
- 8
- 210 751
Code With Gionatha
Italy
Registrace 29. 08. 2012
Hey 👋 I'm Gionatha, in this channel we're going to discover and build many great apps together.
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
💬 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...
after page refresh disappears favorites song help me please sir
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?
Nice tutorial bro,,,,,,,,,,,,, just 1 suggestion - You could have used native-wind Ui library for styling
Is it only for IOS alone
As a beginner it is hard to understand but thank you
I want to be you when I grow up.
Hey, what is your vscode theme?
Is the library tree shakable?
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.
34:50 day1 1:13:13 day2
Many thanks
Thanks for sharing!
"Unchaught Error' cannot read property 'CAPABILITY_PLAY' of null Can you help me please kindly
i had this same error havent solved it yet
What is your VS Code Theme?,, very nice...
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.
I encountered this error and have been unable to resolve it. ERROR Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.
Thanks a lot for this video! really helpful
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
Please make more React Native Projects
Great Video!
Thank for this video 🙏🙏
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?
Very helpful. Thanks!
Your voice is like Code with Antonio 😅
Can you suggest me for what is perquisites to understand this tutorial logically
What about it working in an android not only the iphone
what extension are you using to sort the import modules order
It's a VScode setting feature (settings.json file) "editor.codeActionsOnSave": { "source.organizeImports": "always", },
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 🙏
dude can we get some more electronjs projects?
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!
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?
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.
38:54 HOW?
Does in work on Android ?
I have created a child window above the parent window. how can i display componet on it
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.
Take a look here: rntp.dev/docs/basics/background-mode
Thank you so much, Extremely useful video
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.
Discord: discord.com/invite/mN8WD6M4dR
Hey, i want to create the app using react native cli not expo, how should I go about this
Take a look here: reactnative.dev/docs/getting-started-without-a-framework
Loved this video Gionatha! Would love to see more just like this one!
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.
Hey bro! I'm getting the error 'capability_play of null' when I import the TrackPlayer package.
Seem a known issue, take a look here: github.com/doublesymmetry/react-native-track-player/issues/2227
One of the best tutorials i have watched. Great vid keep them coming! Cheers!
In electron vite using react, how do I pass data from main to renderer?
I'm pretty sure you use the IPC functions to do that.
@@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.
Great job. This is lovely.
Very interesting project, just what I was looking for thanks!
Hey I got an error in storybook with node ..I don't why this is happening please help me
How to embed ads in a song
Thanks for sharing this stuff.
How to build storybook static files for storybook deployment?
you can run the script: "yarn build-storybook"
Gotcha! My problem is to publish both library and storybook to two different environments.
volume is just too low,