Code With Gionatha
Code With Gionatha
  • 10
  • 265 205
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: ua-cam.com/video/k8N9slcdHR8/v-deo.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/iYdQf
Supabase setup: supabase.com/partners/integrations/prisma
Database seeding guide: www.prisma.io/docs/orm/prisma-migrate/workflows/seeding
Realtime updates guide: supabase.com/docs/guides/realtime/postgres-changes
This comprehensive 17-hour course will guide you through building a full-stack Q&A and Polls platform using Next.js, Shadcn, Supabase, Kinde Auth, and Prisma. In the second part of the course, we'll cover all the remaining topics such as real-time polls, infinite scrolling, and notifications.
Chapters
00:00:00 Preview
00:00:26 Chapter 18: Polls page layout
00:16:27 Chapter 19: Polls UI
01:34:17 Chapter 20: Poll Voting
02:08:57 Chapter 21: Poll real-time updates
02:32:00 Chapter 22: Fixing an important bug
02:34:42 Chapter 23: Create Poll
03:12:56 Chapter 24: Polls actions (end, delete)
03:29:20 Chapter 25: Event bookmarking
03:39:22 Chapter 26: Event creation
04:01:27 Chapter 27: Event update and delete
04:22:00 Chapter 28: Infinite scrolling
05:11:26 Chapter 29: Notifications
Переглядів: 1 246

Відео

Build a Q&A and Polls platform with Nextjs, Supabase, Kinde, Prisma | Part 1/2
Переглядів 8 тис.Місяць тому
🌱 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
Переглядів 75 тис.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,4 тис.8 місяців тому
🌱 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
Переглядів 93 тис.9 місяців тому
🌱 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
Переглядів 34 тис.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: ua-cam.com/video/CSa5O6knuwI/v-deo.html Thi...
Build a Twitch Chat Clone with React, Typescript, TailwindCSS and Socket.io
Переглядів 2,8 тис.2 роки тому
🌱 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
Переглядів 35 тис.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
Переглядів 9 тис.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...

КОМЕНТАРІ

  • @MenteCuriosa-Oficial
    @MenteCuriosa-Oficial Годину тому

    "Hello! I would like to suggest a very useful project for your channel: a complete school management software. It would allow for the registration of students and teachers, the inclusion of grades, tracking of school attendance, and also have a robust financial area. In this area, it would be possible to issue invoices for guardians, track payments, and generate the teachers' payroll. It would be amazing to see the development of a system with all these features, teaching step by step how to create a practical and efficient solution for schools!"

  • @reyashree2152
    @reyashree2152 День тому

    09:57 you're configuring something into your main.ts file under storybook folder what is that and where did you get from that, would be so nice if you helped me out

  • @twezo
    @twezo 5 днів тому

    eslint is depreciated. nice. im cooked.

  • @rusurveillancetaskforce
    @rusurveillancetaskforce 6 днів тому

    Before I commit to watching this, can you do everything he does and follow along using Metro instead? I have a raging hate for expo. I mean YES that's the point of EXPO it PROVIDES THIS THAT YADDA YADDA what if I want it the harder way, what if I want to setup my own router, or learn how to use a bare filesystem, abstract it away etc.? It's like ok don't reinvent the wheel, but this isn't C, this is abstraction layers upon abstraction layers of many technologies, for learning purposes don't use expo Jesus is this so hard.

  • @bilal-khan
    @bilal-khan 6 днів тому

    Just wondering about the use of caching query functions? You are wrapping the functions with cache? why do you need do this when Nextjs is strong at caching?

    • @gionatha
      @gionatha 6 днів тому

      Great question! By default, Next.js only caches fetch functions automatically. However, since we're using the Prisma Client SDK instead of fetch functions, we need to handle caching manually. Otherwise, we risk executing the same queries multiple times when rendering different components.

    • @bilal-khan
      @bilal-khan 6 днів тому

      @@gionatha the amount of knowledge that I have learnt from this video is phenomenal. Dude you are awesome to release such videos. Please keep them coming. I haven't even done half of the video and I am already an expert lol. When is the next video coming ?

    • @gionatha
      @gionatha 6 днів тому

      @@bilal-khan I’ll try my best to keep releasing new videos at a reasonable pace 😃 I hope to release a new video before the end of the year.

    • @bilal-khan
      @bilal-khan 6 днів тому

      @@gionatha looking forward

  • @ThomasSpellman
    @ThomasSpellman 11 днів тому

    Thanks!

    • @gionatha
      @gionatha 8 днів тому

      Wow! Thanks so much 🙏

  • @k0secha
    @k0secha 13 днів тому

    Im working on a PC and using Expo Go on an iphone. I followed your tutorial all the way to where you are installing xcode with the simulator. I'm a little confused, are you saying this project cannot be done on Windows? I didn't see that anywhere before I started working on it so wanted to check. When i run npx expo start it generates a QR code which i was successfully able to open on the iPhone with Expo Go, but I can't use this setup? Thanks in advance.

  • @Geuni620
    @Geuni620 15 днів тому

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

  • @ryannwaneri6352
    @ryannwaneri6352 20 днів тому

    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

    • @anasazitff
      @anasazitff 7 днів тому

      exactly, are you done implementing this using android? if yes, share source code.

  • @GM_Development
    @GM_Development 24 дні тому

    Great Job @gionatha The next app books app ?

  • @dineshsingh-kw6lt
    @dineshsingh-kw6lt 25 днів тому

    great tutoral, very helpfull for music app I am developing

  • @kasvith
    @kasvith 25 днів тому

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

  • @_theAuthority
    @_theAuthority 26 днів тому

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

  • @learningforever2531
    @learningforever2531 27 днів тому

    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 28 днів тому

    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с 28 днів тому

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

  • @GabrielLogan17
    @GabrielLogan17 29 днів тому

    Missing tests

  • @SirEdges_Adejo
    @SirEdges_Adejo 29 днів тому

    Beautiful project, except kinde is not open source

  • @UnFuckedUpMind
    @UnFuckedUpMind 29 днів тому

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

  • @smartdriver2990
    @smartdriver2990 29 днів тому

    Wow great, thanks for the complete tutorial

  • @JourneyGoesOn1
    @JourneyGoesOn1 29 днів тому

    Good Job Johnatan

  • @zafarinovace2270
    @zafarinovace2270 Місяць тому

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

  • @harry4088
    @harry4088 Місяць тому

    could you provide the deployment url please

  • @UnFuckedUpMind
    @UnFuckedUpMind Місяць тому

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

  • @muhamotto2084
    @muhamotto2084 Місяць тому

    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 Місяць тому

    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 UA-cam clone or a Notion clone. Greetings and good work!

  • @CarlosTello-h5s
    @CarlosTello-h5s Місяць тому

    great video

  • @vibhukarnwal4926
    @vibhukarnwal4926 Місяць тому

    great make more on next js with cicd docker deployment

  • @hubesh716
    @hubesh716 Місяць тому

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

  • @PsychoDude
    @PsychoDude Місяць тому

    The amount of configurations for mobile development scares me

  • @FragileSweXD
    @FragileSweXD Місяць тому

    Can't able to run on Android

  • @paranomsun
    @paranomsun Місяць тому

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

  • @sadiulhakim7814
    @sadiulhakim7814 Місяць тому

    Cool

  • @DavidLucas-ci2fy
    @DavidLucas-ci2fy Місяць тому

    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 Місяць тому

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

    • @anasazitff
      @anasazitff 7 днів тому

      @@nehalpradhan2229 its not entirely useful for android, since many expo features work only on ios and not on android. i had build my custom header, tab bar etc

  • @danielmoralesgonzalez4908
    @danielmoralesgonzalez4908 Місяць тому

    Thanks for the tutorial, you're a champion!

  • @Aristocrator
    @Aristocrator Місяць тому

    Tailwind license restricts using the library for ui-libs

  • @ranjithmuthu
    @ranjithmuthu 2 місяці тому

    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 2 місяці тому

    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 2 місяці тому

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

    • @PsychoDude
      @PsychoDude Місяць тому

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

  • @nicetech2237
    @nicetech2237 2 місяці тому

    Is it only for IOS alone

  • @aygunbayir
    @aygunbayir 2 місяці тому

    As a beginner it is hard to understand but thank you

  • @njorogekamau3820
    @njorogekamau3820 2 місяці тому

    I want to be you when I grow up.

  • @juanlosauro
    @juanlosauro 2 місяці тому

    Hey, what is your vscode theme?