Code With Gionatha
Code With Gionatha
  • Видео 10
  • Просмотров 254 184
Build a Q&A and Polls platform with Nextjs, Supabase, Kinde, Prisma | Part 2/2
🌱 Source Code: github.com/CodeWithGionatha-Labs/dory-clone
💬 Discord: discord.gg/mN8WD6M4dR
Part 1: ruclips.net/video/k8N9slcdHR8/видео.html
✨ Key features:
🔒 Authentication (w/ Kinde)
👥 User Roles
📈 Database (w/ Supabase)
🌱 Database Seeding
🛠️ ORM (w/ Prisma)
🎨 Modern & Responsive Design (w/ ShadCN)
🔄 Server Actions (w/ next-safe-action)
📝 Forms (w/ react-hook-form)
✔️ Data Validation (w/ zod)
⚡ Realtime Updates (w/ Supabase Realtime)
🔔 Notification System
👍 Upvoting System
🚀 Optimistic Updates
🔃 Infinite Scrolling
📚 Resources
Nextjs installation: nextjs.org/docs/getting-started/installation
Shadcn installation: ui.shadcn.com/docs/installation/next
Prisma setup: shorturl.at/aDUf8
Kinde setup: shorturl.at/iYdQ...
Просмотров: 1 115

Видео

Build a Q&A and Polls platform with Nextjs, Supabase, Kinde, Prisma | Part 1/2
Просмотров 8 тыс.14 дней назад
🌱 Source Code: github.com/CodeWithGionatha-Labs/dory-clone 💬 Discord: discord.gg/mN8WD6M4dR ✨ Key features: 🔒 Authentication (w/ Kinde) 👥 User Roles 📈 Database (w/ Supabase) 🌱 Database Seeding 🛠️ ORM (w/ Prisma) 🎨 Modern & Responsive Design (w/ ShadCN) 🔄 Server Actions (w/ next-safe-action) 📝 Forms (w/ react-hook-form) ✔️ Data Validation (w/ zod) ⚡ Realtime Updates (w/ Supabase Realtime) 🔔 Noti...
Build a Music Player app with React Native, Expo, Typescript and Zustand
Просмотров 70 тыс.5 месяцев назад
🌱 Source Code: github.com/CodeWithGionatha-Labs/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 A...
How to create a scalable codebase architecture with Nx, Typescript, Prettier and Eslint
Просмотров 3,3 тыс.7 месяцев назад
🌱 Source Code: github.com/CodeWithGionatha-Labs/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 wor...
Build a Markdown Notes app with Electron, React, Typescript, Tailwind and Jotai
Просмотров 89 тыс.8 месяцев назад
🌱 Source Code: github.com/CodeWithGionatha-Labs/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:19:...
Build a UI Library with React, Typescript, TailwindCSS and Storybook
Просмотров 33 тыс.9 месяцев назад
🌱 Source Code: github.com/CodeWithGionatha-Labs/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 Adding B...
Making Minecraft in ThreeJS
Просмотров 5 тыс.Год назад
🕹️ 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: ruclips.net/video/CSa5O6knuwI/видео.html Th...
Build a Twitch Chat Clone with React, Typescript, TailwindCSS and Socket.io
Просмотров 2,7 тыс.Год назад
🌱 Source Code: github.com/CodeWithGionatha-Labs/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 Intro 01:09 Project Setup 03:05 Base Style 0...
Build a draggable Kanban Board with React, Chakra UI and LocalStorage
Просмотров 34 тыс.2 года назад
👀 Demo: dnd-kanban-board.vercel.app/ 🌱 Source Code: github.com/CodeWithGionatha-Labs/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, we ...
Build a Typing Speed App with React, Typescript, TailwindCSS & Framer Motion
Просмотров 8 тыс.2 года назад
👀 Demo: speed-typing-ten.vercel.app/ 🌱 Source Code: github.com/CodeWithGionatha-Labs/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 Speed a...

Комментарии

  • @Geuni620
    @Geuni620 12 часов назад

    That's an incredible video. I've learnt a lot from it. Thank you ❤

  • @JuddJulia-j7r
    @JuddJulia-j7r 3 дня назад

    Taylor Sarah Moore Mark Moore Donna

  • @ryannwaneri6352
    @ryannwaneri6352 5 дней назад

    Notice to people trying to follow this for android some of the things he uses here are ios specific for instance some of the options in the native stack navigator options so you should try finding ways around this and follow up with the rest of the tutorial

  • @GM_Development
    @GM_Development 9 дней назад

    Great Job @gionatha The next app books app ?

  • @dineshsingh-kw6lt
    @dineshsingh-kw6lt 10 дней назад

    great tutoral, very helpfull for music app I am developing

  • @kasvith
    @kasvith 10 дней назад

    Hey can you do a video about creating a design system with RN

  • @_theAuthority
    @_theAuthority 11 дней назад

    Hey man cool video - how did you get started is UI engineering? I am trying to learn the path.

  • @learningforever2531
    @learningforever2531 13 дней назад

    Hi, thanks for you tutorial, I am watching the `setUpTrackPLayer` part, and I see the function `useSetupTrackPlayer` using variable `isInitialized` which is redundant because I dont see it is used to check in elsewhere . Would you help share more on this one ``` export function useSetupTrackPlayer({ onLoad }: { onLoad?: () => void }) { const isInitialized = useRef(false) ..... ```

  • @miladhosayni5045
    @miladhosayni5045 14 дней назад

    Nice work thanks , please make a video big production of clone Newegg fullstack with admin panel by nextjs but not multivendor just exactly like Newegg, thanks 🙏

  • @Егор-д3у4с
    @Егор-д3у4с 14 дней назад

    Мне нравится 😁

  • @GabrielLogan17
    @GabrielLogan17 14 дней назад

    Missing tests

  • @SirEdges_Adejo
    @SirEdges_Adejo 14 дней назад

    Beautiful project, except kinde is not open source

  • @UnFuckedUpMind
    @UnFuckedUpMind 14 дней назад

    There is no answer feature. but QnA? I don't understand about this app's idea. Sorry

  • @smartdriver2990
    @smartdriver2990 15 дней назад

    Wow great, thanks for the complete tutorial

  • @JourneyGoesOn1
    @JourneyGoesOn1 15 дней назад

    Good Job Johnatan

  • @zafarinovace2270
    @zafarinovace2270 15 дней назад

    Can anyone tell me which video editor is used to make this intro?

  • @harry4088
    @harry4088 15 дней назад

    could you provide the deployment url please

  • @UnFuckedUpMind
    @UnFuckedUpMind 15 дней назад

    I don't understand abou this QnA.. Where are the answers of the questions?

  • @muhamotto2084
    @muhamotto2084 15 дней назад

    I really like your demo thank you, I have a question. I can see that you use usePlaylist for example to get data to the flatlist, in the case where we fetch data from server, is it possible to do the same concept? like make request to the server inside the usePlaylist, is that going to work ?

  • @ÁngelNieto-x1h
    @ÁngelNieto-x1h 16 дней назад

    Good Job! I would like a course that is a Chat app, like Telegram, WhatsApp, Discord or something like that, and it could be a RUclips clone or a Notion clone. Greetings and good work!

  • @CarlosTello-h5s
    @CarlosTello-h5s 16 дней назад

    great video

  • @vibhukarnwal4926
    @vibhukarnwal4926 16 дней назад

    great make more on next js with cicd docker deployment

  • @hubesh716
    @hubesh716 16 дней назад

    can after this build can you plz make one Real time project in React native

  • @PsychoDude
    @PsychoDude 17 дней назад

    The amount of configurations for mobile development scares me

  • @FragileSweXD
    @FragileSweXD 17 дней назад

    Can't able to run on Android

  • @paranomsun
    @paranomsun 19 дней назад

    Can I download an app already made? I just need a better music app, not looking to make one.

  • @sadiulhakim7814
    @sadiulhakim7814 24 дня назад

    Cool

  • @DavidLucas-ci2fy
    @DavidLucas-ci2fy 29 дней назад

    Great video man, but I think there is an error that with expo router I also facing that is try to navigate from notification controller to the app, just give an unmatched route. Is there a way to achieve this?

  • @69k_gold
    @69k_gold Месяц назад

    3 hr video and you're incapable of manually setting up the boilerplate? That's wild

  • @codecret1
    @codecret1 Месяц назад

    should we use tailwind ? doesn't it overwrite

  • @buxx5334
    @buxx5334 Месяц назад

    hey sir can you help me. I need to create a folder /usr/local/bin if is not exist but if exist next step is copy the cli tools to that folder. because my app need to comunicate with that cli tool. but to perform that operation on mac aplication need a sudo access. can i make the process when user first time install my app. when aplication installer run we need to ask the permission for move the file into /usr/local/bin. how can i do that.. thank you sir. i hope you response this comment and i hope you understand my english is not good.

  • @richysel3258
    @richysel3258 Месяц назад

    Amazing tutorial. i loved every part of it. You are amazing teacher. i built the android version, now trying to read the react-native-trackplayer documentation to see if i can load the tracks from local storage, instead of using the json library data prop. Thank you once again

    • @balasankarp4937
      @balasankarp4937 Месяц назад

      Hhai bro, can you please share the source code

    • @nehalpradhan2229
      @nehalpradhan2229 27 дней назад

      i don't use ios can i follow this tutorial for android??, or do i need to do something by myself??

  • @danielmoralesgonzalez4908
    @danielmoralesgonzalez4908 Месяц назад

    Thanks for the tutorial, you're a champion!

  • @Aristocrator
    @Aristocrator Месяц назад

    Tailwind license restricts using the library for ui-libs

  • @ranjithmuthu
    @ranjithmuthu Месяц назад

    after page refresh disappears favorites song help me please sir

    • @humbler144
      @humbler144 Месяц назад

      You might be keeping the state local which might be causing the flushing of state, try making favorite global so that you can see after refresh

    • @ranjithmuthu
      @ranjithmuthu Месяц назад

      @@humbler144 can you help me

    • @ranjithmuthu
      @ranjithmuthu Месяц назад

      @@humbler144 can you help me please

  • @TheRonron1994
    @TheRonron1994 Месяц назад

    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 Месяц назад

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

    • @PsychoDude
      @PsychoDude 17 дней назад

      its better he didnt so he lets people choose whatever library they want to use

  • @nicetech2237
    @nicetech2237 Месяц назад

    Is it only for IOS alone

  • @aygunbayir
    @aygunbayir Месяц назад

    As a beginner it is hard to understand but thank you

  • @njorogekamau3820
    @njorogekamau3820 Месяц назад

    I want to be you when I grow up.

  • @juanlosauro
    @juanlosauro Месяц назад

    Hey, what is your vscode theme?

  • @huakun
    @huakun Месяц назад

    Is the library tree shakable?

  • @YuyangXing-h7x
    @YuyangXing-h7x 2 месяца назад

    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 2 месяца назад

    34:50 day1 1:13:13 day2

  • @nanoceballostorres
    @nanoceballostorres 2 месяца назад

    Many thanks

  • @anhdev99
    @anhdev99 2 месяца назад

    Thanks for sharing!

  • @muthuranjith7856
    @muthuranjith7856 2 месяца назад

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

    • @ConsoleLearn
      @ConsoleLearn 2 месяца назад

      i had this same error havent solved it yet